इस पेज का अनुवाद Cloud Translation API से किया गया है.

जनरेट किए गए वेब SDK टूल इस्तेमाल करना

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

जैसा कि हमने यहां बताया है, यह ध्यान रखना ज़रूरी है कि Data Connect क्लाइंट कोड, क्वेरी और म्यूटेशन सबमिट नहीं करता है. इन्हें सर्वर पर लागू किया जाता है. इसके बजाय, डिप्लॉय किए जाने पर Data Connect कार्रवाइयों को Cloud Functions जैसे सर्वर पर सेव किया जाता है. इसका मतलब है कि आपको क्लाइंट-साइड में ज़रूरी बदलाव करने होंगे, ताकि मौजूदा उपयोगकर्ताओं को कोई परेशानी न हो. उदाहरण के लिए, ऐप्लिकेशन के पुराने वर्शन पर.

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

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

क्लाइंट डेवलपमेंट का वर्कफ़्लो क्या है?

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

संक्षेप में कहें, तो अपने क्लाइंट ऐप्लिकेशन में जनरेट किए गए Web SDK टूल इस्तेमाल करने के लिए, आपको ये ज़रूरी चरण पूरे करने होंगे:

अपने वेब ऐप्लिकेशन में Firebase जोड़ें.

इसके बाद:

अपने ऐप्लिकेशन का स्कीमा डेवलप करें.
अपने क्लाइंट कोड को JavaScript SDK या React या Angular लाइब्रेरी से शुरू करें.
React और Angular के लिए, Tanstack Query पैकेज इंस्टॉल करें
एसडीके जनरेशन सेट अप करें:
- हमारे Data Connect VS Code एक्सटेंशन में मौजूद ऐप्लिकेशन में SDK टूल जोड़ें बटन की मदद से
- JavaScript SDK के लिए, connector.yaml को अपडेट करके या React या Angular को अपडेट करके.
JavaScript SDK की मदद से, लाइब्रेरी और जनरेट किया गया कोड इंपोर्ट करें. इसके अलावा, React या Angular का इस्तेमाल करके भी ऐसा किया जा सकता है.
JavaScript SDK, React या Angular की मदद से, क्वेरी और म्यूटेशन के लिए कॉल लागू करें.
JavaScript SDK, React या Angular के साथ Data Connect एम्युलेटर सेट अप करके टेस्ट करें.

Firebase JavaScript SDK टूल की मदद से क्लाइंट कोड लागू करना

इस सेक्शन में बताया गया है कि Firebase JavaScript SDK टूल का इस्तेमाल करके, क्लाइंट को कैसे लागू किया जा सकता है.

अगर React या Angular का इस्तेमाल किया जा रहा है, तो सेटअप करने के अन्य निर्देश और फ़्रेमवर्क के लिए Data Connect SDK टूल जनरेट करने के बारे में ज़्यादा जानकारी देने वाले दस्तावेज़ के लिंक देखें.

अपने ऐप्लिकेशन को शुरू करना

सबसे पहले, Firebase के स्टैंडर्ड सीक्वेंस का इस्तेमाल करके, अपने ऐप्लिकेशन को शुरू करें.

initializeApp({...});

जनरेट किया गया JavaScript SDK इंस्टॉल करना

अपने ऐप्लिकेशन में Data Connect से जनरेट किए गए एसडीके सेट अप करने के लिए, Firebase सीएलआई का इस्तेमाल करें. init कमांड को मौजूदा फ़ोल्डर में मौजूद सभी ऐप्लिकेशन का पता लगाना चाहिए. साथ ही, जनरेट किए गए SDK टूल अपने-आप इंस्टॉल होने चाहिए.

firebase init dataconnect:sdk

अपने ऐप्लिकेशन को Data Connect सेवा से कनेक्ट करें.

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';

const dataConnect = getDataConnect(connectorConfig);
// [Optionally] Configure the SDK to use Data Connect local emulator.
connectDataConnectEmulator(dataConnect, 'localhost', 9399);

प्रोटोटाइपिंग के दौरान एसडीके अपडेट करना

अगर आपने Data Connect VS Code एक्सटेंशन इंस्टॉल किया है, तो यह जनरेट किए गए SDK को हमेशा अप-टू-डेट रखेगा.

अगर Data Connect VS Code एक्सटेंशन का इस्तेमाल नहीं किया जाता है, तो जनरेट किए गए SDK टूल को अप-टू-डेट रखने के लिए, Firebase CLI का इस्तेमाल किया जा सकता है.

firebase dataconnect:sdk:generate --watch

बिल्ड पाइपलाइन में एसडीके जनरेट करना

सीआई/सीडी बिल्ड प्रोसेस में Data Connect SDK टूल जनरेट करने के लिए, Firebase CLI का इस्तेमाल किया जा सकता है.

firebase dataconnect:sdk:generate

लाइब्रेरी इंपोर्ट करना

क्लाइंट कोड को शुरू करने के लिए, दो तरह के इंपोर्ट की ज़रूरत होती है: सामान्य Data Connect इंपोर्ट और जनरेट किए गए खास एसडीके इंपोर्ट.

ध्यान दें कि सामान्य इंपोर्ट में ConnectorConfig ऑब्जेक्ट शामिल है.

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// generated queries and mutations from SDK
import { listMovies, ListMoviesResponse, createMovie, connectorConfig } from '@dataconnect/generated';

JavaScript SDK से क्वेरी इस्तेमाल करना

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

import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@dataconnect/generated';

const ref = listMoviesRef();
const { data } = await executeQuery(ref);
console.log(data.movies);

एसडीके के क्वेरी वाले तरीकों को कॉल करना

यहां इन ऐक्शन शॉर्टकट फ़ंक्शन का इस्तेमाल करने का एक उदाहरण दिया गया है:

import { listMovies } from '@dataconnect/generated';
function onBtnClick() {
// This will call the generated JS from the CLI and then make an HTTP request out
// to the server.
  listMovies().then(data => showInUI(data)); // == executeQuery(listMoviesRef);
}

बदलावों की सूचना पाने के लिए सदस्यता लेना

बदलावों के लिए सदस्यता ली जा सकती है. इससे क्वेरी चलाने पर, बदलावों के बारे में आपको सूचना मिलती रहेगी.

const listRef = listAllMoviesRef();

// subscribe will immediately invoke the query if no execute was called on it previously.
subscribe(listRef, ({ data }) => {
 updateUIWithMovies(data.movies);
});

await createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi", rating: 5 });\
await listMovies(); // will update the subscription above`

गिनती वाले फ़ील्ड में हुए बदलावों को हैंडल करना

किसी ऐप्लिकेशन के स्कीमा में गिनती की जानकारी शामिल हो सकती है. इसे आपकी GraphQL क्वेरी ऐक्सेस कर सकती हैं.

ऐप्लिकेशन के डिज़ाइन में बदलाव होने पर, इस्तेमाल की जा सकने वाली नई enum वैल्यू जोड़ी जा सकती हैं. उदाहरण के लिए, मान लें कि ऐप्लिकेशन के लाइफ़साइकल में बाद में, आपने AspectRatio enum में FULLSCREEN वैल्यू जोड़ने का फ़ैसला किया.

Data Connect वर्कफ़्लो में, स्थानीय डेवलपमेंट टूलिंग का इस्तेमाल करके अपनी क्वेरी और एसडीके अपडेट किए जा सकते हैं.

हालांकि, अपने क्लाइंट के अपडेट किए गए वर्शन को रिलीज़ करने से पहले, हो सकता है कि पहले से डिप्लॉय किए गए क्लाइंट काम न करें.

रीसाइलेंट तरीके से लागू करने का उदाहरण

enum वैल्यू के लिए, switch स्टेटमेंट में हमेशा default ब्रांच जोड़ें. इसके अलावा, enum वैल्यू की तुलना करने वाले if/else if ब्लॉक में else ब्रांच जोड़ें. इसे JavaScript/TypeScript भाषा लागू नहीं करती है. हालांकि, नई enum वैल्यू जोड़े जाने पर, क्लाइंट कोड को मज़बूत बनाने का यह तरीका है.

const queryResult = await getOldestMovie();

if (queryResult.data) {
  // we can use a switch statement's "default" case to check for unexpected values
  const oldestMovieAspectRatio = queryResult.data.originalAspectRatio;
  switch (oldestMovieAspectRatio) {
      case AspectRatio.ACADEMY:
      case AspectRatio.WIDESCREEN:
      case AspectRatio.ANAMORPHIC:
        console.log('This movie was filmed in Academy, widescreen or anamorphic aspect ratio!');
        break;
      default:
        // the default case will catch FULLSCREEN, UNAVAILABLE or _UNKNOWN
        // it will also catch unexpected values the SDK isn't aware of, such as CINEMASCOPE
        console.log('This movie was was NOT filmed in Academy, widescreen or anamorphic.');
        break;
  }

  // alternatively, we can check to see if the returned enum value is a known value
  if (!Object.values(AspectRatio).includes(oldestMovieAspectRatio)) {
    console.log(`Unrecognized aspect ratio: ${oldestAspectRatio}`);
  }
} else {
  console.log("no movies found!");
}

JavaScript SDK से म्यूटेशन का इस्तेमाल करना

म्यूटेशन को क्वेरी की तरह ही ऐक्सेस किया जा सकता है.

import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@dataconnect/generated';

const { data } = await executeMutation(createMovieRef({ movie: 'Empire Strikes Back' }));

Data Connect एम्युलेटर से कनेक्ट करना

इसके अलावा, connectDataConnectEmulator को कॉल करके और फिर Data Connect इंस्टेंस पास करके, एम्युलेटर से कनेक्ट किया जा सकता है. जैसे:

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);`

// Make calls from your app

प्रोडक्शन रिसॉर्स पर स्विच करने के लिए, एम्युलेटर से कनेक्ट करने वाली लाइनों को टिप्पणी के तौर पर मार्क करें.

React और Angular के लिए क्लाइंट कोड लागू करना

Firebase Data Connect, React और Angular के लिए हुक के साथ जनरेट किया गया एसडीके उपलब्ध कराता है. इसके लिए, Invertase के हमारे पार्टनर से उपलब्ध लाइब्रेरी, TanStack Query Firebase का इस्तेमाल किया जाता है.

यह लाइब्रेरी, हुक का एक सेट उपलब्ध कराती है. इससे आपके ऐप्लिकेशन में Firebase के साथ एसिंक्रोनस टास्क को मैनेज करना बहुत आसान हो जाता है.

अपने ऐप्लिकेशन को शुरू करना

सबसे पहले, किसी भी Firebase वेब ऐप्लिकेशन की तरह, अपने ऐप्लिकेशन को Firebase के स्टैंडर्ड सीक्वेंस का इस्तेमाल करके शुरू करें.

initializeApp({...});

TanStack Query Firebase पैकेज इंस्टॉल करना

अपने प्रोजेक्ट में TanStack Query के लिए पैकेज इंस्टॉल करें.

React

npm i --save @tanstack/react-query @tanstack-query-firebase/react
npm i --save firebase@latest # Note: React has a peer dependency on ^11.3.0

Angular

ng add @angular/fire

अपना React या Angular SDK जनरेट करना

स्टैंडर्ड वेब SDK टूल की तरह ही, Firebase टूलिंग आपके स्कीमा और कार्रवाइयों के आधार पर SDK टूल अपने-आप जनरेट करती है. इसके बारे में पहले बताया जा चुका है.

अगर आपने अपने प्रोजेक्ट में अभी-अभी React या Angular जोड़ा है, तो firebase init dataconnect:sdk को फिर से चलाएं, ताकि जनरेट किए गए SDK टूल को फिर से कॉन्फ़िगर किया जा सके. इससे, अतिरिक्त फ़्रेमवर्क बाइंडिंग शामिल की जा सकेंगी.

लाइब्रेरी इंपोर्ट करना

React या Angular क्लाइंट कोड को शुरू करने के लिए, चार सेट इंपोर्ट करने होते हैं: सामान्य Data Connect इंपोर्ट, सामान्य TanStack इंपोर्ट, और JS और React से जनरेट किए गए एसडीके टूल के लिए खास इंपोर्ट.

ध्यान दें कि सामान्य इंपोर्ट में ConnectorConfig टाइप शामिल है.

React

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// TanStack Query-related functions
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// generated queries and mutations from SDK
import { ListMoviesResponse, connectorConfig } from '@dataconnect/generated';

// generated React hooks from SDK
import { useListAllMovies, useCreateMovie } from "@dataconnect/generated/react";

Angular

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// TanStack Query-related functions
import { provideTanStackQuery, QueryClient } from "@tanstack/angular-query-experimental";

// generated queries and mutations from SDK
import { ListMoviesResponse, connectorConfig } from '@dataconnect/generated';

// generated React hooks from SDK
import { injectListAllMovies, injectCreateMovie } from "@dataconnect/generated/angular";

अपने React या Angular क्लाइंट में क्वेरी और म्यूटेशन का इस्तेमाल करना

सेटअप पूरा होने के बाद, जनरेट किए गए SDK टूल से तरीकों को शामिल किया जा सकता है.

यहां दिए गए स्निपेट में, जनरेट किए गए SDK टूल से मिले React के लिए use-प्रीफ़िक्स वाले तरीके useListAllMovies और Angular के लिए inject-प्रीफ़िक्स वाले तरीके injectListAllMovies पर ध्यान दें.

React

जनरेट किए गए SDK टूल में, इस तरह की सभी कार्रवाइयां, क्वेरी और म्यूटेशन, TanStackQuery बाइंडिंग को कॉल करती हैं:

यह क्वेरी, TanStack useDataConnectQuery हुक को कॉल करती है और उसे वापस भेजती है
म्यूटेशन कॉल और TanStack useDataConnectMutation हुक को वापस भेजता है

import { useListAllMovies } from '@dataconnect/generated/react';

function MyComponent() {
  const { isLoading, data, error } = useListAllMovies();
  if(isLoading) {
    return <div>Loading...</div>
  }
  if(error) {
    return <div> An Error Occurred: {error} </div>
  }
}

// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import MyComponent from './my-component';

function App() {
  const queryClient = new QueryClient();
  return <QueryClientProvider client={queryClient}>
    <MyComponent />
  </QueryClientProvider>
}

Angular

import { injectAllMovies, connectorConfig } from '@dataconnect/generated/angular';
import { provideDataConnect, getDataConnect } from '@angular/fire/data-connect';
import { provideTanStackQuery, QueryClient } from "@tanstack/angular-query-experimental";
const queryClient = new QueryClient();
...
providers: [
  ...
  provideTanStackQuery(queryClient),
  provideDataConnect(() => {
    const dc = getDataConnect(connectorConfig);
    return dc;
  })
]

React और Angular के साथ, अपने-आप रीलोड होने वाली क्वेरी का इस्तेमाल करना

डेटा में बदलाव होने पर, क्वेरी को अपने-आप रीलोड होने के लिए कॉन्फ़िगर किया जा सकता है.

React

export class MovieListComponent {
  movies = useListAllMovies();
}

export class AddPostComponent {
  const mutation = useCreateMovie({ invalidate: [listAllMoviesRef()] });
  addMovie() {
    // The following will automatically cause Tanstack to reload its listAllMovies query
    mutation.mutate({ title: 'The Matrix });
  }
}

Angular

// class
export class MovieListComponent {
  movies = injectListAllMovies();
}

// template
@if (movies.isPending()) {
    Loading...
}
@if (movies.error()) {
    An error has occurred: {{  movies.error() }}
}
@if (movies.data(); as data) {
    @for (movie of data.movies; track movie.id) {
    <mat-card appearance="outlined">
        <mat-card-content>{{movie.description}}</mat-card-content>
    </mat-card>
    } @empty {
        <h2>No items!</h2>
    }
}

Data Connect एम्युलेटर से कनेक्ट करना

इसके अलावा, एम्युलेटर से कनेक्ट करने के लिए, connectDataConnectEmulator को कॉल किया जा सकता है. इसके बाद, जनरेट किए गए हुक में Data Connect इंस्टेंस पास किया जा सकता है. जैसे:

React

import { getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';
import { useListAllMovies } from '@dataconnect/generated/react';

const dc = getDataConnect(connectorConfig);
connectDataConnectEmulator(dc, 'localhost', 9399);

class AppComponent() {
  ...
  const { isLoading, data, error } = useListAllMovies(dc);
  ...
}

Angular

// app.config.ts
import { provideDataConnect } from '@angular/fire/data-connect';
import { getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
provideDataConnect(() => {
  const dc = getDataConnect(connectorConfig);
  connectDataConnectEmulator(dc, 'localhost', 9399);
  return dc;
}),

एसडीके टूल में मौजूद डेटा टाइप

Data Connect सर्वर, सामान्य GraphQL डेटा टाइप दिखाता है. इन्हें एसडीके में इस तरह दिखाया जाता है.

डेटा कनेक्ट टाइप	TypeScript
टाइमस्टैम्प	स्ट्रिंग
तारीख	स्ट्रिंग
यूयूआईडी	स्ट्रिंग
Int64	स्ट्रिंग
डबल-साइज़ बेड	संख्या
फ़्लोट	संख्या

प्रोटोटाइपिंग के दौरान एसडीके अपडेट करना

firebase dataconnect:sdk:generate --watch

बिल्ड पाइपलाइन में एसडीके जनरेट करना

firebase dataconnect:sdk:generate