Клиентские SDK Firebase Data Connect позволяют вызывать запросы и изменения на стороне сервера непосредственно из приложения Firebase. Пользовательский клиентский SDK создается параллельно с разработкой схем, запросов и изменений, которые вы развертываете в службе Data Connect . Затем вы интегрируете методы из этого SDK в свою клиентскую логику.
Как мы уже упоминали, важно отметить, что запросы и изменения Data Connect не отправляются клиентским кодом и не выполняются на сервере. Вместо этого при развертывании операции Data Connect сохраняются на сервере, как и облачные функции. Это означает, что вам необходимо развернуть соответствующие изменения на стороне клиента, чтобы не нарушать работу существующих пользователей (например, в старых версиях приложения).
Вот почему Data Connect предоставляет вам среду разработки и инструменты, которые позволяют создавать прототипы схем, запросов и мутаций, развернутых на сервере. Он также автоматически генерирует клиентские SDK во время создания прототипа.
После повторного обновления служб и клиентских приложений обновления как на стороне сервера, так и на стороне клиента готовы к развертыванию.
Создайте свой веб-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 чтобы обеспечить выполнение этой одноранговой зависимости.
Настройте пути относительно node_modules
Для веб-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 определяющие схемы, запросы и мутации. Это может быть полезной функцией в рабочих процессах горячей (повторной) загрузки.
.gql , а также автоматически обновлять источники SDK.Альтернативно вы можете использовать CLI для повторного создания SDK при каждом изменении файлов .gql:
firebase dataconnect:sdk:generate --watch
Создание SDK для интеграции и производственных выпусков.
В некоторых сценариях, например при подготовке источников проекта к отправке на CI-тесты, вы можете вызвать интерфейс командной строки Firebase для пакетного обновления.
В этих случаях используйте firebase dataconnect:sdk:generate .
Настройка клиентского кода
Инициализируйте приложение Data Connect
Сначала инициализируйте свое приложение, используя стандартную последовательность Firebase .
initializeApp({...});
Инициализация веб-SDK Data Connect
Инициализируйте экземпляр Data Connect используя информацию, которую вы использовали для настройки Data Connect (все доступно на вкладке Data Connect консоли Firebase ).
Объект ConnectorConfig
Для SDK требуется объект конфигурации соединителя.
Этот объект автоматически создается на основе serviceId и location в dataconnect.yaml , а также connectorId в connector.yaml .
Импортировать библиотеки
Для инициализации клиентского кода необходимы два набора импортов: общий импорт Data Connect и специальный импорт, созданный SDK.
// 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';
Создайте прототип и протестируйте свои веб-клиенты
Инструментизация клиентов для использования локального эмулятора
Вы можете использовать эмулятор Data Connect как из расширения Data Connect VS Code, так и из CLI.
Инструментирование приложения для подключения к эмулятору одинаково для обоих сценариев.
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
Для перехода к производственным ресурсам закомментируйте строки подключения к эмулятору.
Получение экземпляра
Вызов getDataConnect необходим только в том случае, если вы хотите подключиться к эмулятору Data Connect . В противном случае сгенерированный SDK автоматически создаст для вас экземпляр объекта DataConnect .
Использование запросов на стороне клиента
Сгенерированный код уже будет содержать предварительно определенные ссылки на запросы. Все, что вам нужно сделать, это импортировать и вызвать их выполнение.
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`
Использование мутаций на стороне клиента
Мутации доступны так же, как и запросы.
import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@movie-app/movies';
const { data } = await executeMutation(createMovieRef({ movie: 'Empire Strikes Back' }));
Типы данных в веб-SDK
Сервер Data Connect представляет распространенные типы данных GraphQL. В SDK они представлены следующим образом.
| Тип подключения данных | Машинопись |
|---|---|
| Временная метка | нить |
| Дата | нить |
| UUID | нить |
| Int64 | нить |
| Двойной | Число |
| Плавать | Число |
Рекомендации по фреймворкам
Угловой
При генерации кода Angular CLI не учитывает новые изменения из-за кода оптимизации зависимостей. Чтобы это исправить, вам нужно будет изменить angular.json .
"projects": {
"myproject": {
"architect": {
"serve:": {
"prebundle": {
"exclude": ["@movie-app/movies"]
}
}
}
}
}