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

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

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

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

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

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

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

अगर React का इस्तेमाल किया जा रहा है, तो सेटअप के अन्य निर्देश देखें. साथ ही, Data Connect के लिए React 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@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

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

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

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

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

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

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

initializeApp({...});

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

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

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

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

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

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

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

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

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

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

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

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

नीचे दिए गए स्निपेट में, जनरेट किए गए React SDK टूल से use-प्रीफ़िक्स वाला तरीका useListAllMovies देखें. जनरेट किए गए SDK टूल में, क्वेरी और म्यूटेशन, दोनों तरह के ऐसे सभी use ऑपरेशन, TanStack क्वेरी बाइंडिंग को कॉल करते हैं:

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

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

function App() {
  ...
  const { isLoading, data, error } = useListAllMovies(dc);
  ...
}

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

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 का इस्तेमाल करें.

अन्य फ़्रेमवर्क के लिए ध्यान में रखने वाली बातें

Angular

कोड जनरेट करते समय, Angular CLI अपने डिपेंडेंसी ऑप्टिमाइज़ेशन कोड की वजह से, नए बदलावों को नहीं दिखाएगा. इसे ठीक करने के लिए, आपको अपने angular.json में बदलाव करना होगा.

  "projects": {
    "myproject": {
      "architect": {
        "serve:": {
          "prebundle": {
            "exclude": ["@movie-app/movies"]
          }
        }
      }
    }
  }