DEPRECATED

Functionality is replaced by @amazeelabs/codegen-operation-ids

GraphQL persisted queries for Silverback

This is a set of helpers to be used with query functions generated by @graphql-codegen/typescript-react-query and/or @graphql-codegen/typescript-graphql-request.

General setup

1. Add packages to project.

   pnpm add @amazeelabs/silverback-graphql-persisted
   pnpm add -D graphql-codegen-persisted-query-ids

2. Configure codegen to generate client and server query maps. Example:

   codegen.yml

   overwrite: true
   generates:
     # ...
     ../cms/generated/persisted-queries-map.json:
       schema: ../cms/generated/schema.composed.graphqls
       documents:
         - ./queries/**/*.graphql
         - ./mutations/**/*.graphql
       plugins:
         - graphql-codegen-persisted-query-ids
       config:
         output: server
         algorithm: sha256
     generated/persisted-queries-map.json:
       schema: ../cms/generated/schema.composed.graphqls
       documents:
         - ./queries/**/*.graphql
         - ./mutations/**/*.graphql
       plugins:
         - graphql-codegen-persisted-query-ids
       config:
         output: client
         algorithm: sha256

For @graphql-codegen/typescript-react-query

1. Prepare custom fetcher using persistedFetcher from this package. Example:

   src/commons/fetcher.ts

   import { persistedFetcher } from '@amazeelabs/silverback-graphql-persisted';
   
   import queryMap from '../../generated/persisted-queries-map.json';
   
   export function fetcher<TData, TVariables>(
     query: string,
     variables?: TVariables,
   ): () => Promise<TData> {
     return persistedFetcher(
       process.env.GATSBY_GRAPHQL_ENDPOINT!,
       queryMap,
       query,
       variables,
     );
   }

2. Use it in codegen.yml. Example:

   codegen.yml

   overwrite: true
   generates:
     # ...
     generated/queries.ts:
       # ...
       plugins:
         - 'typescript'
         - 'typescript-operations'
         - 'typescript-react-query'
       config:
         fetcher: ../src/commons/fetcher#fetcher

For @graphql-codegen/typescript-graphql-request

Update getSdk calls providing a fetch wrapped with withPersistedQueries from this package. Example:

import { withPersistedQueries } from '@amazeelabs/silverback-graphql-persisted';

import { getSdk } from '../../generated/mutations';

const sdk = getSdk(
  new GraphQLClient(process.env.GATSBY_GRAPHQL_ENDPOINT!, {
    fetch: withPersistedQueries(fetch, queryMap),
  }),
);

Backend setup

See silverback_graphql_persisted package.