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

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