Начните работу с Firebase Data Connect с помощью React

В этом кратком руководстве вы создадите и развернете небольшой пример базы данных и получите к ней доступ из интерфейса React.

Предпосылки

Для выполнения этого краткого руководства вам понадобится следующее:

  • Среда Node.js с NPM.
  • Аккаунт Google.

Учебное пособие

Учебное пособие

1. Создайте новый проект Firebase

Начните с создания нового проекта Firebase в консоли Firebase . Затем обновите проект до тарифного плана Blaze.

2. Инициализируйте свой проект

Создайте новый каталог и инициализируйте в нём проект Firebase. При появлении запроса выберите следующие варианты:

  • Выберите проект, созданный на предыдущем шаге.
  • Не создавайте схему с помощью Gemini (в этом уроке вы будете использовать готовый пример схемы).
  • Создайте новый экземпляр Cloud SQL.
  • Создайте шаблон React.
npx -y firebase-tools@latest login --reauth
npx -y firebase-tools@latest init dataconnect

3. Ознакомьтесь с примерами определений GraphQL.

В Data Connect все схемы и операции базы данных определяются с помощью GraphQL. При инициализации проекта Firebase CLI создал несколько примеров определений, которые помогут вам начать работу.

 dataconnect/schema/schema.gql (отрывок)
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 (выдержка) 
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

4. Разверните свои схемы и операции

Всякий раз, когда вы вносите изменения в схемы, запросы или мутации базы данных, вы должны развернуть их, чтобы ваши изменения вступили в силу в базе данных. 

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

5. Заполните базу данных образцами данных.

Эти начальные данные дадут вам основу для тестирования примера приложения. Обратите внимание, что на этом этапе вы запускаете произвольный код GraphQL, что разрешено для административных задач. 

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

6. Создайте клиентский JavaScript SDK

Эта команда использует ваши определения GraphQL для создания JavaScript-библиотеки, специально предназначенной для вашей базы данных, включая определения типов. Эта библиотека используется в клиентском приложении для выполнения всех операций с базой данных.

Вы можете создавать библиотеки для нескольких платформ, включая Kotlin для Android, Swift для iOS и Flutter, добавляя определения в connector.yaml . 

npx -y firebase-tools@latest \
    dataconnect:sdk:generate
Автоматически сгенерированный React SDK (отрывок) 
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. Настройте веб-приложение

Выполните эти команды, чтобы добавить новое веб-приложение в ваш проект 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. Напишите пример клиента React

Замените содержимое web-app/src/App.jsx этим простым приложением React.

Обратите внимание, что приложение выполняет необходимый доступ к базе данных, используя функцию из сгенерированного SDK. Сгенерированный SDK для React использует TanStack Query для управления состоянием. 

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. Попробуйте веб-приложение

Запустите сервер разработки, чтобы увидеть пример приложения в действии. 

npm run dev

Следующие шаги

Попробуйте расширение Visual Studio Code

При разработке с помощью Data Connect мы настоятельно рекомендуем использовать расширение Visual Studio Code . Даже если вы не используете Visual Studio Code в качестве основной среды разработки, это расширение предоставляет ряд функций, которые делают разработку схем и операций более удобной:

  • Сервер языка GraphQL, обеспечивающий проверку синтаксиса и предложения автодополнения, специфичные для Data Connect
  • Кнопки CodeLens в соответствии с вашим кодом, которые позволяют вам считывать и записывать данные из файлов определения схемы, а также выполнять запросы и мутации из определений ваших операций.
  • Автоматически синхронизируйте сгенерированные вами SDK с определениями GraphQL.
  • Упрощенная настройка локального эмулятора.
  • Упрощенное развертывание в производстве.

Используйте эмулятор Data Connect для локальной разработки

Хотя в этом руководстве показано, как развернуть схемы и операции Data Connect непосредственно в рабочей среде, вам, вероятно, не захочется вносить изменения в рабочую базу данных во время активной разработки приложения. Вместо этого настройте эмулятор Data Connect и выполняйте разработку на нём, а не в рабочей среде. Эмулятор создаёт локальный экземпляр PGlite, который ведёт себя аналогично работающему экземпляру Postgres в CloudSQL.

Узнайте, как писать схемы и операции для вашего приложения.

При разработке приложений с использованием Data Connect проектирование схем и операций является одной из первых и наиболее важных задач разработки, которые вам предстоит выполнить.

  • Gemini в консоли Firebase — это инструмент искусственного интеллекта, который может генерировать схемы Data Connect на основе описания вашего приложения на естественном языке. Этот инструмент поможет вам быстро начать работу, особенно если вы никогда раньше не работали с реляционными базами данных.
  • Кроме того, вы можете писать схемы баз данных, запросы и мутации непосредственно с помощью GraphQL. Начните со страницы «Проектирование схем Data Connect и перейдите на следующие страницы, чтобы узнать, как писать операции.