Erste Schritte mit Firebase Data Connect mit React

In dieser Kurzanleitung erstellen und stellen Sie eine kleine Beispieldatenbank bereit und greifen über ein React-Frontend darauf zu.

Vorbereitung

Für diese Kurzanleitung benötigen Sie Folgendes:

  • Eine Node.js-Umgebung mit NPM.
  • Ein Google-Konto.

Anleitung

Anleitung

1. Neues Firebase-Projekt erstellen

Erstellen Sie zuerst ein neues Firebase-Projekt in der Firebase Console. Führen Sie dann für das Projekt ein Upgrade auf den Tarif „Blaze“ durch.

2. Projekt initialisieren

Erstellen Sie ein neues Verzeichnis und initialisieren Sie darin ein Firebase-Projekt. Wählen Sie bei entsprechender Aufforderung die folgenden Optionen aus:

  • Wählen Sie das Projekt aus, das Sie im vorherigen Schritt erstellt haben.
  • Erstellen Sie kein Schema mit Gemini. In diesem Tutorial verwenden Sie ein vorgefertigtes Beispielschema.
  • Erstellen Sie eine neue Cloud SQL-Instanz.
  • React-Vorlage erstellen
 
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

3. Beispielhafte GraphQL-Definitionen ansehen

In Data Connect definieren Sie alle Datenbankschemas und ‑vorgänge mit GraphQL. Als Sie Ihr Projekt initialisiert haben, hat die Firebase-Befehlszeile einige Beispieldefinitionen erstellt, damit Sie loslegen können.

 dataconnect/schema/schema.gql (Auszug) 
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 (Auszug) 
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

4. Schemas und Vorgänge bereitstellen

Wenn Sie Änderungen an Ihren Datenbankschemas, Abfragen oder Mutationen vornehmen, müssen Sie sie bereitstellen, damit sie in der Datenbank wirksam werden.

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

5. Datenbank mit Beispieldaten füllen

Mit diesen Startdaten haben Sie etwas, das Sie sich beim Testen der Beispiel-App ansehen können. Beachten Sie, dass Sie in diesem Schritt beliebigen GraphQL-Code ausführen, was für administrative Aufgaben zulässig ist.

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

6. JavaScript-Client-SDK generieren

Mit diesem Befehl werden Ihre GraphQL-Definitionen verwendet, um eine JavaScript-Bibliothek speziell für Ihre Datenbank zu generieren, einschließlich Typdefinitionen. Sie verwenden diese Bibliothek in Ihrer Client-App, um alle Datenbankvorgänge auszuführen.

Sie können Bibliotheken für mehrere Plattformen generieren, darunter Kotlin für Android, Swift für iOS und Flutter, indem Sie connector.yaml Definitionen hinzufügen.

 
npx -y firebase-tools@latest \
    dataconnect:sdk:generate
 Automatisch generiertes React SDK (Auszug) 
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. Web-App einrichten

Führen Sie diese Befehle aus, um Ihrem Firebase-Projekt eine neue Web-App hinzuzufügen.

 
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. Beispiel für einen React-Client schreiben

Ersetzen Sie den Inhalt von web-app/src/App.jsx durch diese einfache React-App.

Die App führt den erforderlichen Datenbankzugriff mit einer Funktion aus dem generierten SDK aus. Das generierte SDK für React verwendet TanStack Query für die Statusverwaltung.

 
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. Web-App ausprobieren

Starten Sie den Entwicklungsserver, um die Beispiel-App in Aktion zu sehen.

 
npm run dev

Nächste Schritte

Visual Studio Code-Erweiterung ausprobieren

Wenn Sie mit Data Connect entwickeln, empfehlen wir dringend die Verwendung der Visual Studio Code-Erweiterung. Auch wenn Sie Visual Studio Code nicht als primäre Entwicklungsumgebung verwenden, bietet die Erweiterung mehrere Funktionen, die die Entwicklung von Schemas und Vorgängen erleichtern:

  • Ein GraphQL-Sprachserver, der Syntaxprüfung und automatische Vervollständigungsvorschläge speziell für Data Connect bietet
  • CodeLens-Schaltflächen in der Zeile mit Ihrem Code, mit denen Sie Daten aus Ihren Schemadefinitionsdateien lesen und in diese schreiben sowie Abfragen und Mutationen aus Ihren Vorgangsdefinitionen ausführen können.
  • Generierte SDKs automatisch mit Ihren GraphQL-Definitionen synchronisieren
  • Vereinfachte Einrichtung des lokalen Emulators.
  • Einfachere Bereitstellung in der Produktion.

Data Connect-Emulator für die lokale Entwicklung verwenden

In dieser Anleitung wurde gezeigt, wie Sie Data Connect-Schemas und ‑Vorgänge direkt in der Produktion bereitstellen. Wahrscheinlich möchten Sie jedoch keine Änderungen an Ihrer Produktionsdatenbank vornehmen, während Sie Ihre App aktiv entwickeln. Richten Sie stattdessen den Data Connect-Emulator ein und führen Sie Ihre Entwicklungsarbeiten damit aus. Der Emulator richtet eine lokale PGlite-Instanz ein, die sich ähnlich wie eine Live-Postgres-Instanz in Cloud SQL verhält.

Informationen zum Erstellen von Schemas und Vorgängen für Ihre App

Beim Entwickeln von Apps mit Data Connect ist das Design Ihrer Schemas und Vorgänge eine der ersten und wichtigsten Entwicklungsaufgaben, die Sie ausführen.

  • Gemini in der Firebase Console ist ein KI-Tool, mit dem Data Connect-Schemas aus einer Beschreibung Ihrer App in natürlicher Sprache generiert werden können. Dieses Tool kann Ihnen den Einstieg erleichtern, insbesondere wenn Sie noch nie mit relationalen Datenbanken gearbeitet haben.
  • Alternativ können Sie Datenbankschemas, Abfragen und Mutationen direkt mit GraphQL schreiben. Beginnen Sie mit der Seite Data Connect-Schemas entwerfen und lesen Sie dann die Folgeseiten, um zu erfahren, wie Sie Schreibvorgänge ausführen.