Comienza a usar Firebase SQL Connect con React

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

Requisitos previos

Para completar esta guía de inicio rápido, necesitarás lo siguiente:

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

Instructivo

Instructivo

1. Inicializa el proyecto

Crea un directorio nuevo y, luego, inicializa un proyecto de Firebase en él. Cuando se te solicite, elige las siguientes opciones:

  • Crea un proyecto de Firebase nuevo.
  • No crees un esquema con Gemini (en este instructivo, usarás un esquema de ejemplo precompilado ).
  • Crea una nueva instancia de Cloud SQL.
  • Crea una plantilla de React.
 
mkdir myproj ; cd myproj
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

2. Revisa las definiciones de GraphQL de ejemplo

En SQL Connect, defines todos los esquemas y las operaciones de tu base de datos con GraphQL. Cuando inicializaste tu proyecto, la Firebase CLI creó algunas definiciones de ejemplo para que comiences.

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

3. Implementa tus esquemas y operaciones

Cada vez que realices cambios en los esquemas, las consultas o las mutaciones de tu base de datos, debes implementarlos para que los cambios surtan efecto en la base de datos.

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

4. Propaga la base de datos con datos de muestra

Estos datos de propagación te darán algo para ver cuando pruebes la app de ejemplo. Ten en cuenta que, en este paso, ejecutas GraphQL arbitrario, lo que se permite para las tareas administrativas.

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

5. Genera un SDK de cliente de JavaScript

Este comando usa tus definiciones de GraphQL para generar una biblioteca de JavaScript específicamente para tu base de datos, completa con definiciones de tipo. Usas esta biblioteca en tu app cliente para realizar todas las operaciones de la base de datos.

Puedes generar bibliotecas para varias plataformas, incluidas Kotlin para Android, Swift para iOS y Flutter, agregando definiciones a connector.yaml.

 
npx -y firebase-tools@latest dataconnect:sdk:generate
 SDK de React generado automáticamente (extracto) 
export interface ListMoviesData {
  movies: ({
    id: UUIDString;
    title: string;
    imageUrl: string;
    genre?: string | null;
  } & Movie_Key)[];
}

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

6. Configura una app web

Ejecuta estos comandos para agregar una app web nueva a tu proyecto de 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 \
            @tanstack/react-query \
            @tanstack-query-firebase/react

7. Escribe un cliente de React de muestra

Reemplaza el contenido de web-app/src/App.jsx por esta app simple de React app.

Observa que la app completa el acceso necesario a la base de datos con una función de el SDK generado. El SDK generado para React usa TanStack Query para controlar la administración del estado management.

 
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;

8. Prueba la app web

Inicia el servidor de desarrollo para ver la app de ejemplo en acción.

 
npm run dev

Próximos pasos

Prueba la extensión de SQL Connect para VS Code

Cuando desarrolles con SQL Connect, te recomendamos usar la extensión de SQL Connect para VS Code. Incluso si no usas Visual Studio Code como tu entorno de desarrollo principal, la extensión proporciona varias funciones que hacen que el desarrollo de esquemas y operaciones sea más conveniente:

  • Un servidor de lenguaje GraphQL que proporciona verificaciones de sintaxis y sugerencias de autocompletar específicas para SQL 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 tus SDK generados sincronizados con tus definiciones de GraphQL.
  • Configuración simplificada del emulador local
  • Implementación simplificada en producción

Usa el SQL Connect emulador para el desarrollo local

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

Aprende a escribir esquemas y operaciones para tu app

Cuando desarrolles apps con SQL Connect, el diseño de tus esquemas y operaciones es 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 SQL 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.
  • Como alternativa, puedes escribir esquemas, consultas y mutaciones de bases de datos directamente con GraphQL. Comienza con la página Diseño SQL Connect esquemas y continúa con las páginas de seguimiento para aprender a escribir operaciones.