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

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

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

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

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

ट्यूटोरियल

mkdir myproj ; cd myproj
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 \
            @tanstack/react-query \
            @tanstack-query-firebase/react

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

अगले चरण

Data Connect VS Code एक्सटेंशन आज़माना

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

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

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

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

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

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

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