Los SDK de cliente de Firebase Data Connect te permiten llamar a tus consultas y mutaciones del servidor directamente desde una app de Firebase. Generas un SDK cliente personalizado en paralelo a medida que diseñas los esquemas, las consultas y las mutaciones que implementas en tu servicio de Data Connect. Luego, integras los métodos de este SDK en tu lógica de cliente.
Como mencionamos en otro lugar, es importante tener en cuenta que el código del cliente no envía consultas ni mutaciones de Data Connect, sino que se ejecutan en el servidor. En cambio, cuando se implementan, las operaciones de Data Connect se almacenan en el servidor como Cloud Functions. Esto significa que debes implementar los cambios correspondientes del cliente para evitar que se produzcan errores en los usuarios existentes (por ejemplo, en versiones anteriores de la app).
Es por eso que Data Connect te proporciona un entorno de desarrollador y herramientas que te permiten crear prototipos de tus esquemas, consultas y mutaciones implementados en el servidor. También genera SDKs del cliente automáticamente mientras creas prototipos.
Cuando hayas iterado las actualizaciones de tu servicio y tus apps cliente, las actualizaciones del servidor y del cliente estarán listas para implementarse.
Genera tu SDK web
Al igual que con la mayoría de los proyectos de Firebase, el trabajo en el código de cliente Firebase Data Connect se realiza en un directorio de proyecto local. La extensión de Data Connect VS Code y la CLI de Firebase son herramientas locales importantes para generar y administrar el código del cliente.
Las opciones de generación de SDKs se vinculan a varias entradas del archivo dataconnect.yaml que se generó cuando inicializaste tu proyecto.
Inicializa la generación de SDK
En tuconnector.yaml, agrega outputDir, package y packageJsonDir (para el SDK web).
generate:
javascriptSdk:
outputDir: "../movies-generated"
package: "@movie-app/movies"
packageJsonDir: "../../"
outputDir especifica dónde se debe generar el SDK generado.
package especifica el nombre del paquete.
packageJsonDir especifica dónde instalar el paquete.
En este caso, instala firebase@latest para asegurarte de que se cumpla esta dependencia de pares.
Configura rutas de acceso relacionadas con node_modules
En el caso del SDK web, debido a que Data Connect usa npm link para instalar el SDK, el SDK generado debe enviarse a un directorio en el mismo nivel que la ruta de acceso node_modules o en un directorio secundario que pueda acceder a node_modules.
En otras palabras, el SDK generado debe tener acceso al módulo de nodos firebase para funcionar correctamente.
Por ejemplo, si tienes tu node_modules en my-app/, tu directorio de salida debe ser my-app/js-email-generated para que js-email-generated pueda importar desde su carpeta superior 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"
O bien, si tienes un monorepo en el que tus módulos se alojan en la raíz, puedes colocar el directorio de salida en cualquier carpeta del monorepo.
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
Actualiza los SDKs mientras creas prototipos
Si estás creando prototipos de forma interactiva con la extensión de VS Code de Data Connect
y su emulador de Data Connect, los archivos fuente del SDK se generan y actualizan automáticamente
mientras modificas los archivos .gql que definen esquemas, consultas
y mutaciones. Esta puede ser una función útil en los flujos de trabajo de (re)carga en caliente.
.gql y también hacer que las fuentes de SDK se actualicen automáticamente.
Como alternativa, puedes usar la CLI para regenerar los SDKs cada vez que se modifiquen archivos .gql:
firebase dataconnect:sdk:generate --watchGenera SDKs para la integración y para las versiones de producción
En algunos casos, como cuando preparas las fuentes de un proyecto para enviarlas a pruebas de CI, puedes llamar a la CLI de Firebase para realizar una actualización por lotes.
En estos casos, usa firebase dataconnect:sdk:generate.
Configura el código del cliente
Inicializa tu app de Data Connect
Primero, inicializa tu app con la secuencia estándar de Firebase.
initializeApp({...});
Inicializa el SDK web de Data Connect
Inicializa tu instancia de Data Connect con la información que usaste para configurar Data Connect (todo está disponible en la pestaña Data Connect de la consola de Firebase).
El objeto ConnectorConfig
El SDK requiere un objeto de configuración del conector.
Este objeto se genera automáticamente a partir de serviceId y location en dataconnect.yaml, y connectorId en connector.yaml.
Importa las bibliotecas
Hay dos conjuntos de importaciones necesarias para inicializar tu código cliente: las importaciones generales de Data Connect y las importaciones específicas y generadas del 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';
Crea prototipos y prueba tus clientes web
Instrumenta clientes para usar un emulador local
Puedes usar el emulador de Data Connect, ya sea desde la extensión de VS Code de Data Connect o desde la CLI.
La instrumentación de la app para que se conecte al emulador es la misma en ambas situaciones.
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
Si quieres cambiar a recursos de producción, comenta las líneas para conectarte al emulador.
Cómo obtener una instancia
Solo es necesario llamar a getDataConnect si quieres conectarte al emulador de Data Connect.
De lo contrario, el SDK generado creará automáticamente una instancia del objeto DataConnect por ti.
Usa consultas en el lado del cliente
El código generado ya tendrá referencias de consulta predefinidas. Solo debes importarlos y llamar a execute en ellos.
import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@movie-app/movies';
const ref = listMoviesRef();
const { data } = await executeQuery(ref);
console.log(data.movies);
Llama a métodos de consulta del SDK
Este es un ejemplo en el que se usan estas funciones de acceso directo a la acción:
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);
}
Suscribirse a los cambios
Puedes suscribirte a los cambios (que se actualizarán cada vez que ejecutes una consulta).
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`
Cómo usar mutaciones en el cliente
Se puede acceder a las mutaciones de la misma manera que a las consultas.
import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@movie-app/movies';
const { data } = await executeMutation(createMovieRef({ movie: 'Empire Strikes Back' }));
Tipos de datos en el SDK web
El servidor Data Connect representa tipos de datos comunes de GraphQL. Estos se representan en el SDK de la siguiente manera.
| Tipo de conexión de datos | TypeScript |
|---|---|
| Marca de tiempo | string |
| Fecha | string |
| UUID | string |
| Int64 | string |
| Doble | Número |
| Número de punto flotante | Número |
Consideraciones de los frameworks
Angular
Cuando se genera código, Angular CLI no detectará los cambios nuevos debido a su código de optimización de dependencias. Para solucionar este problema, deberás modificar tu angular.json.
"projects": {
"myproject": {
"architect": {
"serve:": {
"prebundle": {
"exclude": ["@movie-app/movies"]
}
}
}
}
}