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

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 ; cd ..

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

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.