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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

वेब 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 टूल की सोर्स फ़ाइलें अपने-आप जनरेट और अपडेट हो जाती हैं. यह हॉट (फिर से) लोड होने वाले वर्कफ़्लो में एक मददगार सुविधा हो सकती है.

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

firebase dataconnect:sdk:generate --watch

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

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

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

क्लाइंट कोड सेट अप करना

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

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

initializeApp({...});

Data Connect वेब SDK टूल शुरू करें

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

ConnectorConfig ऑब्जेक्ट

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

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

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

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

// 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';

अपने वेब क्लाइंट का प्रोटोटाइप बनाना और उसकी जांच करना

लोकल एमुलेटर का इस्तेमाल करने के लिए क्लाइंट को इंस्ट्रूमेंट करना

आपके पास 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 ऑब्जेक्ट का एक इंस्टेंस बना देगा.

क्लाइंट साइड पर क्वेरी का इस्तेमाल करना

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

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`

क्लाइंट साइड पर म्यूटेशन का इस्तेमाल करना

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

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

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

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

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

फ़्रेमवर्क से जुड़ी ज़रूरी बातें

Angular

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

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