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

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

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

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

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

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

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

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

  1. เพิ่ม Firebase ไปยังเว็บแอป

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

  1. พัฒนาสคีมาของแอป
  2. เริ่มต้นโค้ดไคลเอ็นต์ด้วย JavaScript SDK
  3. ตั้งค่าการสร้าง SDK โดยทำดังนี้
    • ใช้ปุ่มเพิ่ม SDK ลงในแอป ในส่วนขยาย SQL Connect VS Code
    • อัปเดต connector.yaml สำหรับ JavaScript SDK
  4. นำเข้าไลบรารีและโค้ดที่สร้างขึ้นด้วย JavaScript SDK
  5. ติดตั้งใช้งานการเรียกคำค้นหาและการเปลี่ยนแปลงด้วย JavaScript SDK
  6. ทดสอบโดยตั้งค่าโปรแกรมจำลอง SQL Connect ด้วย JavaScript SDK

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

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

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

เริ่มต้นแอป

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

initializeApp({...});

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

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

firebase init dataconnect:sdk

เชื่อมต่อแอปกับบริการ SQL 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 ขณะสร้างต้นแบบ

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

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

firebase dataconnect:sdk:generate --watch

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

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

firebase dataconnect:sdk:generate

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

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

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

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

สมัครรับข้อมูลการเปลี่ยนแปลง

ดูรับข้อมูลอัปเดตแบบเรียลไทม์จาก SQL Connect

จัดการการเปลี่ยนแปลงในช่องการแจงนับ

สคีมาของแอปอาจ มีการแจงนับ, ซึ่งคำค้นหา GraphQL สามารถเข้าถึงได้

เมื่อการออกแบบแอปมีการเปลี่ยนแปลง คุณอาจเพิ่มค่าที่รองรับ enum ใหม่ ตัวอย่างเช่น ลองนึกภาพว่าในภายหลังของวงจรชีวิตของแอปพลิเคชัน คุณตัดสินใจเพิ่มค่า FULLSCREEN ลงใน enum AspectRatio

ในเวิร์กโฟลว์ SQL 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' }));

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

คุณสามารถเชื่อมต่อกับโปรแกรมจำลองได้โดยเรียกใช้ connectDataConnectEmulator แล้วส่งอินสแตนซ์ SQL 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

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

เปิดใช้การแคชฝั่งไคลเอ็นต์

SQL 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

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

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

สร้าง React และ Angular SDK ด้วย TanStack

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

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

TanStack มาพร้อมกับการติดตั้งใช้งานการแคชฝั่งไคลเอ็นต์ และการสมัครรับข้อมูลแบบเรียลไทม์ของตัวเอง ซึ่งสามารถทำงานร่วมกับ SQL Connect's การรองรับแบบเรียลไทม์ในตัวได้ แต่จะทำได้ค่อนข้าง ยาก เราขอแนะนำให้คุณใช้การผูก TanStack หรือ SQL Connectการรองรับแบบเรียลไทม์ในตัว แต่ อย่างใดอย่างหนึ่ง

โปรดทราบว่าการติดตั้งใช้งานแบบเรียลไทม์ของ SQL Connect's เองมีข้อดีบางประการเหนือการผูก TanStack ดังนี้

  • การแคชแบบปกติ: SQL Connect ติดตั้งใช้งาน การแคชแบบปกติ, ซึ่งช่วยปรับปรุงความสอดคล้องของข้อมูล รวมถึงประสิทธิภาพของหน่วยความจำและเครือข่าย เมื่อเทียบกับการแคชระดับคำค้นหา การแคชแบบปกติจะทำให้เอนทิตีอัปเดตในส่วนหนึ่งของแอปและอัปเดตในส่วนอื่นๆ ที่ใช้เอนทิตีนั้นด้วย
  • การทำให้เป็นโมฆะจากระยะไกล: SQL Connect สามารถทำให้เอนทิตีที่แคชไว้ เป็นโมฆะจากระยะไกลในอุปกรณ์ที่สมัครรับข้อมูลทั้งหมด

เริ่มต้นแอป

ขั้นแรก ให้เริ่มต้นแอปโดยใช้ลำดับ 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

Angular

ng add @angular/fire

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

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

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

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

คุณต้องนำเข้า 4 ชุดเพื่อเริ่มต้นโค้ดไคลเอ็นต์ React หรือ Angular ได้แก่ การนำเข้า SQL 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 '@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 ที่สร้างขึ้น

โต้ตอบ

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

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

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

โต้ตอบ

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

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

คุณสามารถเชื่อมต่อกับโปรแกรมจำลองได้โดยเรียกใช้ connectDataConnectEmulator แล้วส่งอินสแตนซ์ SQL Connect ไปยังฮุกที่สร้างขึ้น ดังนี้

โต้ตอบ

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

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

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

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

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

firebase dataconnect:sdk:generate --watch

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

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

firebase dataconnect:sdk:generate