Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

ใช้ 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 ที่สร้างขึ้นในแอปไคลเอ็นต์ คุณจะต้องทำตามขั้นตอนเบื้องต้นต่อไปนี้

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

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

พัฒนาสคีมาของแอป
เริ่มต้นโค้ดไคลเอ็นต์ด้วย JavaScript SDK
ตั้งค่าการสร้าง SDK โดยทำดังนี้
- ใช้ปุ่มเพิ่ม SDK ลงในแอป ในส่วนขยาย SQL Connect VS Code
- อัปเดต connector.yaml สำหรับ JavaScript SDK
นำเข้าไลบรารีและโค้ดที่สร้างขึ้นด้วย JavaScript SDK
ติดตั้งใช้งานการเรียกไปยังการค้นหาและการเปลี่ยนแปลงด้วย JavaScript SDK
ทดสอบโดยตั้งค่าโปรแกรมจำลอง 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';

หมายเหตุ: Client SDK ของ JavaScript ที่สร้างขึ้นจะใช้อินเทอร์เฟซและ การดำเนินการที่มีชื่อเดียวกับ 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);
}

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

ดูรับข้อมูลอัปเดตแบบเรียลไทม์จาก 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 เมื่อเปิดใช้ฟีเจอร์นี้แล้ว 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's การรองรับแบบเรียลไทม์ในตัว แต่ อย่างใดอย่างหนึ่ง

โปรดทราบว่าการติดตั้งใช้งานแบบเรียลไทม์ของ 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 ดังนี้

การค้นหาจะเรียกใช้และแสดงฮุก 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

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

โต้ตอบ

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 ขณะสร้างต้นแบบ

firebase dataconnect:sdk:generate --watch

สร้าง SDK ในไปป์ไลน์การสร้าง

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

firebase dataconnect:sdk:generate