Halaman ini diterjemahkan oleh Cloud Translation API.

Menggunakan SDK web yang dihasilkan

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

Seperti yang telah kami sebutkan di tempat lain, penting untuk diperhatikan bahwa kueri dan mutasi Data Connect tidak dikirimkan oleh kode klien dan dijalankan di server. 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 kerusakan pada pengguna yang ada (misalnya, pada versi aplikasi lama).

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

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

Membuat SDK web

Seperti sebagian besar project Firebase, pekerjaan pada kode klien Firebase Data Connect Anda dilakukan di direktori project lokal. Ekstensi VS Code Data Connect dan CLI Firebase adalah alat lokal penting untuk membuat dan mengelola kode klien.

Opsi pembuatan SDK diberi kunci ke beberapa entri dalam file dataconnect.yaml yang dihasilkan saat Anda melakukan inisialisasi project.

Melakukan inisialisasi pembuatan SDK

Di connector.yaml, tambahkan outputDir, package, dan (untuk web SDK) packageJsonDir.

generate:
  javascriptSdk:
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

outputDir menentukan tempat yang menjadi tujuan output SDK yang dihasilkan.

package menentukan nama paket.

packageJsonDir menentukan tempat untuk menginstal paket.

Dalam hal ini, instal firebase@latest untuk memastikan dependensi peer ini terpenuhi.

Mengonfigurasi jalur yang relatif terhadap `node_modules`

Untuk SDK web, karena Data Connect menggunakan npm link untuk menginstal SDK Anda, SDK yang dihasilkan harus dihasilkan ke direktori di tingkat yang sama dengan jalur node_modules Anda atau di direktori turunan yang dapat mengakses node_modules.

Dengan kata lain, SDK yang dihasilkan harus memiliki akses ke modul node firebase agar dapat berfungsi dengan benar.

Misalnya, jika Anda memiliki node_modules di my-app/, direktori output harus my-app/js-email-generated sehingga js-email-generated dapat mengimpor dari folder node_modules induknya.

my-app/
  dataconnect/
    connector/
        connector.yaml
  node_modules/
    firebase/
  js-email-generated/

// connector.yaml
connectorId: "my-connector"
generate:
  javascriptSdk:
    outputDir: "../../js-email-generated"
    package: "@myapp/my-connector"

Atau, jika Anda memiliki monorepo tempat modul dihosting di root, Anda dapat menempatkan direktori output di folder mana pun di monorepo.

my-monorepo/
  dataconnect/
    connector/
        connector.yaml
  node_modules/
    firebase/
  my-app/
    js-email-generated/
  package.json

// connector.yaml
connectorId: "my-connector"
generate:
  javascriptSdk:
    outputDir: "../../my-app/js-email-generated" # You can also output to ../../js-email-generated

Memperbarui SDK saat membuat prototipe

Jika Anda membuat prototipe secara interaktif dengan ekstensi VS Code Data Connect dan emulator Data Connect-nya, file sumber SDK akan otomatis dibuat dan diperbarui saat Anda mengubah file .gql yang menentukan skema, kueri, dan mutasi. Hal ini dapat menjadi fitur yang berguna dalam alur kerja pemuatan ulang (hot reload).

Dalam skenario lain, jika menggunakan emulator Data Connect dari CLI Firebase, Anda dapat menetapkan pemantauan pada update .gql dan juga mengupdate sumber SDK secara otomatis.

Atau, Anda dapat menggunakan CLI untuk membuat ulang SDK setiap kali file .gql diubah:

firebase dataconnect:sdk:generate --watch

Membuat SDK untuk integrasi dan untuk rilis produksi

Dalam beberapa skenario, seperti menyiapkan sumber project untuk dikirimkan ke pengujian CI, Anda dapat memanggil Firebase CLI untuk update batch.

Dalam kasus ini, gunakan firebase dataconnect:sdk:generate.

Menyiapkan kode klien

Melakukan inisialisasi aplikasi Data Connect

Pertama, lakukan inisialisasi aplikasi menggunakan urutan Firebase standar.

initializeApp({...});

Melakukan inisialisasi Data Connect web SDK

Lakukan inisialisasi instance Data Connect menggunakan informasi yang Anda gunakan untuk menyiapkan Data Connect (semua tersedia di tab Data Connect konsol Firebase).

Objek ConnectorConfig

SDK memerlukan objek konfigurasi konektor.

Objek ini otomatis dibuat dari serviceId dan location di dataconnect.yaml, dan connectorId dalam connector.yaml.

Mengimpor library

Ada dua kumpulan impor yang diperlukan untuk menginisialisasi kode klien Anda, impor Data Connect umum, dan impor SDK khusus yang dihasilkan.

// 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 '@myorg/myconnector';

Membuat prototipe dan menguji klien web Anda

Melengkapi klien untuk menggunakan emulator lokal

Anda dapat menggunakan emulator Data Connect, baik dari ekstensi VS Code Data Connect maupun dari CLI.

Menginstrumentasikan aplikasi untuk terhubung ke emulator sama dengan kedua skenario.

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@myorg/myconnector'; // Replace with your package name
const dataConnect = getDataConnect(connectorConfig);

connectDataConnectEmulator(dataConnect, 'localhost', 9399);`

// Make calls from your app

Untuk beralih ke resource produksi, komentari baris untuk terhubung ke emulator.

Mendapatkan instance

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

Menggunakan kueri di sisi klien

Kode yang dihasilkan akan dilengkapi dengan Referensi Kueri yang telah ditentukan sebelumnya. Anda hanya perlu mengimpor dan memanggil eksekusi pada file tersebut.

import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@movie-app/movies';

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 '@movie-app/movies';
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`

Menggunakan mutasi di sisi klien

Mutasi dapat diakses dengan cara yang sama seperti kueri.

import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@movie-app/movies';

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

Jenis data di web SDK

Server Data Connect mewakili jenis data GraphQL umum. Hal ini ditampilkan dalam SDK sebagai berikut.

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

Pertimbangan framework

Angular

Saat membuat kode, Angular CLI tidak akan menerima perubahan baru karena kode pengoptimalan dependensinya. Untuk memperbaikinya, Anda harus memodifikasi angular.json.

  "projects": {
      "myproject": {
         "architect": {
                 "serve:": {
                            "prebundle": {
                                         "exclude": ["@movie-app/movies"]
                              }
                   }
            }
     }
  }