Começar a usar o Firebase Data Connect com o React

Neste guia de início rápido, você vai criar e implantar um pequeno banco de dados de amostra e acessá-lo de um front-end do React.

Pré-requisitos

Para concluir este guia de início rápido, você vai precisar do seguinte:

• Um ambiente Node.js com NPM.
• Uma Conta do 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

Próximas etapas

Teste a extensão do Visual Studio Code

Ao desenvolver com Data Connect, recomendamos usar a extensão do Visual Studio Code. Mesmo que você não use o Visual Studio Code como ambiente de desenvolvimento principal, a extensão oferece vários recursos que tornam o desenvolvimento de esquemas e operações mais conveniente:

• Um servidor de linguagem GraphQL, que oferece verificação de sintaxe e sugestões de preenchimento automático específicas para Data Connect
• Botões do CodeLens em linha com seu código que permitem ler e gravar dados dos arquivos de definição de esquema e executar consultas e mutações das definições de operação.
• Mantenha automaticamente os SDKs gerados sincronizados com suas definições do GraphQL.
• Configuração simplificada do emulador local.
• Implantação simplificada em produção.

Usar o emulador Data Connect para desenvolvimento local

Embora este tutorial tenha mostrado como implantar esquemas e operações Data Connect diretamente na produção, provavelmente você não vai querer fazer mudanças no banco de dados de produção enquanto estiver desenvolvendo o app. Em vez disso, configure o emulador Data Connect e faça o trabalho de desenvolvimento nele, em vez de na produção. O emulador configura uma instância local do PGlite que se comporta de maneira semelhante a uma instância ativa do Postgres no CloudSQL.

Saiba como escrever esquemas e operações para seu app

Ao desenvolver apps com Data Connect, o design dos seus esquemas e operações é uma das primeiras e mais importantes tarefas de desenvolvimento que você vai concluir.

• O Gemini no console do Firebase é uma ferramenta de IA que pode gerar esquemas Data Connect com base em uma descrição em linguagem natural do seu app. Essa ferramenta ajuda você a começar muito rápido, principalmente se nunca tiver trabalhado com bancos de dados relacionais.
• Como alternativa, é possível escrever esquemas de banco de dados, consultas e mutações diretamente usando o GraphQL. Comece com a página Projetar esquemas Data Connect e continue para as páginas seguintes para aprender a escrever operações.