Menggunakan SDK web yang dihasilkan

Firebase Data Connect SDK klien memungkinkan Anda memanggil kueri dan mutasi sisi server langsung dari aplikasi Firebase. Anda membuat SDK klien kustom secara paralel saat mendesain skema, kueri, dan mutasi yang Anda deploy ke Data Connect layanan. Kemudian, Anda mengintegrasikan metode dari SDK ini ke dalam logika klien.

Seperti yang telah kami sebutkan di tempat lain, penting untuk diperhatikan bahwa Data Connect kueri dan mutasi tidak dikirimkan oleh kode klien dan dieksekusi di server. Sebagai gantinya, saat di-deploy, Data Connect operasi disimpan di server seperti Cloud Functions. Artinya, Anda harus men-deploy perubahan sisi klien yang sesuai untuk menghindari gangguan pada pengguna yang ada (misalnya, pada versi aplikasi yang lebih lama).

Itulah sebabnya Data Connect menyediakan lingkungan dan alat developer yang memungkinkan Anda membuat prototipe skema, kueri, dan mutasi yang di-deploy server. SDK ini juga otomatis membuat SDK sisi klien saat Anda membuat prototipe.

Setelah Anda melakukan iterasi pembaruan pada aplikasi layanan dan klien, pembaruan sisi server dan klien siap di-deploy.

Mengimplementasikan kode klien dengan Firebase JavaScript SDK

Bagian ini membahas cara mengimplementasikan klien menggunakan Firebase JavaScript SDK.

Jika Anda menggunakan React atau Angular, lihat petunjuk penyiapan alternatif dan link ke dokumentasi tambahan tentang pembuatan Data Connect SDK untuk framework.

Menginisialisasi aplikasi Anda

Pertama, inisialisasi aplikasi Anda menggunakan urutan Firebase standar .

initializeApp({...});

Menginstal JavaScript SDK yang dibuat

Gunakan Firebase CLI untuk menyiapkan Data Connect SDK yang dibuat di aplikasi Anda. Perintah init akan mendeteksi semua aplikasi di folder saat ini dan menginstal SDK yang dibuat secara otomatis.

firebase init dataconnect:sdk

Hubungkan aplikasi Anda ke layanan 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);

Memperbarui SDK saat membuat prototipe

Jika Anda telah menginstal ekstensi Data Connect VS Code, ekstensi ini akan selalu memperbarui SDK yang dibuat.

Jika tidak menggunakan ekstensi Data Connect VS Code, Anda dapat menggunakan Firebase CLI untuk memperbarui SDK yang dibuat.

firebase dataconnect:sdk:generate --watch

Membuat SDK dalam pipeline build

Anda dapat menggunakan Firebase CLI untuk membuat Data Connect SDK dalam proses build CI/CD.

firebase dataconnect:sdk:generate

Mengimpor library

Ada dua kumpulan impor yang diperlukan untuk menginisialisasi kode klien Anda: impor Data Connect umum dan impor SDK spesifik yang dibuat.

Perhatikan objek ConnectorConfig yang disertakan dalam impor umum.

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

Menggunakan kueri dari JavaScript SDK

Kode yang dibuat akan dilengkapi dengan Query Ref yang telah ditentukan sebelumnya. Anda hanya perlu mengimpor dan memanggil eksekusi di dalamnya.

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

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

Memanggil metode kueri SDK

Berikut adalah contoh penggunaan fungsi pintasan tindakan ini:

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

Berlangganan perubahan

Anda dapat berlangganan perubahan (yang akan diperbarui setiap kali Anda menjalankan kueri).

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`

Menangani perubahan pada kolom enumerasi

Skema aplikasi dapat berisi enumerasi, yang dapat diakses oleh kueri GraphQL Anda.

Saat desain aplikasi berubah, Anda dapat menambahkan nilai yang didukung enum baru. Misalnya, bayangkan bahwa nanti dalam siklus proses aplikasi, Anda memutuskan untuk menambahkan nilai FULLSCREEN ke enum AspectRatio.

Dalam alur kerja Data Connect, Anda dapat menggunakan alat pengembangan lokal untuk memperbarui kueri dan SDK.

Namun, sebelum Anda merilis klien versi terbaru, klien yang di-deploy sebelumnya mungkin akan rusak.

Contoh implementasi yang tangguh

Selalu tambahkan cabang default ke pernyataan switch atas nilai enum, atau cabang else ke blok if/else if yang dibandingkan dengan nilai enum. Hal ini tidak diterapkan oleh bahasa JavaScript/TypeScript, tetapi merupakan cara untuk membuat kode klien yang kuat jika nilai enum baru ditambahkan.

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

Menggunakan mutasi dari JavaScript SDK

Mutasi dapat diakses dengan cara yang sama seperti kueri.

import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@dataconnect/generated';

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

Menghubungkan ke emulator Data Connect

Jika ingin, Anda dapat terhubung ke emulator dengan memanggil connectDataConnectEmulator lalu meneruskan Data Connect instance, seperti berikut:

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

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

// Make calls from your app

Untuk beralih ke resource produksi, beri komentar pada baris untuk menghubungkan ke emulator.

Mengimplementasikan kode klien untuk React dan Angular

Firebase Data Connect menyediakan SDK yang dibuat dengan hook untuk React dan Angular menggunakan library yang tersedia dari partner kami di Invertase, TanStack Query Firebase.

Library ini menyediakan kumpulan hook yang sangat memudahkan penanganan tugas asinkron dengan Firebase di aplikasi Anda.

Menginisialisasi aplikasi Anda

Pertama, seperti aplikasi web Firebase lainnya, inisialisasi aplikasi Anda menggunakan urutan Firebase standar.

initializeApp({...});

Menginstal paket TanStack Query Firebase

Instal paket untuk TanStack Query di project Anda.

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

ng add @angular/fire

Membuat SDK React atau Angular

Seperti SDK web standar, seperti yang dijelaskan sebelumnya, alat Firebase menangani pembuatan SDK otomatis berdasarkan skema dan operasi Anda.

Jika Anda baru saja menambahkan React atau Angular ke project, jalankan kembali firebase init dataconnect:sdk untuk mengonfigurasi ulang SDK yang dibuat agar menyertakan binding framework tambahan.

Mengimpor library

Ada empat kumpulan impor yang diperlukan untuk menginisialisasi kode klien React atau Angular Anda: impor Data Connect umum, impor TanStack umum, dan impor spesifik untuk SDK yang dibuat JS dan React.

Perhatikan jenis ConnectorConfig yang disertakan dalam impor umum.

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

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

Menggunakan kueri dan mutasi di klien React atau Angular

Setelah penyiapan selesai, Anda dapat menggabungkan metode dari SDK yang dibuat.

Dalam cuplikan berikut, perhatikan metode dengan awalan use, useListAllMovies untuk React dan metode dengan awalan inject, injectListAllMovies untuk Angular, keduanya dari SDK yang dibuat.

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

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

Menggunakan kueri muat ulang otomatis dengan React dan Angular

Anda dapat mengonfigurasi kueri untuk dimuat ulang secara otomatis saat data berubah.

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

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

Menghubungkan ke emulator Data Connect

Jika ingin, Anda dapat terhubung ke emulator dengan memanggil connectDataConnectEmulator lalu meneruskan Data Connect instance ke hook yang dibuat, seperti berikut:

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

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

Untuk beralih ke resource produksi, beri komentar pada baris untuk menghubungkan ke emulator.

Jenis data di SDK

Server Data Connect mewakili jenis data GraphQL umum. Jenis data ini direpresentasikan di SDK sebagai berikut.

Memperbarui SDK saat membuat prototipe

Jika Anda telah menginstal ekstensi Data Connect VS Code, ekstensi ini akan selalu memperbarui SDK yang dibuat.

Jika tidak menggunakan ekstensi Data Connect VS Code, Anda dapat menggunakan Firebase CLI untuk memperbarui SDK yang dibuat.

firebase dataconnect:sdk:generate --watch

Membuat SDK dalam pipeline build

Anda dapat menggunakan Firebase CLI untuk membuat Data Connect SDK dalam proses build CI/CD.

firebase dataconnect:sdk:generate