React का इस्तेमाल करके, Firebase Data Connect का इस्तेमाल शुरू करना

इस क्विकस्टार्ट में, आपको एक छोटा सैंपल डेटाबेस बनाने और उसे डिप्लॉय करने का तरीका बताया जाएगा. साथ ही, इसे React फ़्रंटएंड से ऐक्सेस करने का तरीका भी बताया जाएगा.

ज़रूरी शर्तें

इस क्विकस्टार्ट को पूरा करने के लिए, आपको इनकी ज़रूरत होगी:

• NPM के साथ Node.js एनवायरमेंट.
• Google खाता.

ट्यूटोरियल

npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

npx -y firebase-tools@latest \
    deploy --only dataconnect

npx -y firebase-tools@latest \
    dataconnect:execute dataconnect/seed_data.gql

npx -y firebase-tools@latest \
    dataconnect:sdk:generate

export interface ListMoviesData {
  movies: ({
    id: UUIDString;
    title: string;
    imageUrl: string;
    genre?: string | null;
  } & Movie_Key)[];
}

export function useListMovies(
  options?: useDataConnectQueryOptions&<ListMoviesData>
): UseDataConnectQueryResult&<ListMoviesData, undefined>;

npx -y firebase-tools@latest \
    apps:create web react-example
npx -y firebase-tools@latest \
    apps:sdkconfig web -o web-app/src/firebase-config.json
cd web-app ; npm i firebase ; cd ..

import { initializeApp } from 'firebase/app';
import firebaseConfig from './firebase-config.json';
import {
  QueryClient,
  QueryClientProvider
} from '@tanstack/react-query';

import { useListMovies } from '@dataconnect/generated/react';
import './App.css';

const app = initializeApp(firebaseConfig);
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Movies />
    </QueryClientProvider>
  );
}

function Movies() {
  const { isLoading, data } = useListMovies();
  if (isLoading) {
    return <h1>...</h1>
  }
  return (
    <>
      {data?.movies.map(
        movie => <h1 key={movie.id}>{movie.title}</h1>
      )}
    </>
  );
}

export default App;

npm run dev

अगले चरण

Visual Studio Code एक्सटेंशन आज़माएं

Data Connect का इस्तेमाल करके डेवलपमेंट करते समय, हमारा सुझाव है कि आप Visual Studio Code एक्सटेंशन का इस्तेमाल करें. अगर आपने Visual Studio Code को अपने प्राइमरी डेवलपमेंट एनवायरमेंट के तौर पर इस्तेमाल नहीं किया है, तो भी एक्सटेंशन कई ऐसी सुविधाएं देता है जिनसे स्कीमा और ऑपरेशन डेवलपमेंट को ज़्यादा आसानी से किया जा सकता है:

• GraphQL लैंग्वेज सर्वर, जो Data Connect के लिए सिंटैक्स की जांच करने और ऑटोकंप्लीट के सुझाव देने की सुविधा देता है
• आपके कोड की लाइन में CodeLens बटन होते हैं. इनकी मदद से, स्कीमा की परिभाषा वाली फ़ाइलों से डेटा पढ़ा और लिखा जा सकता है. साथ ही, ऑपरेशन की परिभाषाओं से क्वेरी और म्यूटेशन किए जा सकते हैं.
• जनरेट किए गए एसडीके को GraphQL की परिभाषाओं के साथ अपने-आप सिंक करके रखें.
• लोकल एम्युलेटर को आसानी से सेट अप किया जा सकता है.
• आसानी से प्रोडक्शन में डिप्लॉय करने की सुविधा.

लोकल डेवलपमेंट के लिए, Data Connect एम्युलेटर का इस्तेमाल करना

इस ट्यूटोरियल में, Data Connect स्कीमा और कार्रवाइयों को सीधे तौर पर प्रोडक्शन में डिप्लॉय करने का तरीका बताया गया है. हालांकि, ऐप्लिकेशन डेवलप करते समय, आपको प्रोडक्शन डेटाबेस में बदलाव नहीं करने चाहिए. इसके बजाय, Data Connect एम्युलेटर सेट अप करें और प्रोडक्शन के बजाय, इस पर डेवलपमेंट का काम करें. यह एम्युलेटर, लोकल PGlite इंस्टेंस सेट अप करता है. यह CloudSQL पर मौजूद लाइव Postgres इंस्टेंस की तरह काम करता है.

अपने ऐप्लिकेशन के लिए स्कीमा और कार्रवाइयां लिखने का तरीका जानें

Data Connect की मदद से ऐप्लिकेशन डेवलप करते समय, आपको सबसे पहले अपने स्कीमा और कार्रवाइयों का डिज़ाइन तैयार करना होगा. यह डेवलपमेंट का सबसे अहम टास्क होता है.

• Firebase कंसोल में Gemini एक एआई टूल है. यह आपके ऐप्लिकेशन के बारे में सामान्य भाषा में दी गई जानकारी से Data Connect स्कीमा जनरेट कर सकता है. यह टूल, आपको बहुत जल्दी शुरू करने में मदद कर सकता है. खास तौर पर, अगर आपने पहले कभी रिलेशनल डेटाबेस के साथ काम नहीं किया है.
• इसके अलावा, GraphQL का इस्तेमाल करके सीधे तौर पर डेटाबेस स्कीमा, क्वेरी, और म्यूटेशन लिखे जा सकते हैं. डिज़ाइन Data Connect स्कीमा पेज से शुरू करें. इसके बाद, फ़ॉलो-अप पेजों पर जाकर, लिखने की कार्रवाइयां करने का तरीका जानें.