Mulai menggunakan Firebase Data Connect dengan React

Dalam panduan memulai ini, Anda akan membuat dan men-deploy database contoh kecil serta mengaksesnya dari frontend React.

Prasyarat

Untuk menyelesaikan panduan memulai ini, Anda memerlukan hal berikut:

  • Lingkungan Node.js dengan NPM.
  • Akun Google.

Tutorial

Tutorial

1. Buat project Firebase baru

Mulailah dengan membuat project Firebase baru di Firebase console. Kemudian, upgrade project ke paket Blaze.

2. Melakukan inisialisasi project

Buat direktori baru dan lakukan inisialisasi project Firebase di dalamnya. Jika diminta, pilih opsi berikut:

  • Pilih project yang Anda buat pada langkah sebelumnya.
  • Jangan membuat skema dengan Gemini (dalam tutorial ini, Anda akan menggunakan contoh skema bawaan).
  • Buat instance Cloud SQL baru.
  • Buat template React.
 
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

3. Tinjau contoh definisi GraphQL

Di Data Connect, Anda menentukan semua skema dan operasi database menggunakan GraphQL. Saat Anda menginisialisasi project, Firebase CLI membuat beberapa contoh definisi untuk membantu Anda memulai.

 dataconnect/schema/schema.gql (kutipan) 
type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}
 dataconnect/example/queries.gql (kutipan) 
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

4. Men-deploy skema dan operasi Anda

Setiap kali Anda membuat perubahan pada skema, kueri, atau mutasi database, Anda harus men-deploy-nya agar perubahan diterapkan pada database.

 
npx -y firebase-tools@latest \
    deploy --only dataconnect

5. Mengisi database dengan data sampel

Data awal ini akan memberi Anda sesuatu untuk dilihat saat menguji aplikasi contoh. Perhatikan bahwa pada langkah ini Anda menjalankan GraphQL arbitrer, yang diizinkan untuk tugas administratif.

 
npx -y firebase-tools@latest \
    dataconnect:execute dataconnect/seed_data.gql

6. Membuat SDK klien JavaScript

Perintah ini menggunakan definisi GraphQL Anda untuk membuat library JavaScript khusus untuk database Anda, lengkap dengan definisi jenis. Anda menggunakan library ini di aplikasi klien untuk melakukan semua operasi database.

Anda dapat membuat library untuk beberapa platform, termasuk Kotlin untuk Android, Swift untuk iOS, dan Flutter, dengan menambahkan definisi ke connector.yaml.

 
npx -y firebase-tools@latest \
    dataconnect:sdk:generate
 SDK React yang dibuat otomatis (kutipan) 
export interface ListMoviesData {
  movies: ({
    id: UUIDString;
    title: string;
    imageUrl: string;
    genre?: string | null;
  } & Movie_Key)[];
}

export function useListMovies(
  options?: useDataConnectQueryOptions&<ListMoviesData>
): UseDataConnectQueryResult&<ListMoviesData, undefined>;

7. Menyiapkan aplikasi web

Jalankan perintah ini untuk menambahkan aplikasi web baru ke project Firebase Anda.

 
npx -y firebase-tools@latest \
    apps:create web react-example
npx -y firebase-tools@latest \
    apps:sdkconfig web -o web-app/src/firebase-config.json
cd web-app ; npm i firebase ; cd ..

8. Menulis klien React contoh

Ganti konten web-app/src/App.jsx dengan aplikasi React sederhana ini.

Perhatikan bahwa aplikasi menyelesaikan akses database yang diperlukan menggunakan fungsi dari SDK yang dihasilkan. SDK yang dihasilkan untuk React menggunakan TanStack Query untuk menangani pengelolaan status.

 
import { initializeApp } from 'firebase/app';
import firebaseConfig from './firebase-config.json';
import {
  QueryClient,
  QueryClientProvider
} from '@tanstack/react-query';

import { useListMovies } from '@dataconnect/generated/react';
import './App.css';

const app = initializeApp(firebaseConfig);
const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Movies />
    </QueryClientProvider>
  );
}

function Movies() {
  const { isLoading, data } = useListMovies();
  if (isLoading) {
    return <h1>...</h1>
  }
  return (
    <>
      {data?.movies.map(
        movie => <h1 key={movie.id}>{movie.title}</h1>
      )}
    </>
  );
}

export default App;

9. Mencoba aplikasi web

Mulai server pengembangan untuk melihat cara kerja aplikasi contoh.

 
npm run dev

Langkah berikutnya

Mencoba ekstensi Visual Studio Code

Saat mengembangkan dengan Data Connect, sebaiknya gunakan ekstensi Visual Studio Code. Meskipun Anda tidak menggunakan Visual Studio Code sebagai lingkungan pengembangan utama, ekstensi ini menyediakan beberapa fitur yang membuat pengembangan skema dan operasi menjadi lebih mudah:

  • Server bahasa GraphQL, yang menyediakan pemeriksaan sintaksis dan saran pelengkapan otomatis khusus untuk Data Connect
  • Tombol CodeLens sebaris dengan kode yang memungkinkan Anda membaca dan menulis data dari file definisi skema dan menjalankan kueri serta mutasi dari definisi operasi.
  • Secara otomatis menjaga SDK yang dihasilkan tetap disinkronkan dengan definisi GraphQL Anda.
  • Penyiapan emulator lokal yang disederhanakan.
  • Deployment yang disederhanakan ke produksi.

Menggunakan emulator Data Connect untuk pengembangan lokal

Meskipun tutorial ini menunjukkan cara men-deploy skema dan operasi Data Connect langsung ke produksi, Anda mungkin tidak ingin membuat perubahan pada database produksi saat Anda sedang mengembangkan aplikasi secara aktif. Sebagai gantinya, siapkan emulator Data Connect dan lakukan pekerjaan pengembangan Anda di emulator tersebut, bukan di produksi. Emulator menyiapkan instance PGlite lokal yang berperilaku serupa dengan instance Postgres aktif di CloudSQL.

Pelajari cara menulis skema dan operasi untuk aplikasi Anda

Saat mengembangkan aplikasi dengan Data Connect, desain skema dan operasi adalah salah satu tugas pengembangan pertama dan terpenting yang akan Anda selesaikan.

  • Gemini di Firebase console adalah alat AI yang dapat membuat skema Data Connect dari deskripsi bahasa alami aplikasi Anda. Alat ini dapat membantu Anda memulai dengan sangat cepat, terutama jika Anda belum pernah menggunakan database relasional sebelumnya.
  • Atau, Anda dapat menulis skema, kueri, dan mutasi database secara langsung menggunakan GraphQL. Mulai dengan halaman Skema Data Connect Desain dan lanjutkan ke halaman lanjutan untuk mempelajari cara menulis operasi.