Gli SDK client di Firebase Data Connect ti consentono di chiamare le query e le mutazioni lato server direttamente da un'app Firebase. Generi un SDK client personalizzato in parallelo durante la progettazione degli schemi, delle query e delle mutazioni da eseguire nel servizio Data Connect. Poi, integra i metodi di questo SDK nella logica del client.
Come accennato altrove, è importante notare che le query e le mutazioni Data Connect non vengono inviate dal codice client ed eseguite sul server. Al contrario, quando vengono di cui è stato eseguito il deployment, le operazioni Data Connect vengono memorizzate sul server come Cloud Functions. Ciò significa che devi eseguire il deployment delle modifiche lato client corrispondenti per evitare di danneggiare gli utenti esistenti (ad esempio, nelle versioni meno recenti delle app).
Per questo motivo, Data Connect fornisce un ambiente di sviluppo e strumenti che ti consentono di realizzare il prototipo di schemi, query e mutazioni di cui è stato eseguito il deployment sul server. Inoltre, genera automaticamente gli SDK lato client durante la creazione del prototipo.
Dopo aver eseguito l'iterazione degli aggiornamenti alle app di servizio e client, gli aggiornamenti lato server e lato client sono pronti per il deployment.
Generare l'SDK web
Come per la maggior parte dei progetti Firebase, il codice clientFirebase Data Connect viene modificato in una directory del progetto locale. Sia l'estensione Data Connect VS Code sia l'interfaccia a riga di comando Firebase sono strumenti locali importanti per la generazione e la gestione del codice client.
Le opzioni di generazione dell'SDK sono associate a diverse voci nel file dataconnect.yaml
generato durante l'inizializzazione del progetto.
Inizializza la generazione dell'SDK
Inconnector.yaml
, aggiungi outputDir
, package
e (per l'SDK web)packageJsonDir
.
generate:
javascriptSdk:
outputDir: "../movies-generated"
package: "@movie-app/movies"
packageJsonDir: "../../"
outputDir
specifica dove deve essere generato l'SDK.
package
specifica il nome del pacchetto.
packageJsonDir
specifica dove installare il pacchetto.
In questo caso, installa firebase@latest
per assicurarti che questa dipendenza peer sia soddisfatta.
Configura i percorsi relativi a node_modules
Per l'SDK web, poiché Data Connect utilizza npm link
per installare l'SDK, l'SDK generato deve essere in output in una directory allo stesso livello del percorso node_modules
o in una directory secondaria che può accedere a node_modules
.
In altre parole, l'SDK generato deve avere accesso al modulo node firebase
per funzionare correttamente.
Ad esempio, se il tuo node_modules
è in my-app/
, la directory di output dovrebbe essere my-app/js-email-generated
per consentire a js-email-generated
di eseguire l'importazione dalla relativa cartella node_modules
principale.
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"
Oppure, se hai un monorepo in cui i moduli sono ospitati nella radice, puoi posizionare la directory di output in qualsiasi cartella 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
Aggiornare gli SDK durante la prototipazione
Se stai creando una prototipazione in modo interattivo con l'estensione VS Code di Data Connect e il relativo emulatore Data Connect, i file di codice sorgente dell'SDK vengono generati e aggiornati automaticamente mentre modifichi i file Data Connect che definiscono schemi, query e mutazioni. Questa può essere una funzionalità utile nei flussi di lavoro di (ri)caricamento a caldo.
In altri scenari, se utilizzi l'emulatore Data Connect dall'interfaccia a riga di comando Firebase, puoi impostare una sorveglianza sugli aggiornamenti di.gql
e anche aggiornare automaticamente le sorgenti SDK.
In alternativa, puoi utilizzare la CLI per rigenerare gli SDK ogni volta che i file .gql vengono modificati:
firebase dataconnect:sdk:generate --watch
Genera SDK per l'integrazione e per le release di produzione
In alcuni scenari, ad esempio la preparazione delle origini del progetto da inviare per i test CI, puoi chiamare l'interfaccia a riga di comando Firebase per un aggiornamento batch.
In questi casi, utilizza firebase dataconnect:sdk:generate
.
Configurare il codice client
Inizializza l'app Data Connect
Inizializza l'app utilizzando la sequenza standard di Firebase.
initializeApp({...});
Inizializza l'SDK web Data Connect
Inizializza la tua istanza Data Connect utilizzando le informazioni utilizzate per configurare Data Connect (tutte disponibili nella scheda Data Connect della console Firebase).
Oggetto ConnectorConfig
L'SDK richiede un oggetto di configurazione del connettore.
Questo oggetto viene generato automaticamente da serviceId
e location
in
dataconnect.yaml
e da connectorId
in connector.yaml
.
Importare librerie
Per inizializzare il codice client sono necessarie due serie di importazioni: le importazioni Data Connect generali e le importazioni SDK generate specifiche.
// 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';
Creare prototipi e testare i client web
Strumenta i client per utilizzare un emulatore locale
Puoi utilizzare l'emulatore Data Connect dall'estensione VS Code di Data Connect o dalla CLI.
L'instrumentazione dell'app per la connessione all'emulatore è la stessa per entrambi gli scenari.
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
Per passare alle risorse di produzione, commenta le righe per la connessione all'emulatore.
Ottenere un'istanza
Devi chiamare getDataConnect
solo se vuoi connetterti all'emulatore Data Connect.
In caso contrario, l'SDK generato creerà automaticamente un'istanza dell'oggetto DataConnect
per te.
Utilizzo delle query lato client
Il codice generato sarà già dotato di riferimenti a query predefiniti. Devi solo importarli ed eseguire la chiamata.
import { executeQuery } from 'firebase/data-connect';
import { listMoviesRef } from '@movie-app/movies';
const ref = listMoviesRef();
const { data } = await executeQuery(ref);
console.log(data.movies);
Chiama i metodi di query dell'SDK
Ecco un esempio di utilizzo di queste funzioni di scorciatoia per le azioni:
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);
}
Iscrizione alle modifiche
Puoi iscriverti alle modifiche (che verranno aggiornate ogni volta che esegui una query).
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`
Utilizzo delle mutazioni sul lato client
Le mutazioni sono accessibili nello stesso modo delle query.
import { executeMutation } from 'firebase/data-connect';
import { createMovieRef } from '@movie-app/movies';
const { data } = await executeMutation(createMovieRef({ movie: 'Empire Strikes Back' }));
Tipi di dati nell'SDK web
Il server Data Connect rappresenta i tipi di dati GraphQL comuni. Questi parametri sono rappresentati nell'SDK come segue.
Tipo di Data Connect | TypeScript |
---|---|
Timestamp | stringa |
Data | stringa |
UUID | stringa |
Int64 | stringa |
Doppio | Numero |
In virgola mobile | Numero |
Considerazioni sui framework
Angular
Durante la generazione del codice, Angular CLI
non rileverà le nuove modifiche a causa del suo codice di ottimizzazione delle dipendenze. Per risolvere il problema, dovrai modificare
il tuo angular.json
.
"projects": {
"myproject": {
"architect": {
"serve:": {
"prebundle": {
"exclude": ["@movie-app/movies"]
}
}
}
}
}