Premiers pas avec Firebase Data Connect à l'aide de React

Dans ce guide de démarrage rapide, vous allez créer et déployer une petite base de données exemple, puis y accéder à partir d'une interface utilisateur React.

Prérequis

Pour suivre ce guide de démarrage rapide, vous aurez besoin des éléments suivants :

  • Un environnement Node.js avec NPM.
  • Un compte Google.

Tutoriel

Tutoriel

1. Créer un projet Firebase

Commencez par créer un projet Firebase dans la console Firebase. Mettez ensuite à niveau le projet vers la formule Blaze.

2. Initialisez votre projet

Créez un répertoire et initialisez un projet Firebase dans celui-ci. Lorsque vous y êtes invité, sélectionnez les options suivantes :

  • Sélectionnez le projet que vous avez créé à l'étape précédente.
  • Ne créez pas de schéma avec Gemini (dans ce tutoriel, vous utiliserez un exemple de schéma prédéfini).
  • Créez une instance Cloud SQL.
  • Créez un modèle React.
 
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

3. Examiner les exemples de définitions GraphQL

Dans Data Connect, vous définissez tous vos schémas et opérations de base de données à l'aide de GraphQL. Lorsque vous avez initialisé votre projet, la CLI Firebase a créé des exemples de définitions pour vous aider à démarrer.

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

4. Déployer vos schémas et opérations

Chaque fois que vous modifiez vos schémas de base de données, vos requêtes ou vos mutations, vous devez les déployer pour que vos modifications prennent effet sur la base de données.

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

5. Insérer des exemples de données dans la base de données

Ces données d'amorçage vous donneront un aperçu lorsque vous testerez l'application exemple. Notez que, lors de cette étape, vous exécutez un code GraphQL arbitraire, ce qui est autorisé pour les tâches administratives.

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

6. Générer un SDK client JavaScript

Cette commande utilise vos définitions GraphQL pour générer une bibliothèque JavaScript spécifiquement pour votre base de données, avec des définitions de type. Vous utilisez cette bibliothèque dans votre application cliente pour effectuer toutes les opérations de base de données.

Vous pouvez générer des bibliothèques pour plusieurs plates-formes, y compris Kotlin pour Android, Swift pour iOS et Flutter, en ajoutant des définitions à connector.yaml.

 
npx -y firebase-tools@latest \
    dataconnect:sdk:generate
 Extrait du SDK React généré automatiquement 
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. Configurer une application Web

Exécutez ces commandes pour ajouter une application Web à votre projet Firebase.

 
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. Écrire un exemple de client React

Remplacez le contenu de web-app/src/App.jsx par cette application React simple.

Notez que l'application effectue l'accès à la base de données nécessaire à l'aide d'une fonction du SDK généré. Le SDK généré pour React utilise TanStack Query pour gérer l'état.

 
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. Essayez l'application web

Démarrez le serveur de développement pour voir l'application exemple en action.

 
npm run dev

Étapes suivantes

Essayer l'extension Visual Studio Code

Lors du développement avec Data Connect, nous recommandons fortement d'utiliser l'extension Visual Studio Code. Même si vous n'utilisez pas Visual Studio Code comme environnement de développement principal, l'extension fournit plusieurs fonctionnalités qui facilitent le développement de schémas et d'opérations :

  • Un serveur de langage GraphQL, qui fournit des suggestions de vérification de la syntaxe et de saisie semi-automatique spécifiques à Data Connect
  • Boutons CodeLens alignés sur votre code qui vous permettent de lire et d'écrire des données à partir de vos fichiers de définition de schéma, et d'exécuter des requêtes et des mutations à partir de vos définitions d'opération.
  • Synchronisez automatiquement vos SDK générés avec vos définitions GraphQL.
  • Configuration simplifiée de l'émulateur local.
  • Déploiement simplifié en production.

Utiliser l'émulateur Data Connect pour le développement local

Bien que ce tutoriel vous ait montré comment déployer des schémas et des opérations Data Connect directement en production, vous ne souhaiterez probablement pas apporter de modifications à votre base de données de production pendant que vous développez activement votre application. À la place, configurez l'émulateur Data Connect et effectuez votre travail de développement sur celui-ci plutôt que sur la production. L'émulateur configure une instance PGlite locale qui se comporte de la même manière qu'une instance Postgres en direct sur Cloud SQL.

Découvrez comment écrire des schémas et des opérations pour votre application

Lorsque vous développez des applications avec Data Connect, la conception de vos schémas et opérations est l'une des premières et des plus importantes tâches de développement que vous effectuerez.

  • Gemini dans la console Firebase est un outil d'IA qui peut générer des schémas Data Connect à partir d'une description en langage naturel de votre application. Cet outil peut vous aider à démarrer très rapidement, surtout si vous n'avez jamais travaillé avec des bases de données relationnelles auparavant.
  • Vous pouvez également écrire des schémas de base de données, des requêtes et des mutations directement à l'aide de GraphQL. Commencez par la page Concevoir des schémas Data Connect, puis accédez aux pages suivantes pour découvrir comment écrire des opérations.