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

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

Предварительные требования

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

• Среда разработки Node.js с использованием NPM.
• Аккаунт Google.

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

mkdir myproj ; cd myproj
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 \
            @tanstack/react-query \
            @tanstack-query-firebase/react

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

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

Попробуйте расширение Data Connect для VS Code.

При разработке с использованием Data Connect мы настоятельно рекомендуем использовать расширение Data Connect для VS 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 и перейдите к следующим страницам, чтобы узнать, как писать операции.