React का इस्तेमाल करके, Firebase SQL 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

अगले चरण

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

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

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

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

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

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

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

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