Menggunakan SDK web yang dihasilkan

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

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

Itulah sebabnya Data Connect menyediakan lingkungan dan alat pengembangan yang memungkinkan Anda membuat prototipe skema, kueri, dan mutasi yang di-deploy server. Selain itu, SDK sisi klien akan dibuat secara otomatis saat Anda membuat prototipe.

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

Apa alur kerja pengembangan klien?

Jika Anda mengikuti Mulai, Anda telah diperkenalkan dengan alur pengembangan keseluruhan untuk Data Connect. Dalam panduan ini, Anda akan menemukan informasi yang lebih mendetail tentang cara membuat SDK Web dari skema Anda dan cara menggunakan kueri dan mutasi klien.

Anda dapat mempelajari pengembangan klien dengan repositori aplikasi panduan memulai dan membuat aplikasi Data Connect berfitur lengkap dengan mengikuti codelab untuk web kami.

Singkatnya, untuk menggunakan Web SDK yang dihasilkan di aplikasi klien, Anda harus mengikuti langkah-langkah prasyarat berikut:

1. Tambahkan Firebase ke aplikasi web Anda.

Kemudian:

1. Kembangkan skema aplikasi Anda.
2. Inisialisasi kode klien Anda dengan JavaScript SDK, atau library React atau Angular.
3. Untuk React dan Angular, instal paket Tanstack Query

4. Siapkan pembuatan SDK:

   • Dengan tombol Tambahkan SDK ke aplikasi di ekstensi Data Connect VS Code kami
   • Dengan mengupdate connector.yaml untuk JavaScript SDK, atau React atau Angular.

5. Impor library dan kode yang dihasilkan dengan JavaScript SDK, atau React atau Angular.

6. Terapkan panggilan ke kueri dan mutasi dengan JavaScript SDK, atau React atau Angular.

7. Lakukan pengujian dengan menyiapkan emulator Data Connect dengan JavaScript SDK, atau React atau Angular.

Menerapkan 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 membuat SDK Data Connect untuk framework.

Inisialisasi aplikasi Anda

Pertama, inisialisasi aplikasi Anda menggunakan urutan Firebase standar.

initializeApp({...});

Menginstal JavaScript SDK yang dihasilkan

Gunakan CLI Firebase untuk menyiapkan SDK yang dihasilkan Data Connect di aplikasi Anda. Perintah init akan mendeteksi semua aplikasi di folder saat ini dan menginstal SDK yang dihasilkan 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 dihasilkan.

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

firebase dataconnect:sdk:generate --watch

Membuat SDK di pipeline build

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

firebase dataconnect:sdk:generate

Mengimpor library

Ada dua set impor yang diperlukan untuk melakukan inisialisasi kode klien Anda: impor Data Connect umum dan impor SDK spesifik yang dihasilkan.

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 dihasilkan akan dilengkapi dengan Referensi Kueri yang telah ditentukan sebelumnya. Yang perlu Anda lakukan hanyalah mengimpor dan memanggil eksekusi pada kode tersebut.

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 di kemudian hari dalam siklus proses aplikasi, Anda memutuskan untuk menambahkan nilai LAYAR PENUH ke enum AspectRatio.

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

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

Contoh penerapan yang tangguh

Selalu tambahkan cabang default ke pernyataan switch di atas nilai enum, atau cabang else ke blok if/else if yang membandingkan nilai enum. Hal ini tidak diterapkan oleh bahasa JavaScript/TypeScript, tetapi merupakan cara untuk membuat kode klien menjadi 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

Atau, Anda dapat terhubung ke emulator dengan memanggil connectDataConnectEmulator, lalu meneruskan instance Data Connect seperti ini:

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.

Catatan: Panggilan getDataConnect hanya diperlukan jika Anda ingin terhubung ke emulator Data Connect. Jika tidak, SDK yang dihasilkan akan otomatis membuat instance objek DataConnect untuk Anda.

Menerapkan 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 serangkaian hook yang sangat memudahkan penanganan tugas asinkron dengan Firebase di aplikasi Anda.

Inisialisasi aplikasi Anda

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

initializeApp({...});

Menginstal paket TanStack Query Firebase

menginstal paket untuk TanStack Query di project Anda.

Reaksi

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

Membuat SDK React atau Angular

Seperti SDK web standar, seperti yang dijelaskan sebelumnya, alat Firebase menangani pembuatan SDK secara 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 dihasilkan agar menyertakan binding framework tambahan.

Mengimpor library

Ada empat set impor yang diperlukan untuk menginisialisasi kode klien React atau Angular Anda: impor Data Connect umum, impor TanStack umum, dan impor khusus untuk SDK yang dihasilkan JS dan React.

Perhatikan jenis ConnectorConfig yang disertakan dalam impor umum.

Reaksi

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

Menggunakan kueri dan mutasi di klien React atau Angular Anda

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

Dalam cuplikan berikut, perhatikan metode berawalan use, yaitu useListAllMovies untuk React dan metode berawalan inject, yaitu injectListAllMovies untuk Angular, keduanya dari SDK yang dihasilkan.

Reaksi

Semua operasi tersebut di SDK yang dihasilkan, baik kueri maupun mutasi, memanggil binding TanStackQuery:

• Memanggil dan menampilkan hookTanStack useDataConnectQuery
• Mutasi memanggil dan menampilkan hook 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

Catatan: ng add @angular/fire akan melakukannya secara otomatis untuk Anda, tetapi jika Anda memilih untuk menyiapkannya secara manual, Anda dapat melakukannya dengan kode berikut:

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 agar otomatis dimuat ulang saat data berubah.

Reaksi

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

Menghubungkan ke emulator Data Connect

Secara opsional, Anda dapat terhubung ke emulator dengan memanggil connectDataConnectEmulator, lalu meneruskan instance Data Connect ke hook yang dihasilkan, seperti berikut:

Reaksi

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

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

Catatan: Panggilan getDataConnect hanya diperlukan jika Anda ingin terhubung ke emulator Data Connect. Jika tidak, SDK yang dihasilkan akan otomatis membuat instance objek DataConnect untuk Anda.

Jenis data di SDK

Server Data Connect menampilkan jenis data GraphQL umum. Ini ditampilkan di SDK sebagai berikut.

Jenis Koneksi Data	TypeScript
Stempel waktu	string
Tanggal	string
UUID	string
Int64	string
Ganda	Angka
Float	Angka

Memperbarui SDK saat membuat prototipe

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

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

firebase dataconnect:sdk:generate --watch

Membuat SDK di pipeline build

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

firebase dataconnect:sdk:generate