https://github.com/valu-digital/graphql-codegen-persisted-query-ids

https://github.com/valu-digital/graphql-codegen-persisted-query-ids

npm

Last synced: 15 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/valu-digital/graphql-codegen-persisted-query-ids
• Owner: valu-digital
• License: mit
• Created: 2019-02-27T12:53:31.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-07-29T11:47:29.000Z (6 months ago)
• Last Synced: 2024-12-17T14:50:26.988Z (25 days ago)
• Topics: npm
• Language: TypeScript
• Homepage: https://npm.im/graphql-codegen-persisted-query-ids
• Size: 43 KB
• Stars: 50
• Watchers: 2
• Forks: 13
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

```yaml

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

```json

{

    "093eb2253f63de7afc7c4637bf19273a09591c2139bc068de320ae78e39755d9": "query Thing { field }"

}

```

The `client.json` file is an operation name mapping to the query id to be

consumed by the GraphQL clients.

```json

{

    "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

[wp-graphql-lock]: https://github.com/valu-digital/wp-graphql-lock

In your theme's `functions.php` add

```php

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](https://github.com/apollographql/apollo-link-persisted-queries)

```ts

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(),

});

```