Pierwsze kroki z Firebase Data Connect w React

W tym krótkim wprowadzeniu utworzysz i wdrożysz małą przykładową bazę danych oraz uzyskasz do niej dostęp z poziomu frontendu React.

Wymagania wstępne

Aby ukończyć ten samouczek, potrzebujesz:

• Środowisko Node.js z NPM.
• konto Google,

Samouczek

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

Dalsze kroki

Wypróbuj rozszerzenie Visual Studio Code

Podczas tworzenia aplikacji za pomocą Data Connect zdecydowanie zalecamy korzystanie z rozszerzenia Visual Studio Code. Nawet jeśli nie używasz Visual Studio Code jako głównego środowiska programistycznego, to rozszerzenie udostępnia kilka funkcji, które ułatwiają tworzenie schematów i operacji:

• Serwer języka GraphQL, który zapewnia sprawdzanie składni i sugestie autouzupełniania specyficzne dla Data Connect.
• Przyciski CodeLens w linii kodu, które umożliwiają odczytywanie i zapisywanie danych z plików definicji schematu oraz wykonywanie zapytań i mutacji z definicji operacji.
• Automatycznie synchronizuj wygenerowane pakiety SDK z definicjami GraphQL.
• Uproszczona konfiguracja lokalnego emulatora.
• Uproszczone wdrażanie w środowisku produkcyjnym.

Korzystanie z Data Connect emulatora na potrzeby lokalnego programowania

W tym samouczku pokazaliśmy, jak wdrażać schematy i operacje Data Connect bezpośrednio w środowisku produkcyjnym, ale prawdopodobnie nie będziesz chcieć wprowadzać zmian w produkcyjnej bazie danych podczas aktywnego tworzenia aplikacji. Zamiast tego skonfiguruj Data Connect emulator i pracuj nad nim, a nie nad środowiskiem produkcyjnym. Emulator konfiguruje lokalną instancję PGlite, która działa podobnie do aktywnej instancji Postgres w Cloud SQL.

Dowiedz się, jak pisać schematy i operacje dla aplikacji

Podczas tworzenia aplikacji za pomocą Data Connect projektowanie schematów i operacji jest jednym z pierwszych i najważniejszych zadań.

• Gemini w konsoli Firebase to narzędzie AI, które może generować Data Connect schematy na podstawie opisu aplikacji w języku naturalnym. To narzędzie może Ci bardzo szybko pomóc, zwłaszcza jeśli nigdy wcześniej nie pracowałeś(-aś) z relacyjnymi bazami danych.
• Możesz też pisać schematy baz danych, zapytania i mutacje bezpośrednio za pomocą GraphQL. Zacznij od strony Projektowanie schematów Data Connect i przejdź do kolejnych stron, aby dowiedzieć się, jak pisać operacje.