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

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

Предпосылки

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

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

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

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

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

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