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

Samouczek

1. Tworzenie nowego projektu Firebase

Zacznij od utworzenia nowego projektu Firebase w Firebase konsoli. Następnie przenieś projekt na abonament Blaze.

2. Zainicjuj projekt

Utwórz nowy katalog i zainicjuj w nim projekt Firebase. Po wyświetleniu pytania wybierz te opcje:

  • Wybierz projekt utworzony w poprzednim kroku.
  • Nie twórz schematu za pomocą Gemini (w tym samouczku użyjesz gotowego przykładowego schematu).
  • Utwórz nową instancję Cloud SQL.
  • Utwórz szablon React.
 
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

3. Sprawdź przykładowe definicje GraphQL

W Data Connect definiujesz wszystkie schematy i operacje bazy danych za pomocą GraphQL. Podczas inicjowania projektu interfejs Firebase CLI utworzył kilka przykładowych definicji, które pomogą Ci zacząć.

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

4. Wdrażanie schematów i operacji

Za każdym razem, gdy wprowadzasz zmiany w schematach bazy danych, zapytaniach lub mutacjach, musisz je wdrożyć, aby zmiany zostały zastosowane w bazie danych.

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

5. Wypełnianie bazy danych przykładowymi danymi

Te dane początkowe pozwolą Ci sprawdzić przykładową aplikację. Pamiętaj, że na tym etapie wykonujesz dowolny kod GraphQL, co jest dozwolone w przypadku zadań administracyjnych.

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

6. Generowanie pakietu SDK klienta JavaScript

To polecenie wykorzystuje definicje GraphQL do wygenerowania biblioteki JavaScript specjalnie dla Twojej bazy danych, wraz z definicjami typów. Używasz tej biblioteki w aplikacji klienckiej do wykonywania wszystkich operacji na bazie danych.

Możesz wygenerować biblioteki dla wielu platform, w tym Kotlin na Androida, Swift na iOS i Flutter, dodając definicje do pliku connector.yaml.

 
npx -y firebase-tools@latest \
    dataconnect:sdk:generate
 Automatycznie wygenerowany pakiet SDK React (fragment) 
export interface ListMoviesData {
  movies: ({
    id: UUIDString;
    title: string;
    imageUrl: string;
    genre?: string | null;
  } & Movie_Key)[];
}

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

7. Konfigurowanie aplikacji internetowej

Uruchom te polecenia, aby dodać nową aplikację internetową do projektu 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 ; cd ..

8. Tworzenie przykładowego klienta React

Zastąp zawartość pliku web-app/src/App.jsx tą prostą aplikacją React.

Zwróć uwagę, że aplikacja uzyskuje dostęp do bazy danych za pomocą funkcji z wygenerowanego pakietu SDK. Wygenerowany pakiet SDK dla Reacta używa biblioteki TanStack Query do zarządzania stanem.

 
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;

9. Wypróbuj aplikację internetową

Uruchom serwer programistyczny, aby zobaczyć działanie przykładowej aplikacji.

 
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.