ใช้ SDK ของเว็บที่สร้างขึ้น

Firebase Data Connect client SDKs ช่วยให้คุณเรียกใช้การค้นหาและการ เปลี่ยนแปลงฝั่งเซิร์ฟเวอร์ได้โดยตรงจากแอป Firebase คุณสร้าง Client SDK ที่กำหนดเองแบบ ขนานไปพร้อมๆ กับการออกแบบสคีมา การค้นหา และการเปลี่ยนแปลงที่คุณทำให้ใช้งานได้ใน Data Connect service จากนั้นผสานรวมเมธอดจาก SDK นี้เข้ากับตรรกะของไคลเอ็นต์

ดังที่เราได้กล่าวไว้ในส่วนอื่นๆ สิ่งสำคัญที่ควรทราบคือ Data Connect โค้ดไคลเอ็นต์ไม่ได้ส่งการค้นหาและการเปลี่ยนแปลงและไม่ได้ดำเนินการบน เซิร์ฟเวอร์ แต่เมื่อทำให้ใช้งานได้ ระบบจะจัดเก็บการดำเนินการของ Data Connect ไว้ใน เซิร์ฟเวอร์เหมือนกับ Cloud Functions ซึ่งหมายความว่าคุณต้องทำให้การเปลี่ยนแปลงฝั่งไคลเอ็นต์ที่เกี่ยวข้องใช้งานได้เพื่อหลีกเลี่ยงไม่ให้ผู้ใช้เดิมได้รับผลกระทบ (เช่น ในแอปเวอร์ชันเก่า)

นั่นคือเหตุผลที่ Data Connect มีสภาพแวดล้อมและ เครื่องมือสำหรับนักพัฒนาแอปที่ช่วยให้คุณสร้างต้นแบบสคีมา การค้นหา และการเปลี่ยนแปลงที่ทำให้ใช้งานได้ในเซิร์ฟเวอร์ นอกจากนี้ยังสร้าง SDK ฝั่งไคลเอ็นต์โดยอัตโนมัติขณะที่คุณสร้างต้นแบบ

เมื่อคุณอัปเดตบริการและแอปไคลเอ็นต์ซ้ำๆ การอัปเดตทั้งฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ก็จะพร้อมใช้งาน

เวิร์กโฟลว์การพัฒนาไคลเอ็นต์คืออะไร

หากทำตามคู่มือเริ่มต้นใช้งาน คุณจะได้ทำความคุ้นเคยกับโฟลว์การพัฒนาโดยรวมสำหรับ Data Connect ในคู่มือนี้ คุณจะได้ดูข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับการสร้าง Web SDK จากสคีมา และการทำงานกับการค้นหาและการเปลี่ยนแปลงของไคลเอ็นต์

สรุปได้ว่าหากต้องการใช้ Web SDK ที่สร้างขึ้นในแอปไคลเอ็นต์ คุณจะต้องทำตามขั้นตอนเบื้องต้นต่อไปนี้

เพิ่ม Firebase ลงในเว็บแอป

จากนั้นทำดังนี้

พัฒนาสคีมาของแอป
เริ่มต้นโค้ดไคลเอ็นต์ด้วย JavaScript SDK หรือ React หรือ Angular ไลบรารี
สำหรับ React และ Angular ให้ติดตั้งแพ็กเกจ Tanstack Query
ตั้งค่าการสร้าง SDK โดยทำดังนี้
- ใช้ปุ่มเพิ่ม SDK ลงในแอป ในส่วนขยาย Data Connect VS Code
- อัปเดต connector.yaml สำหรับ JavaScript SDK หรือ React หรือ Angular
นำเข้าไลบรารีและโค้ดที่สร้างขึ้นด้วย JavaScript SDK หรือ React หรือ Angular
ใช้การเรียกไปยังการค้นหาและการเปลี่ยนแปลงด้วย JavaScript SDK หรือ React หรือ Angular
ทดสอบโดยตั้งค่าโปรแกรมจำลอง Data Connect ด้วย JavaScript SDK หรือ React หรือ Angular

ใช้โค้ดไคลเอ็นต์ด้วย Firebase JavaScript SDK

ส่วนนี้จะอธิบายวิธีใช้ไคลเอ็นต์โดยใช้ Firebase JavaScript SDK

หากใช้ React หรือ Angular โปรดดูวิธีการตั้งค่าอื่นและลิงก์ไปยัง เอกสารประกอบเพิ่มเติมเกี่ยวกับการสร้าง Data Connect SDK สำหรับเฟรมเวิร์ก

เริ่มต้นแอป

ขั้นแรก ให้เริ่มต้นแอปโดยใช้ ลำดับ Firebase มาตรฐาน

initializeApp({...});

ติดตั้ง JavaScript SDK ที่สร้างขึ้น

ใช้ Firebase CLI เพื่อตั้งค่า SDK ที่สร้างขึ้นของ Data Connect ในแอป คำสั่ง init ควรตรวจหาแอปทั้งหมดในโฟลเดอร์ปัจจุบันและติดตั้ง SDK ที่สร้างขึ้นโดยอัตโนมัติ

firebase init dataconnect:sdk

เชื่อมต่อแอปกับบริการ Data Connect

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';

const dataConnect = getDataConnect(connectorConfig);
// [Optionally] Configure the SDK to use Data Connect local emulator.
connectDataConnectEmulator(dataConnect, 'localhost', 9399);

อัปเดต SDK ขณะสร้างต้นแบบ

หากติดตั้งส่วนขยาย Data Connect VS Code ไว้ ส่วนขยายจะอัปเดต SDK ที่สร้างขึ้นให้เป็นเวอร์ชันล่าสุดอยู่เสมอ

หากไม่ได้ใช้ส่วนขยาย Data Connect VS Code คุณสามารถใช้ Firebase CLI เพื่ออัปเดต SDK ที่สร้างขึ้นให้เป็นเวอร์ชันล่าสุดได้

firebase dataconnect:sdk:generate --watch

สร้าง SDK ในไปป์ไลน์บิลด์

คุณสามารถใช้ Firebase CLI เพื่อสร้าง Data Connect SDK ในกระบวนการบิลด์ CI/CD

firebase dataconnect:sdk:generate

นำเข้าไลบรารี

คุณต้องนำเข้า 2 ชุดเพื่อเริ่มต้นโค้ดไคลเอ็นต์ ได้แก่ การนำเข้าทั่วไป 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 '@dataconnect/generated';

หมายเหตุ: JavaScript Client SDK ที่สร้างขึ้นจะใช้อินเทอร์เฟซและ การดำเนินการที่มีชื่อเดียวกับ Node.js Admin SDK ที่สร้างขึ้น โปรดตรวจสอบว่าได้นำเข้าไลบรารีที่ถูกต้องสำหรับแพลตฟอร์มของคุณ หากต้องการใช้ทั้ง 2 ไลบรารีในไฟล์เดียวกัน ให้ใช้ชื่อแทนการนำเข้าหรือการนำเข้าที่มีเนมสเปซสำหรับไลบรารีอย่างน้อย 1 รายการ

import { listMovies as adminListMovies } from '@dataconnect/admin-generated';
Or:
import * as Admin from '@dataconnect/admin-generated';

ใช้การค้นหาจาก JavaScript SDK

โค้ดที่สร้างขึ้นจะมาพร้อมกับ Query Ref ที่กำหนดไว้ล่วงหน้า สิ่งที่คุณต้องทำคือการนำเข้าและเรียกใช้ execute ในโค้ด

import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@dataconnect/generated';

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

เรียกใช้เมธอดการค้นหา SDK

ตัวอย่างการใช้ฟังก์ชันทางลัดการดำเนินการเหล่านี้

import { listMovies } from '@dataconnect/generated';
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 ใหม่ ตัวอย่างเช่น ลองนึกภาพว่าในภายหลังของวงจรชีวิตของแอปพลิเคชัน คุณตัดสินใจเพิ่มค่า FULLSCREEN ลงใน enum AspectRatio

ในเวิร์กโฟลว์ Data Connect คุณสามารถใช้เครื่องมือการพัฒนาในเครื่องเพื่อ อัปเดตการค้นหาและ SDK

อย่างไรก็ตาม ก่อนที่จะเผยแพร่ไคลเอ็นต์เวอร์ชันที่อัปเดตแล้ว ไคลเอ็นต์ที่ทำให้ใช้งานได้ก่อนหน้านี้อาจใช้งานไม่ได้

ตัวอย่างการใช้งานที่ยืดหยุ่น

เพิ่มสาขา default ลงในคำสั่ง switch เหนือค่า enum หรือ สาขา else ลงในบล็อก if/else if ที่เปรียบเทียบกับค่า enum เสมอ ภาษา 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 '@dataconnect/generated';

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

เชื่อมต่อกับโปรแกรมจำลอง Data Connect

หรือคุณจะเชื่อมต่อกับโปรแกรมจำลองโดยเรียกใช้ connectDataConnectEmulator แล้วส่งData Connect อินสแตนซ์ ดังนี้

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';

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

// Make calls from your app

หากต้องการเปลี่ยนไปใช้ทรัพยากรที่ใช้งานจริง ให้ใส่ความคิดเห็นในบรรทัดสำหรับการเชื่อมต่อกับโปรแกรมจำลอง

ใช้โค้ดไคลเอ็นต์สำหรับ React และ Angular

Firebase Data Connect มี SDK ที่สร้างขึ้นพร้อมฮุกสำหรับ React และ Angular โดยใช้ไลบรารีจากพาร์ทเนอร์ของเราที่ Invertase, TanStack Query Firebase

ไลบรารีนี้มีชุด Hook ที่ช่วยให้การจัดการงานแบบไม่พร้อมกันด้วย Firebase ในแอปพลิเคชันของคุณง่ายขึ้นมาก

เริ่มต้นแอป

ขั้นแรก ให้เริ่มต้นแอปโดยใช้ลำดับ Firebase มาตรฐานเช่นเดียวกับเว็บแอป Firebase

initializeApp({...});

ติดตั้งแพ็กเกจ TanStack Query Firebase

ติดตั้งแพ็กเกจสำหรับ TanStack Query ในโปรเจ็กต์

React

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

Angular

ng add @angular/fire

สร้าง React หรือ Angular SDK

เครื่องมือ Firebase จะจัดการการสร้าง SDK โดยอัตโนมัติตามสคีมาและการดำเนินการของคุณ เช่นเดียวกับ Web SDK มาตรฐานที่อธิบายไว้ ก่อนหน้านี้ Firebase

หากเพิ่งเพิ่ม React หรือ Angular ลงในโปรเจ็กต์ ให้เรียกใช้ firebase init dataconnect:sdk อีกครั้งเพื่อกำหนดค่า SDK ที่สร้างขึ้นใหม่ให้รวมการผูกเฟรมเวิร์กเพิ่มเติม

นำเข้าไลบรารี

คุณต้องนำเข้า 4 ชุดเพื่อเริ่มต้นโค้ดไคลเอ็นต์ React หรือ Angular ได้แก่ การนำเข้า Data Connect ทั่วไป การนำเข้า TanStack ทั่วไป และการนำเข้าเฉพาะสำหรับ JS และ React SDK ที่สร้างขึ้น

โปรดสังเกตประเภท ConnectorConfig ที่รวมอยู่ในการนำเข้าทั่วไป

React

// 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 '@dataconnect/generated';

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

Angular

// 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 '@dataconnect/generated';

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

ใช้การค้นหาและการเปลี่ยนแปลงในไคลเอ็นต์ React หรือ Angular

เมื่อตั้งค่าเสร็จแล้ว คุณจะรวมเมธอดจาก SDK ที่สร้างขึ้นได้

ในข้อมูลโค้ดต่อไปนี้ ให้สังเกตเมธอดที่มีคำนำหน้า use useListAllMovies สำหรับ React และเมธอดที่มีคำนำหน้า inject injectListAllMovies สำหรับ Angular ซึ่งทั้ง 2 เมธอด มาจาก SDK ที่สร้างขึ้น

React

การดำเนินการทั้งหมดดังกล่าวใน SDK ที่สร้างขึ้น ทั้งการค้นหาและการเปลี่ยนแปลง จะเรียกใช้การผูก TanStackQuery ดังนี้

การค้นหาจะเรียกใช้และแสดงผลฮุก TanStack useDataConnectQuery
การเปลี่ยนแปลงจะเรียกใช้และแสดงผลฮุก TanStack useDataConnectMutation

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

Angular

import { injectAllMovies, connectorConfig } from '@dataconnect/generated/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

คุณสามารถกำหนดค่าการค้นหาให้โหลดซ้ำโดยอัตโนมัติเมื่อข้อมูลมีการเปลี่ยนแปลง

React

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

Angular

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

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

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

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

Angular

// 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 มีฟีเจอร์การแคชฝั่งไคลเอ็นต์ที่ไม่บังคับ ซึ่งคุณ เปิดใช้ได้โดยแก้ไขไฟล์ connector.yaml เมื่อเปิดใช้ฟีเจอร์นี้แล้ว Client SDK ที่สร้างขึ้นจะแคชการตอบกลับการค้นหาในเครื่อง ซึ่งจะช่วยลดจำนวนคำขอฐานข้อมูลที่แอปส่ง และช่วยให้ส่วนต่างๆ ของแอปที่ต้องใช้ฐานข้อมูลทำงานได้เมื่อการเชื่อมต่อเครือข่ายถูกขัดจังหวะ

หากต้องการเปิดใช้การแคชฝั่งไคลเอ็นต์ ให้เพิ่มการกำหนดค่าการแคชฝั่งไคลเอ็นต์ลงในการกำหนดค่าตัวเชื่อมต่อโดยทำดังนี้

generate:
  javascriptSdk:
    outputDir: ../web/
    package: "@dataconnect/generated"
    clientCache:
      maxAge: 5s
      storage: memory

การกำหนดค่านี้มีพารามิเตอร์ 2 รายการ ซึ่งทั้ง 2 รายการจะใส่หรือไม่ใส่ก็ได้

maxAge: อายุสูงสุดที่การตอบกลับที่แคชไว้จะมีได้ก่อนที่ Client SDK จะดึงค่าใหม่ ตัวอย่างเช่น "0", "30s", "1h30m"

ค่าเริ่มต้นสำหรับ maxAge คือ 0 ซึ่งหมายความว่าระบบจะแคชการตอบกลับ แต่ Client SDK จะดึงค่าใหม่เสมอ ระบบจะใช้ค่าที่แคชไว้ก็ต่อเมื่อระบุ CACHE_ONLY เป็น executeQuery() และผลลัพธ์เริ่มต้นที่แสดงจาก subscribe()
storage: คุณกำหนดค่า Client SDK ให้แคชการตอบกลับในพื้นที่เก็บข้อมูล persistent หรือใน memory ได้ ผลลัพธ์ที่แคชไว้ในพื้นที่เก็บข้อมูล persistent จะยังคงอยู่เมื่อรีสตาร์ทแอป ใน Web SDK ระบบจะรองรับเฉพาะพื้นที่เก็บข้อมูล memory

หลังจากอัปเดตการกำหนดค่าการแคชของตัวเชื่อมต่อแล้ว ให้สร้าง Client SDK ขึ้นใหม่และสร้างแอปขึ้นใหม่ เมื่อทำเช่นนั้นแล้ว executeQuery() และ subscribe() จะแคชการตอบกลับและใช้ค่าที่แคชไว้ตามนโยบายที่คุณกำหนดค่าไว้ โดยทั่วไปแล้วการดำเนินการนี้จะเกิดขึ้นโดยอัตโนมัติโดยที่คุณไม่ต้องทำขั้นตอนเพิ่มเติมใดๆ แต่โปรดทราบสิ่งต่อไปนี้

ลักษณะการทำงานเริ่มต้นของ executeQuery() เป็นไปตามที่อธิบายไว้ข้างต้น นั่นคือ หากมีการแคชผลลัพธ์สำหรับการค้นหาและค่าที่แคชไว้มีอายุไม่เกิน maxAge ให้ใช้ค่าที่แคชไว้ ลักษณะการทำงานเริ่มต้นนี้เรียกว่านโยบาย PREFER_CACHE

นอกจากนี้ คุณยังระบุการเรียกใช้ executeQuery() แต่ละครั้งให้แสดงเฉพาะค่าที่แคชไว้ (CACHE_ONLY) หรือดึงค่าใหม่จากเซิร์ฟเวอร์โดยไม่มีเงื่อนไข (SERVER_ONLY) ได้ด้วย
```
await executeQuery(queryRef, QueryFetchPolicy.CACHE_ONLY);
```
```
await executeQuery(queryRef, QueryFetchPolicy.SERVER_ONLY);
```
เมื่อคุณเรียกใช้ subscribe() ฟังก์ชันนี้จะแสดงผลเนื้อหาที่แคชไว้ทันทีเสมอ หากมีเนื้อหาดังกล่าวอยู่ ไม่ว่าการตั้งค่า maxAge จะเป็นอย่างไรก็ตาม การเรียกใช้ executeQuery() ในภายหลังจะแจ้งให้ผู้ฟังทราบตาม maxAge ที่กำหนดค่าไว้

ประเภทข้อมูลใน SDK

เซิร์ฟเวอร์ Data Connect แสดงประเภทข้อมูล GraphQL ทั่วไป ซึ่งแสดงใน SDK ดังนี้

Data Connect ประเภท	TypeScript
การประทับเวลา	สตริง
วันที่	สตริง
UUID	สตริง
Int64	สตริง
เตียงคู่	ตัวเลข
ทศนิยม	ตัวเลข

อัปเดต SDK ขณะสร้างต้นแบบ

firebase dataconnect:sdk:generate --watch

สร้าง SDK ในไปป์ไลน์บิลด์

คุณสามารถใช้ Firebase CLI เพื่อสร้าง Data Connect SDK ในกระบวนการบิลด์ CI/CD

firebase dataconnect:sdk:generate