Awesome
Generate Persisted Query IDs
A plugin for graphql-code-generator
Install
Install graphql-code-generator and this plugin
npm i -D graphql-code-generator graphql-codegen-persisted-query-ids
Usage
Create codegen.yml
schema: http://app.test/graphql
documents: "./src/**/*.js"
generates:
persisted-query-ids/client.json:
- graphql-codegen-persisted-query-ids:
output: client
algorithm: sha256
persisted-query-ids/server.json:
- graphql-codegen-persisted-query-ids:
output: server
algorithm: sha256
Run the generator
mkdir persisted-query-ids
./node_modules/.bin/gql-gen --overwrite
This will generate two json files. The server.json
is a query id mapping to
the actual queries which should be consumed by the server.
Example
{
"093eb2253f63de7afc7c4637bf19273a09591c2139bc068de320ae78e39755d9": "query Thing { field }"
}
The client.json
file is an operation name mapping to the query id to be
consumed by the GraphQL clients.
{
"Thing": "093eb2253f63de7afc7c4637bf19273a09591c2139bc068de320ae78e39755d9"
}
Integrating with WPGraphQL
Use the wp-graphql-lock plugin
cd wp-content/plugins
git clone https://github.com/valu-digital/wp-graphql-lock
In your theme's functions.php
add
add_filter( 'graphql_lock_load_query', function( string $query, string $query_id ) {
$queries = json_decode( file_get_contents( __DIR__ . '/../persisted-query-ids/server.json' ), true );
return $queries[ $query_id ] ?? null;
}, 10, 2 );
Integrating with Apollo Client
Add custom generateHash
to apollo-link-persisted-queries
import { createPersistedQueryLink } from "@apollo/client/link/persisted-queries";
// import {createPersistedQueryLink } from "apollo-link-persisted-queries"; // For Apollo Client v2
import { usePregeneratedHashes } from "graphql-codegen-persisted-query-ids/lib/apollo";
const hashes = require("../persisted-query-ids/client.json");
const persistedLink = createPersistedQueryLink({
useGETForHashedQueries: true, // Optional but allows better caching
generateHash: usePregeneratedHashes(hashes),
});
// And pass it to ApolloClient
const client = new ApolloClient({
link: persistedLink.concat(createHttpLink({ uri: "/graphql" })),
cache: new InMemoryCache(),
});