Inizia a utilizzare Firebase Data Connect con React

In questa guida rapida, creerai e implementerai un piccolo database di esempio e vi accederai da un frontend React.

Prerequisiti

Per completare questa guida introduttiva, avrai bisogno di quanto segue:

  • Un ambiente Node.js con NPM.
  • Un account Google.

Tutorial

Tutorial

1. Crea un nuovo progetto Firebase

Per iniziare, crea un nuovo progetto Firebase nella console Firebase. Poi, esegui l'upgrade del progetto al piano Blaze.

2. Inizializza il progetto

Crea una nuova directory e inizializza al suo interno un progetto Firebase. Quando richiesto, scegli le seguenti opzioni:

  • Scegli il progetto che hai creato nel passaggio precedente.
  • Non creare uno schema con Gemini (in questo tutorial utilizzerai uno schema di esempio predefinito).
  • Crea una nuova istanza di Cloud SQL.
  • Crea un modello React.
 
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

3. Esaminare le definizioni di esempio di GraphQL

In Data Connect, definisci tutti gli schemi e le operazioni del database utilizzando GraphQL. Quando hai inizializzato il progetto, la CLI Firebase ha creato alcune definizioni di esempio per aiutarti a iniziare.

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

4. Esegui il deployment di schemi e operazioni

Ogni volta che apporti modifiche agli schemi, alle query o alle mutazioni del database, devi eseguirne il deployment affinché le modifiche abbiano effetto sul database.

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

5. Inserisci dati di esempio nel database

Questi dati iniziali ti daranno qualcosa da esaminare quando testi l'app di esempio. Tieni presente che in questo passaggio esegui GraphQL arbitrario, consentito per le attività amministrative.

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

6. Generare un SDK client JavaScript

Questo comando utilizza le definizioni GraphQL per generare una libreria JavaScript specifica per il tuo database, completa di definizioni dei tipi. Utilizzi questa libreria nell'app client per eseguire tutte le operazioni del database.

Puoi generare librerie per più piattaforme, tra cui Kotlin per Android, Swift per iOS e Flutter, aggiungendo definizioni a connector.yaml.

 
npx -y firebase-tools@latest \
    dataconnect:sdk:generate
 SDK React generato automaticamente (estratto) 
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. Configurare un'app web

Esegui questi comandi per aggiungere una nuova app web al tuo progetto 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. Scrivi un client React di esempio

Sostituisci i contenuti di web-app/src/App.jsx con questa semplice app React.

Tieni presente che l'app completa l'accesso al database necessario utilizzando una funzione dell'SDK generato. L'SDK generato per React utilizza TanStack Query per gestire la gestione dello stato.

 
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. Prova l'app web

Avvia il server di sviluppo per vedere l'app di esempio in azione.

 
npm run dev

Passaggi successivi

Prova l'estensione Visual Studio Code

Quando sviluppi con Data Connect, ti consigliamo vivamente di utilizzare l'estensione Visual Studio Code. Anche se non utilizzi Visual Studio Code come ambiente di sviluppo principale, l'estensione offre diverse funzionalità che rendono più comodo lo sviluppo di schemi e operazioni:

  • Un server di linguaggio GraphQL che fornisce suggerimenti di controllo della sintassi e completamento automatico specifici per Data Connect
  • Pulsanti CodeLens in linea con il codice che ti consentono di leggere e scrivere dati dai file di definizione dello schema ed eseguire query e mutazioni dalle definizioni delle operazioni.
  • Mantieni sincronizzati automaticamente gli SDK generati con le definizioni GraphQL.
  • Configurazione semplificata dell'emulatore locale.
  • Deployment semplificato in produzione.

Utilizza l'emulatore Data Connect per lo sviluppo locale

Anche se questo tutorial ti ha mostrato come eseguire il deployment di schemi e operazioni Data Connect direttamente in produzione, probabilmente non vorrai apportare modifiche al database di produzione mentre sviluppi attivamente la tua app. Configura invece l'emulatore Data Connect e svolgi il lavoro di sviluppo su questo emulatore anziché sulla produzione. L'emulatore configura un'istanza PGlite locale che si comporta in modo simile a un'istanza Postgres live su CloudSQL.

Scopri come scrivere schemi e operazioni per la tua app

Quando sviluppi app con Data Connect, la progettazione di schemi e operazioni è una delle prime e più importanti attività di sviluppo che completerai.

  • Gemini nella console Firebase è uno strumento di AI che può generare schemi Data Connect da una descrizione in linguaggio naturale della tua app. Questo strumento può aiutarti a iniziare molto rapidamente, soprattutto se non hai mai lavorato con database relazionali.
  • In alternativa, è possibile scrivere schemi di database, query e mutazioni direttamente utilizzando GraphQL. Inizia dalla pagina Schemi Data Connect di progettazione e continua con le pagine successive per scoprire come scrivere le operazioni.