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 बटन. इनकी मदद से, स्कीमा परिभाषा वाली फ़ाइलों से डेटा पढ़ा और लिखा जा सकता है. साथ ही, कार्रवाई की परिभाषाओं से क्वेरी और म्यूटेशन लागू किए जा सकते हैं.
• जनरेट किए गए SDK टूल को, GraphQL की परिभाषाओं के साथ अपने-आप सिंक रखना.
• स्थानीय एम्युलेटर को आसानी से सेट अप करना.
• प्रोडक्शन में आसानी से डिप्लॉयमेंट करना.

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

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

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

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

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

SQL Connect से रीयल-टाइम अपडेट पाने का तरीका जानना

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