Comienza a usar Firebase Data Connect con React

En esta guía de inicio rápido, crearás e implementarás una pequeña base de datos de muestra y accederás a ella desde un frontend de React.

Requisitos previos

Para completar este inicio rápido, necesitarás lo siguiente:

• Un entorno de Node.js con NPM
• Una Cuenta de Google

Instructivo

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

Próximos pasos

Prueba la extensión de Visual Studio Code

Cuando desarrolles con Data Connect, te recomendamos que uses la extensión de Visual Studio Code. Incluso si no usas Visual Studio Code como tu entorno de desarrollo principal, la extensión proporciona varias funciones que facilitan el desarrollo de esquemas y operaciones:

• Un servidor de lenguaje GraphQL que proporciona sugerencias de autocompletar y verificación de sintaxis específicas para Data Connect
• Botones de CodeLens en línea con tu código que te permiten leer y escribir datos desde tus archivos de definición de esquema, y ejecutar consultas y mutaciones desde tus definiciones de operación.
• Mantén automáticamente sincronizados los SDKs generados con tus definiciones de GraphQL.
• Configuración simplificada del emulador local
• Implementación simplificada en producción

Usa el emulador Data Connect para el desarrollo local

Si bien en este instructivo se mostró cómo implementar esquemas y operaciones de Data Connect directamente en producción, es probable que no desees realizar cambios en tu base de datos de producción mientras desarrollas tu app de forma activa. En cambio, configura el emulador de Data Connect y realiza tu trabajo de desarrollo en él en lugar de en producción. El emulador configura una instancia local de PGlite que se comporta de manera similar a una instancia activa de Postgres en Cloud SQL.

Aprende a escribir esquemas y operaciones para tu app

Cuando desarrolles apps con Data Connect, el diseño de tus esquemas y operaciones será una de las primeras y más importantes tareas de desarrollo que completarás.

• Gemini en Firebase console es una herramienta de IA que puede generar esquemas de Data Connect a partir de una descripción en lenguaje natural de tu app. Esta herramienta puede ayudarte a comenzar muy rápido, en especial si nunca trabajaste con bases de datos relacionales.
• También puedes escribir esquemas de bases de datos, consultas y mutaciones directamente con GraphQL. Comienza con la página Diseña esquemas de Data Connect y continúa con las páginas de seguimiento para aprender a escribir operaciones.