שימוש בערכות SDK שנוצרו לאינטרנט

ערכות SDK ללקוח של Firebase Data Connect מאפשרות לבצע קריאות לשאילתות ולמוטציות בצד השרת ישירות מאפליקציית Firebase. אתם יוצרים ערכת SDK מותאמת אישית ללקוח במקביל לתכנון הסכימות, השאילתות והמוטציות שאתם פורסים בשירות Data Connect. לאחר מכן, משלבים שיטות מ-SDK הזה לתוך הלוגיקה של הלקוח.

כמו שציינו קודם, חשוב לציין ששאילתות ומוטציות של Data Connect לא נשלחות באמצעות קוד לקוח ולא מופעלות בשרת. במקום זאת, כשפורסים, פעולות של Data Connect מאוחסנות בשרת כמו Cloud Functions. כלומר, צריך לפרוס את השינויים המתאימים בצד הלקוח כדי למנוע שיבושים אצל משתמשים קיימים (לדוגמה, בגרסאות ישנות יותר של האפליקציה).

לכן, Data Connect מספק סביבה לפיתוח וכלים שמאפשרים ליצור אב טיפוס של הסכימות, השאילתות והמוטציות שנפרסות בשרת. הוא גם יוצר ערכות SDK בצד הלקוח באופן אוטומטי, תוך כדי יצירת אב טיפוס.

אחרי העדכונים החוזרים לאפליקציות של השירות ושל הלקוח, העדכונים בצד השרת ובצד הלקוח מוכנים לפריסה.

יצירת SDK לאינטרנט

כמו ברוב הפרויקטים של Firebase, העבודה על קוד הלקוח Firebase Data Connect מתבצעת בספריית פרויקטים מקומית. גם התוסף של Data Connect ל-VS Code וגם ה-CLI של Firebase הם כלים מקומיים חשובים ליצירה ולניהול של קוד לקוח.

אפשרויות היצירה של ה-SDK מוגדרות במספר רשומות בקובץ dataconnect.yaml שנוצר כשאתם מפעילים את הפרויקט.

אתחול היצירה של ה-SDK

ב-connector.yaml, מוסיפים את outputDir, את package ואת packageJsonDir (ל-SDK לאינטרנט). 
generate:
  javascriptSdk:
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

outputDir מציין לאן צריך להוציא את ה-SDK שנוצר.

package מציין את שם החבילה.

packageJsonDir מציין איפה להתקין את החבילה.

במקרה כזה, צריך להתקין את firebase@latest כדי לוודא שהתלות הזו בצד השני מתקיימת.

הגדרת נתיבים ביחס ל-node_modules

ב-SDK לאינטרנט, מכיוון ש-Data Connect משתמש ב-npm link כדי להתקין את ה-SDK, צריך להוציא את ה-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, קובצי המקור של ה-SDK נוצרים ומתעדכנים באופן אוטומטי בזמן שאתם משנים את קובצי ה-.gql שמגדירים סכימות, שאילתות ומוטציות. זו יכולה להיות תכונה שימושית בתהליכי עבודה של טעינה (מחדש) חמה.

בתרחישים אחרים, אם אתם משתמשים במהדמ Data Connect מ-CLI של Firebase, תוכלו להגדיר מעקב אחרי עדכוני .gql וגם לעדכן באופן אוטומטי את מקורות ה-SDK.

לחלופין, אפשר להשתמש ב-CLI כדי ליצור מחדש את ערכות ה-SDK בכל פעם שקובצי ה-gql משתנים:

firebase dataconnect:sdk:generate --watch

יצירת ערכות SDK לשילוב ולגרסאות ייצור

במקרים מסוימים, כמו הכנת מקורות של פרויקטים לשליחה לבדיקות CI, אפשר להפעיל את ה-CLI של Firebase כדי לבצע עדכון באצווה.

במקרים כאלה, צריך להשתמש ב-firebase dataconnect:sdk:generate.

הגדרת קוד לקוח

איך מאתחלים את האפליקציה ל-Data Connect

בשלב הראשון מאתחלים את האפליקציה באמצעות הרצף הרגיל של Firebase.

initializeApp({...});

אתחול ה-SDK לאינטרנט של Data Connect

מאתחלים את המכונה של Data Connect באמצעות המידע ששימש להגדרת Data Connect (הכול זמין בכרטיסייה Data Connect במסוף Firebase).

האובייקט ConnectorConfig

ב-SDK נדרש אובייקט תצורה של מחבר.

האובייקט הזה נוצר באופן אוטומטי מ-serviceId ומ-location ב-dataconnect.yaml ומ-connectorId ב-connector.yaml.

ייבוא ספריות

כדי לאתחל את קוד הלקוח צריך לבצע שתי קבוצות של ייבוא: ייבוא 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 דרך התוסף של Data Connect ל-VS Code או דרך ה-CLI.

הכלי לכלי למדידה של האפליקציה כדי להתחבר לאמולטור זהה בשני התרחישים.

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.

שימוש בשאילתות בצד הלקוח

הקוד שנוצר כבר יכלול Query Refs שהוגדרו מראש. כל מה שצריך לעשות הוא לייבא אותם ולקרוא להפעלה שלהם.

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 באופן הבא.

סוג Data Connect TypeScript
חותמת זמן מחרוזת
תאריך מחרוזת
מזהה ייחודי אוניברסלי (UUID) מחרוזת
Int64 מחרוזת
זוגית מספר
Float מספר

שיקולים לגבי מסגרות

Angular

כשיוצרים קוד, ה-Angular CLI לא יזהה שינויים חדשים בגלל קוד האופטימיזציה של יחסי התלות. כדי לפתור את הבעיה, צריך לשנות את angular.json.

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