Wprowadzenie do Firebase SQL Connect z użyciem Reacta

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

Wymagania wstępne

Aby ukończyć to krótkie wprowadzenie, potrzebujesz:

  • środowiska Node.js z NPM,
  • konta Google.

Samouczek

Samouczek

1. Zainicjuj projekt

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

  • Utwórz nowy projekt w Firebase.
  • 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.
 
mkdir myproj ; cd myproj
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

2. Sprawdź przykładowe definicje GraphQL

W SQL Connect wszystkie schematy i operacje bazy danych definiujesz za pomocą GraphQL. Gdy zainicjujesz projekt, 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
  }
}

3. Wdróż schematy i operacje

Za każdym razem, gdy wprowadzisz zmiany w schematach bazy danych, zapytaniach lub mutacjach, musisz wdrożyć je, aby zmiany zaczęły obowiązywać w bazie danych.

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

4. Wypełnij bazę danych przykładowymi danymi

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

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

5. Wygeneruj pakiet JavaScript SDK klienta

To polecenie używa definicji 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.

Dodając definicje do connector.yaml, możesz generować biblioteki dla wielu platform, w tym Kotlin na Androida, Swift na iOS i Flutter.

 
npx -y firebase-tools@latest dataconnect:sdk:generate
 Automatycznie wygenerowany pakiet React SDK (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>;

6. Skonfiguruj aplikację internetową

Uruchom te polecenia, aby dodać nową aplikację internetową do projektu w 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. Napisz przykładowego klienta React

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

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

 
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. Wypróbuj aplikację internetową

Uruchom serwer deweloperski, aby zobaczyć przykładową aplikację w działaniu.

 
npm run dev

Dalsze kroki

Wypróbuj rozszerzenie SQL Connect dla VS Code

Podczas programowania z użyciem SQL Connect zdecydowanie zalecamy korzystanie z rozszerzenia SQL Connect dla VS Code. Nawet jeśli nie używasz Visual Studio Code jako głównego środowiska programistycznego 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 SQL Connect
  • przyciski CodeLens w wierszu kodu, które umożliwiają odczytywanie i zapisywanie danych z plików definicji schematu definicji operacji;
  • automatyczne synchronizowanie wygenerowanych pakietów SDK z definicjami GraphQL;
  • uproszczona konfiguracja emulatora lokalnego;
  • uproszczone wdrażanie w środowisku produkcyjnym.

Używaj emulatora SQL Connect do programowania lokalnego

W tym samouczku pokazaliśmy, jak wdrożyć SQL Connect schematy i operacje bezpośrednio w środowisku produkcyjnym, ale prawdopodobnie nie będziesz chcieć wprowadzać zmian w bazie danych do użytku produkcyjnego podczas aktywnego programowania aplikacji. Zamiast tego skonfiguruj SQL Connect emulator i programuj w nim, a nie w środowisku produkcyjnym. Emulator konfiguruje lokalną instancję PGlite, która działa podobnie jak instancja PostgreSQL na Cloud SQL.

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

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

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

Dowiedz się, jak otrzymywać aktualizacje w czasie rzeczywistym z SQL Connect

Za pomocą SQL Connect możesz pisać aplikacje klienckie, które reagują na zmiany danych w czasie rzeczywistym. Zobacz Otrzymywanie aktualizacji w czasie rzeczywistym z SQL Connect.