Começar a usar o Firebase SQL 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 em 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

Tutorial

1. Inicializar seu projeto

Crie um novo diretório e inicialize um projeto do Firebase nele. Quando solicitado, escolha as seguintes opções:

  • Criar um novo projeto do Firebase.
  • Não criar um esquema com o Gemini (neste tutorial, você vai usar um esquema de exemplo pré-criado ).
  • Criar uma nova instância do Cloud SQL.
  • Criar um modelo do React.
 
mkdir myproj ; cd myproj
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

2. Analisar as definições de exemplo do GraphQL

No SQL Connect, você define todos os esquemas e operações do banco de dados usando o GraphQL. Ao inicializar o projeto, a Firebase CLI criou algumas definições de exemplo para você começar.

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

3. Implantar seus esquemas e operações

Sempre que você fizer mudanças nos esquemas, consultas ou mutações do banco de dados, será necessário implantá-los para que as mudanças entrem em vigor no banco de dados.

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

4. Preencher o banco de dados com dados de amostra

Esses dados de inicialização vão fornecer algo para você analisar ao testar o app de exemplo. Observe que, nesta etapa, você está executando um GraphQL arbitrário, que é permitido para tarefas administrativas.

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

5. Gerar um SDK do cliente JavaScript

Esse comando usa as definições do GraphQL para gerar uma biblioteca JavaScript especificamente para seu banco de dados, com definições de tipo. Você usa essa biblioteca no app cliente para realizar todas as operações do banco de dados.

É possível gerar bibliotecas para várias plataformas, incluindo Kotlin para Android, Swift para iOS e Flutter, adicionando definições ao connector.yaml.

 
npx -y firebase-tools@latest dataconnect:sdk:generate
 SDK do React gerado automaticamente (trecho) 
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. Configurar um app da Web

Execute esses comandos para adicionar um novo app da Web ao seu projeto do 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. Escrever um cliente de exemplo do React

Substitua o conteúdo de web-app/src/App.jsx por este app simples do React app.

Observe que o app conclui o acesso necessário ao banco de dados usando uma função do SDK gerado. O SDK gerado para o React usa o TanStack Query para processar o gerenciamento de 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. Testar o app da Web

Inicie o servidor de desenvolvimento para conferir o app de exemplo em ação.

 
npm run dev

Próximas etapas

Testar a extensão do SQL Connect para VS Code

Ao desenvolver com SQL Connect, recomendamos o uso da extensão do SQL Connect para VS 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 do SQL Connect
  • Botões do CodeLens em linha com o 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 os SDKs gerados sincronizados automaticamente com as definições do GraphQL.
  • Configuração simplificada do emulador local.
  • Implantação simplificada na produção.

Usar o SQL Connect emulador para desenvolvimento local

Embora este tutorial tenha mostrado como implantar SQL Connect esquemas e operações 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 SQL Connect emulador e faça o trabalho de desenvolvimento nele em vez da 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.

Aprenda a escrever esquemas e operações para seu app

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