Используйте сгенерированные веб-SDK.

Клиентские SDK Firebase Data Connect позволяют вызывать запросы и изменения на стороне сервера непосредственно из приложения Firebase. Пользовательский клиентский SDK создается параллельно с разработкой схем, запросов и мутаций, которые вы развертываете в службе Data Connect . Затем вы интегрируете методы из этого SDK в свою клиентскую логику.

Как мы уже упоминали, важно отметить, что запросы и изменения Data Connect не отправляются клиентским кодом и не выполняются на сервере. Вместо этого при развертывании операции Data Connect сохраняются на сервере, как и облачные функции. Это означает, что вам необходимо развернуть соответствующие изменения на стороне клиента, чтобы не нарушать работу существующих пользователей (например, в старых версиях приложения).

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

После повторного обновления служб и клиентских приложений обновления как на стороне сервера, так и на стороне клиента готовы к развертыванию.

Реализуйте клиентский код с помощью Firebase JavaScript SDK.

В этом разделе описано, как реализовать клиенты с помощью Firebase JavaScript SDK.

Если вы используете React, см. альтернативные инструкции по настройке и ссылки на дополнительную документацию о создании React SDK для Data Connect .

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

Сначала инициализируйте свое приложение, используя стандартную последовательность Firebase .

initializeApp({...});

Создайте свой JavaScript SDK

Как и в большинстве проектов Firebase, работа над клиентским кодом Firebase Data Connect происходит в локальном каталоге проекта. И расширение Data Connect VS Code, и интерфейс командной строки Firebase являются важными локальными инструментами для создания клиентского кода и управления им.

Параметры создания SDK привязаны к нескольким записям в файле dataconnect.yaml , созданном при инициализации проекта.

Инициализировать создание SDK

В ваш connector.yaml добавьте свой outputDir , package и (для веб-SDK) packageJsonDir . 
generate:
  javascriptSdk:
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

outputDir указывает, куда должен выводиться сгенерированный SDK.

package указывает имя пакета.

packageJsonDir указывает, куда установить пакет.

В этом случае установите firebase@latest чтобы обеспечить выполнение этой одноранговой зависимости.

Инициализируйте JavaScript SDK

Инициализируйте экземпляр Data Connect используя информацию, которую вы использовали для настройки Data Connect (все доступно на вкладке Data Connect консоли Firebase ).

Объект ConnectorConfig

Для SDK требуется объект конфигурации соединителя.

Этот объект автоматически создается на основе serviceId и location в dataconnect.yaml , а также connectorId в connector.yaml .

Импортировать библиотеки

Для инициализации клиентского кода необходимо два набора импортов: общий импорт Data Connect и специальный импорт, созданный SDK.

Обратите внимание на объект ConnectorConfig включенный в общий импорт.

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// generated queries and mutations from SDK
import { listMovies, ListMoviesResponse, createMovie, connectorConfig } from '@myorg/myconnector';

Используйте запросы из JavaScript SDK.

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

import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@movie-app/movies';

const ref = listMoviesRef();
const { data } = await executeQuery(ref);
console.log(data.movies);

Вызов методов запроса SDK

Вот пример использования этих функций быстрого доступа к действиям:

import { listMovies } from '@movie-app/movies';
function onBtnClick() {
// This will call the generated JS from the CLI and then make an HTTP request out // to the server.
listMovies().then(data => showInUI(data)); // == executeQuery(listMoviesRef);
}

Подписаться на изменения

Вы можете подписаться на изменения (которые будут обновляться каждый раз при выполнении запроса).

const listRef = listAllMoviesRef();

// subscribe will immediately invoke the query if no execute was called on it previously.
subscribe(listRef, ({ data }) => {
 updateUIWithMovies(data.movies);
});

await createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi", rating: 5 });\
await listMovies(); // will update the subscription above`

Используйте мутации из JavaScript SDK.

Мутации доступны так же, как и запросы.

import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@movie-app/movies';

const { data } = await executeMutation(createMovieRef({ movie: 'Empire Strikes Back' }));

Подключитесь к эмулятору Data Connect

При желании вы можете подключиться к эмулятору, вызвав connectDataConnectEmulator и затем передав экземпляр Data Connect , например:

import { connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@myorg/myconnector'; // Replace with your package name

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);`

// Make calls from your app

Для перехода к производственным ресурсам закомментируйте строки подключения к эмулятору.

Реализация клиентского кода для React

Firebase Data Connect предоставляет сгенерированный SDK с перехватчиками для React с использованием библиотеки TanStack Query Firebase , доступной у наших партнеров в Invertase.

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

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

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

initializeApp({...});

Установите пакеты TanStack Query Firebase

установите пакеты для TanStack Query в свой проект. 

npm i --save @tanstack/react-query @tanstack-query-firebase/react
npm i --save firebase@latest # Note: React has a peer dependency on ^11.3.0

Создайте свой React SDK

Как и в случае со стандартным веб-SDK, как описано ранее , инструменты Firebase автоматически создают SDK на основе вашей схемы и операций.

Чтобы создать React SDK для вашего проекта, добавьте ключ react в файл конфигурации connector.yaml . 

generate:
  javascriptSdk:
    react: true
    outputDir: "../movies-generated"
    package: "@movie-app/movies"
    packageJsonDir: "../../"

Импортировать библиотеки

Для инициализации клиентского кода React необходимо четыре набора импортов: общий импорт Data Connect , общий импорт TanStack и специальный импорт для ваших SDK, созданных JS и React.

Обратите внимание на тип ConnectorConfig включенный в общий импорт. 

// general imports
import { ConnectorConfig, DataConnect, getDataConnect, QueryRef, MutationRef, QueryPromise, MutationPromise } from 'firebase/data-connect';

// TanStack Query-related functions
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// generated queries and mutations from SDK
import { ListMoviesResponse, connectorConfig } from '@myorg/myconnector';

// generated React hooks from SDK
import { useListAllMovies, useCreateMovie } from "@myorg/connector/react";

Используйте запросы и мутации в своем клиенте React.

После завершения установки вы можете использовать методы из созданного React SDK.

В следующем фрагменте обратите внимание на метод useListAllMovies с префиксом use из сгенерированного React SDK. Все подобные операции use в сгенерированном SDK, как запросы, так и мутации, вызывают привязки TanStack Query:

import { useListAllMovies } from '@movies-app/movies/react';

function MyComponent() {
  const { isLoading, data, error } = useListAllMovies();
  if(isLoading) {
    return <div>Loading...</div>
  }
  if(error) {
    return <div> An Error Occurred: {error} </div>
  }
}

// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import MyComponent from './my-component';

function App() {
   const queryClient = new QueryClient();
   return <QueryClientProvider client={queryClient}>
     <MyComponent />
   </QueryClientProvider>
}

Подключитесь к эмулятору Data Connect

При желании вы можете подключиться к эмулятору, вызвав connectDataConnectEmulator , а затем передав экземпляр Data Connect в сгенерированный хук, например: 

import { getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
import { connectorConfig } from '@movies-app/movies';
import { useListAllMovies } from '@movies-app/movies/react';

const dc = getDataConnect(connectorConfig);
connectDataConnectEmulator(dc, 'localhost', 9399);

function App() {
  ...
  const { isLoading, data, error } = useListAllMovies(dc);
  ...
}

Для перехода к производственным ресурсам закомментируйте строки подключения к эмулятору.

Типы данных в SDK

Сервер Data Connect представляет распространенные типы данных GraphQL. В SDK они представлены следующим образом.

Тип подключения данных Машинопись
Временная метка нить
Дата нить
UUID нить
Int64 нить
Двойной Число
Плавать Число

Особые соображения по созданию SDK

Настройте пути относительно node_modules

Для JavaScript SDK, поскольку Data Connect использует npm link для установки вашего SDK, созданный вами SDK необходимо вывести в каталог на том же уровне, что и ваш путь node_modules , или в дочерний каталог, который имеет доступ к node_modules .

Другими словами, для правильной работы ваш сгенерированный SDK должен иметь доступ к узлу firebase .

Например, если у вас есть node_modules в my-app/ , то ваш выходной каталог должен быть my-app/js-email-generated , чтобы js-email-generated мог импортировать из своей родительской папки node_modules . 

my-app/
  dataconnect/
    connector/
        connector.yaml
  node_modules/
    firebase/
  js-email-generated/

// connector.yaml
connectorId: "my-connector"
generate:
  javascriptSdk:
    outputDir: "../../js-email-generated"
    package: "@myapp/my-connector"

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

my-monorepo/
  dataconnect/
    connector/
        connector.yaml
  node_modules/
    firebase/
  my-app/
    js-email-generated/
  package.json

// connector.yaml
connectorId: "my-connector"
generate:
  javascriptSdk:
    outputDir: "../../my-app/js-email-generated" # You can also output to ../../js-email-generated

Обновляйте SDK во время прототипирования

Если вы создаете прототипы в интерактивном режиме с помощью расширения Data Connect VS Code и его эмулятора Data Connect , исходные файлы SDK автоматически генерируются и обновляются, пока вы изменяете файлы .gql определяющие схемы, запросы и мутации. Это может быть полезной функцией в рабочих процессах горячей (повторной) загрузки.

В других сценариях, если вы используете эмулятор Data Connect из интерфейса командной строки Firebase , вы можете настроить наблюдение за обновлениями .gql , а также автоматически обновлять источники SDK.

Альтернативно вы можете использовать CLI для повторного создания SDK при каждом изменении файлов .gql: 

firebase dataconnect:sdk:generate --watch

Создание SDK для интеграции и производственных выпусков.

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

В этих случаях используйте firebase dataconnect:sdk:generate .

Другие соображения по поводу фреймворков

Угловой

При генерации кода Angular CLI не реагирует на новые изменения из-за кода оптимизации зависимостей. Чтобы это исправить, вам нужно будет изменить angular.json . 

  "projects": {
    "myproject": {
      "architect": {
        "serve:": {
          "prebundle": {
            "exclude": ["@movie-app/movies"]
          }
        }
      }
    }
  }