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

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

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

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

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

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

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

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

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

इसके बाद:

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

4. एसडीके जनरेशन सेट अप करें:

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

5. JavaScript SDK की मदद से, लाइब्रेरी और जनरेट किया गया कोड इंपोर्ट करें. इसके अलावा, React या Angular का इस्तेमाल करके भी ऐसा किया जा सकता है.

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

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

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

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

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

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

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

initializeApp({...});

JavaScript SDK जनरेट करना

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

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

एसडीके जनरेट करने की प्रोसेस शुरू करना

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

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

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

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

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

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

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

ConnectorConfig ऑब्जेक्ट

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

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

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

क्लाइंट कोड को शुरू करने के लिए, दो तरह के इंपोर्ट की ज़रूरत होती है: सामान्य 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 '@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);

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

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

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`

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

किसी ऐप्लिकेशन के स्कीमा में गिनती की जानकारी शामिल हो सकती है. इसे आपकी 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 '@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

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

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

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

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

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

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

initializeApp({...});

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

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

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 जनरेट करना

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

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

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 से जनरेट किए गए एसडीके टूल के लिए खास इंपोर्ट.

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

// 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 पर ध्यान दें.

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

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 के साथ, अपने-आप रीलोड होने वाली क्वेरी का इस्तेमाल करना

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

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 इंस्टेंस पास किया जा सकता है. जैसे:

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

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

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

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

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

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

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

दूसरे शब्दों में कहें, तो जनरेट किए गए एसडीके को 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

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

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

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

firebase dataconnect:sdk:generate --watch

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

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

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