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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

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

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

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

Каков рабочий процесс развития клиента?

Если вы следовали инструкциям «Начало работы» , вы познакомились с общим процессом разработки Data Connect . В этом руководстве вы найдете более подробную информацию о создании веб-SDK на основе вашей схемы и работе с клиентскими запросами и мутациями.

Подводя итог, чтобы использовать созданные веб-SDK в своих клиентских приложениях, вам необходимо выполнить следующие необходимые шаги:

1. Добавьте Firebase в свое веб- приложение.

Затем:

1. Разработайте схему вашего приложения.
2. Инициализируйте свой клиентский код с помощью JavaScript SDK или библиотек React или Angular .
3. Для React и Angular установите пакеты Tanstack Query.

4. Настройте генерацию SDK:

   • С помощью кнопки «Добавить SDK в приложение» в нашем расширении Data Connect VS Code.
   • Обновив файл connector.yaml для JavaScript SDK , React или Angular .

5. Импортируйте библиотеки и сгенерированный код с помощью JavaScript SDK , React или Angular .

6. Реализуйте вызовы запросов и мутации с помощью JavaScript SDK , React или Angular .

7. Протестируйте, настроив эмулятор Data Connect с помощью JavaScript SDK , React или Angular .

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

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

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

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

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

initializeApp({...});

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

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

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

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

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 и Angular

Firebase Data Connect предоставляет сгенерированный SDK с перехватчиками для React и Angular с использованием библиотек 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

ng add @angular/fire

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

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

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

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

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

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

Для инициализации вашего клиентского кода React или Angular необходимо выполнить четыре набора импортов: общий импорт 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";

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

// TanStack Query-related functions
import { provideTanStackQuery, QueryClient } from "@tanstack/angular-query-experimental";

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

// generated React hooks from SDK
import { injectListAllMovies, injectCreateMovie } from "@myorg/connector/angular";

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

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

В следующем фрагменте обратите внимание на метод useListAllMovies с префиксом use для React и метод injectListAllMovies с префиксом inject для Angular, оба из сгенерированного SDK.

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>
}

import { injectAllMovies, connectorConfig } from '@movies-app/movies/angular';
import { provideDataConnect, getDataConnect } from '@angular/fire/data-connect';
import { provideTanStackQuery, QueryClient } from "@tanstack/angular-query-experimental";
const queryClient = new QueryClient();
...
providers: [
  ...
  provideTanStackQuery(queryClient),
  provideDataConnect(() => {
    const dc = getDataConnect(connectorConfig);
    return dc;
  })
]

Используйте запросы автоматической перезагрузки с React и Angular

Вы можете настроить запросы на автоматическую перезагрузку при изменении данных.

export class MovieListComponent {
  movies = useListAllMovies();
}

export class AddPostComponent {
  const mutation = useCreateMovie({ invalidate: [listAllMoviesRef()] });
  addMovie() {
    // The following will automatically cause Tanstack to reload its listAllMovies query
    mutation.mutate({ title: 'The Matrix });
  }
}

// class
export class MovieListComponent {
  movies = injectListAllMovies();
}

// template
@if (movies.isPending()) {
    Loading...
}
@if (movies.error()) {
    An error has occurred: {{  movies.error() }}
}
@if (movies.data(); as data) {
    @for (movie of data.movies; track movie.id) {
    <mat-card appearance="outlined">
        <mat-card-content>{{movie.description}}</mat-card-content>
    </mat-card>
    } @empty {
        <h2>No items!</h2>
    }
}

Подключитесь к эмулятору 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);

class AppComponent() {
  ...
  const { isLoading, data, error } = useListAllMovies(dc);
  ...
}

// app.config.ts
import { provideDataConnect } from '@angular/fire/data-connect';
import { getDataConnect, connectDataConnectEmulator } from 'firebase/data-connect';
provideDataConnect(() => {
  const dc = getDataConnect(connectorConfig);
  connectDataConnectEmulator(dc, 'localhost', 9399);
  return dc;
}),

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

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

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

Особые соображения по созданию 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 , определяющие схемы, запросы и мутации. Это может быть полезной функцией в рабочих процессах горячей (повторной) загрузки.

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

firebase dataconnect:sdk:generate --watch

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

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

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