Erste Schritte mit Firebase SQL 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

mkdir myproj ; cd myproj
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

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

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

npx -y firebase-tools@latest dataconnect:sdk:generate

export interface ListMoviesData {
  movies: ({
    id: UUIDString;
    title: string;
    imageUrl: string;
    genre?: string | null;
  } & Movie_Key)[];
}

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

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 \
            @tanstack/react-query \
            @tanstack-query-firebase/react

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;

npm run dev

Nächste Schritte

SQL Connect-VS Code-Erweiterung ausprobieren

Bei der Entwicklung mit SQL Connect empfehlen wir dringend die Verwendung der SQL Connect-VS 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 SQL 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.
• Vereinfachte Bereitstellung in der Produktion.

SQL Connect-Emulator für die lokale Entwicklung verwenden

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

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

Beim Entwickeln von Apps mit SQL Connect ist das Design Ihrer Schemas und Vorgänge eine der ersten und wichtigsten Entwicklungsaufgaben, die Sie erledigen müssen.

• Gemini in der Firebase-Konsole ist ein KI-Tool, mit dem SQL 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 Anleitung unter SQL Connect-Schemas entwerfen und lesen Sie dann auf den Folgeseiten, wie Sie Vorgänge schreiben.

SQL Connect-Echtzeitupdates erhalten

Mit SQL Connect können Sie Clientanwendungen schreiben, die in Echtzeit auf sich ändernde Daten reagieren. Weitere Informationen finden Sie unter Echtzeitupdates von SQL Connect erhalten.