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

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

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

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

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

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

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

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

खास जानकारी के लिए, अपने क्लाइंट ऐप्लिकेशन में जनरेट किए गए वेब SDK टूल इस्तेमाल करने के लिए, ये ज़रूरी चरण पूरे करें:

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

इसके बाद:

1. अपना ऐप्लिकेशन स्कीमा बनाएं.
2. अपने क्लाइंट कोड को JavaScript SDK टूल या React या Angular लाइब्रेरी की मदद से शुरू करें.
3. React और Angular के लिए, Tanstack क्वेरी पैकेज इंस्टॉल करें

4. SDK टूल जनरेशन सेट अप करना:

   • हमारे Data Connect VS Code एक्सटेंशन में मौजूद ऐप्लिकेशन में SDK टूल जोड़ें बटन का इस्तेमाल करके
   • JavaScript SDK, React या Angular के लिए, connector.yaml को अपडेट करके.

5. JavaScript SDK टूल, React या Angular की मदद से, लाइब्रेरी और जनरेट किया गया कोड इंपोर्ट करें.

6. JavaScript SDK टूल, React या Angular की मदद से, क्वेरी और म्यूटेशन के लिए कॉल लागू करें.

7. Data Connect एमुलेटर को JavaScript SDK, React या Angular के साथ सेट अप करके, जांच करें.

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

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

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

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

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

initializeApp({...});

अपना JavaScript SDK टूल जनरेट करना

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

एसडीके जनरेशन के विकल्प, dataconnect.yaml फ़ाइल में मौजूद कई एंट्री के लिए होते हैं. यह फ़ाइल, प्रोजेक्ट को शुरू करने पर जनरेट होती है.

SDK टूल जनरेट करना शुरू करना

अपने connector.yaml में, outputDir, package, और (वेब SDK टूल के लिए) packageJsonDir जोड़ें.

generate:
  javascriptSdk:
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

outputDir से यह तय होता है कि जनरेट किया गया SDK टूल कहां आउटपुट होना चाहिए.

package पैकेज का नाम बताता है.

packageJsonDir से यह तय होता है कि पैकेज को कहां इंस्टॉल करना है.

ध्यान दें: जनरेट करने के लिए, हम "firebase": "^10.14.0" को peerDependency के तौर पर जोड़ते हैं. आपके डिपेंडेंसी मैनेजर (जैसे, pnpm) के आधार पर, हो सकता है कि ये डिपेंडेंसी अपने-आप इंस्टॉल न हों.

इस मामले में, firebase@latest इंस्टॉल करें, ताकि यह पक्का किया जा सके कि यह पियर डिपेंडेंसी पूरी हो गई है.

JavaScript SDK टूल को शुरू करना

Data Connect को सेट अप करने के लिए इस्तेमाल की गई जानकारी का इस्तेमाल करके, अपने Data Connect इंस्टेंस को शुरू करें. यह जानकारी, Firebase कंसोल के Data Connect टैब में उपलब्ध है.

ConnectorConfig ऑब्जेक्ट

SDK के लिए, कनेक्टर कॉन्फ़िगरेशन ऑब्जेक्ट की ज़रूरत होती है.

यह ऑब्जेक्ट, dataconnect.yaml में serviceId और location से और connector.yaml में connectorId से अपने-आप जनरेट होता है.

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

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

सामान्य इंपोर्ट में शामिल 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 '@myorg/myconnector';

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

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

import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@movie-app/movies';

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

SDK टूल की क्वेरी के तरीके कॉल करना

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

import { listMovies } from '@movie-app/movies';
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`

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

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

import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@movie-app/movies';

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

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

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

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@myorg/myconnector'; // Replace with your package name

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

// Make calls from your app

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

ध्यान दें: getDataConnect को कॉल करने की ज़रूरत सिर्फ़ तब होती है, जब आपको Data Connect एम्युलेटर से कनेक्ट करना हो. ऐसा न करने पर, जनरेट किया गया SDK टूल आपके लिए DataConnect ऑब्जेक्ट का इंस्टेंस अपने-आप बना देगा.

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

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

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

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

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

initializeApp({...});

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

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

ReactAngular

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

ng add @angular/fire

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

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

अपने प्रोजेक्ट के लिए React SDK टूल जनरेट करने के लिए, अपनी connector.yaml कॉन्फ़िगरेशन फ़ाइल में react कुंजी जोड़ें.

ReactAngular

generate:
  javascriptSdk:
    react: true
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

generate:
  javascriptSdk:
    angular: true
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

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

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

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

ReactAngular

// 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 '@myorg/myconnector';

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

// 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 '@myorg/myconnector';

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

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

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

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

ReactAngular

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

• क्वेरी कॉल करता है और TanStack useDataConnectQuery हुक दिखाता है
• म्यूटेशन, TanStack useDataConnectMutation हुक को कॉल करते हैं और उसे दिखाते हैं

import { useListAllMovies } from '@movies-app/movies/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>
}

ध्यान दें: ng add @angular/fire यह काम अपने-आप करेगा. हालांकि, अगर आपको इसे मैन्युअल तरीके से सेट अप करना है, तो नीचे दिए गए कोड का इस्तेमाल करें:

import { injectAllMovies, connectorConfig } from '@movies-app/movies/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 के साथ, अपने-आप रीफ़्रेश होने वाली क्वेरी का इस्तेमाल करना

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

ReactAngular

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 });
  }
}

// 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 Angular

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

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

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

// 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;
}),

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

ध्यान दें: getDataConnect को कॉल करने की ज़रूरत सिर्फ़ तब होती है, जब आपको Data Connect एम्युलेटर से कनेक्ट करना हो. ऐसा न करने पर, जनरेट किया गया SDK टूल आपके लिए DataConnect ऑब्जेक्ट का इंस्टेंस अपने-आप बना देगा.

SDK टूल में डेटा टाइप

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

Data Connect का टाइप	TypeScript
टाइमस्टैम्प	स्ट्रिंग
तारीख	स्ट्रिंग
यूयूआईडी	स्ट्रिंग
Int64	स्ट्रिंग
डबल-साइज़ बेड	संख्या
फ़्लोट	संख्या

SDK टूल जनरेट करने के लिए ध्यान देने वाली खास बातें

node_modules के हिसाब से पाथ कॉन्फ़िगर करना

JavaScript SDK टूल के लिए, Data Connect आपके SDK टूल को इंस्टॉल करने के लिए npm link का इस्तेमाल करता है. इसलिए, आपके जनरेट किए गए SDK टूल को node_modules पाथ के उसी लेवल पर या उस चाइल्ड डायरेक्ट्री में आउटपुट करना होगा जो node_modules को ऐक्सेस कर सकती है.

दूसरे शब्दों में, आपके जनरेट किए गए SDK टूल के ठीक से काम करने के लिए, उसके पास firebase नोड मॉड्यूल का ऐक्सेस होना चाहिए.

उदाहरण के लिए, अगर आपका node_modules my-app/ में है, तो आपकी आउटपुट डायरेक्ट्री my-app/js-email-generated होनी चाहिए, ताकि js-email-generated अपने पैरंट node_modules फ़ोल्डर से इंपोर्ट कर सके.

my-app/
  dataconnect/
    connector/
        connector.yaml
  node_modules/
    firebase/
  js-email-generated/

// connector.yaml
connectorId: "my-connector"
generate:
  javascriptSdk:
    outputDir: "../../js-email-generated"
    package: "@myapp/my-connector"

इसके अलावा, अगर आपके पास कोई ऐसा मोनोरेपो है जहां आपके मॉड्यूल रूट में होस्ट किए गए हैं, तो अपनी आउटपुट डायरेक्ट्री को अपने मोनोरेपो के किसी भी फ़ोल्डर में रखा जा सकता है.

my-monorepo/
  dataconnect/
    connector/
        connector.yaml
  node_modules/
    firebase/
  my-app/
    js-email-generated/
  package.json

// connector.yaml
connectorId: "my-connector"
generate:
  javascriptSdk:
    outputDir: "../../my-app/js-email-generated" # You can also output to ../../js-email-generated

ध्यान दें: अगर आपका प्रोजेक्ट किसी अलग डायरेक्ट्री स्ट्रक्चर में सेट अप किया गया है, तो डायरेक्ट्री का पूरा पाथ दिया जा सकता है.

प्रोटोटाइप बनाते समय SDK टूल अपडेट करना

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

अन्य मामलों में, अगर Firebase सीएलआई से Data Connect एमुलेटर का इस्तेमाल किया जा रहा है, तो .gql अपडेट पर एक वॉच सेट की जा सकती है. साथ ही, एसडीके सोर्स अपने-आप अपडेट हो सकते हैं.

इसके अलावा, .gql फ़ाइलों में बदलाव होने पर, SDK टूल फिर से जनरेट करने के लिए, CLI का इस्तेमाल किया जा सकता है:

firebase dataconnect:sdk:generate --watch

इंटिग्रेशन और प्रोडक्शन रिलीज़ के लिए SDK टूल जनरेट करना

कुछ मामलों में, जैसे कि सीआई टेस्ट के लिए सबमिट करने के लिए प्रोजेक्ट सोर्स तैयार करना, एक साथ कई अपडेट करने के लिए Firebase सीएलआई को कॉल किया जा सकता है.

ऐसे मामलों में, firebase dataconnect:sdk:generate का इस्तेमाल करें.