Usando a extensão Firestore Bundle Builder

A extensão Firestore Bundle Builder ( firestore-bundle-builder ) implanta uma função HTTP que fornece pacotes de dados do Cloud Firestore . Você define os pacotes em documentos do Firestore, e a extensão fornece pacotes de dados de arquivos binários estáticos por meio de solicitações HTTP, junto com vários mecanismos de cache integrados usando Firebase Hosting CDN ou Cloud Storage. Quando não existir nenhum pacote configurável ou os pacotes existentes tiverem expirado, esta função criará e armazenará em cache um novo pacote configurável sob demanda.

Para usar esta extensão, você precisa primeiro criar uma ou mais especificações de pacote no Firestore usando o painel de administração da extensão. A especificação do pacote configurável é como você define consultas nomeadas (consultas de coleção e caminhos de documentos específicos para adicionar ao pacote configurável).

Dentro da especificação do pacote, você também pode definir parâmetros que devem ser usados ​​em consultas nomeadas. Você define valores para esses parâmetros usando parâmetros de consulta de URL ao chamar a função HTTP.

O link acima fornece algumas instruções para que você possa executar os utilitários administrativos localmente. Depois de configurar o aplicativo da web, navegue até localhost:3000 para criar uma especificação usando a IU:

Construindo e servindo o pacote

Depois de instalar a extensão e criar uma especificação de pacote configurável, você poderá começar a criar e servir pacotes chamando o endpoint HTTP fornecido pela extensão.

Dependendo da especificação do pacote, o pacote solicitado pode ser retornado do cache do cliente, do cache do Firebase Hosting ou de um arquivo do Cloud Storage. Quando todos os caches expirarem, uma nova solicitação de veiculação acionará consultas do Firestore para criar o pacote sob demanda.

Você pode aproveitar os recursos do Firebase Hosting CDN configurando um site do Firebase Hosting que aponta para a função de veiculação usando uma regra de reescrita. As CDNs replicam seu pacote em muitos servidores diferentes, para que seus usuários possam carregar automaticamente o pacote do servidor mais próximo. Esta é a abordagem preferida.

Para configurar isso no Firebase Hosting, crie ou edite um arquivo firebase.json com o seguinte conteúdo e implante o site :

{
  "hosting": {
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/bundles/*",
        "function": "ext-firestore-bundle-builder-serve"
      }
    ]
  }
}

Depois de implantado, você poderá acessar seus pacotes do CDN usando o URL do seu site. Por exemplo: https://your-site-url.com/bundles/:bundleId .

Como alternativa, você pode configurar a extensão para armazenar dados em cache no Cloud Storage se não quiser usar o Firebase Hosting. Nesse caso, você chamaria a função HTTP implementada diretamente para gerar pacotes configuráveis.

Integração do cliente

Em seguida, você pode consumir um pacote com a API loadBundle dos SDKs do Cloud Firestore. Primeiro, o pacote precisa ser baixado e depois fornecido ao SDK. Por exemplo:

import { loadBundle } from "firebase/firestore";

// Download the bundle from the Firebase Hosting CDN:
const bundle = await fetch("/bundles/:bundleId");

// If not using a CDN, download the bundle directly:
// const bundle = await fetch('https://<location>-<project-id>.cloudfunctions.net/ext-firestore-bundle-builder-serve/:bundleId');

await loadBundle(bundle);

Depois de carregado, você pode usar os dados do pacote:

Se você especificou uma matriz de caminhos de documentos ao definir o pacote, poderá obter os dados do documento no seu cliente por meio do pacote:

import { getFirestore, doc, getDocFromCache } from "firebase/firestore";
// Bundle Document IDs: ['users/92x1NgSWYKUC4AG4s2nHGMR2ikZ2']

const ref = doc(getFirestore(), "users/92x1NgSWYKUC4AG4s2nHGMR2ikZ2");
const snapshot = await getDocFromCache(ref);

Se você especificou consultas, poderá usar a namedQuery para executar uma consulta do pacote configurável:

import { getFirestore, namedQuery } from "firebase/firestore";
const query = await namedQuery(getFirestore(), "queryId");
const snapshot = await getDocsFromCache(query);

Os IDs de consulta são definidos como uma chave de cada definição de propriedade queries (veja abaixo).