Automatic persisted queries (APQ) for Relay modern

Idea

The goal is to bring APQ functionality provided by APQ negotiation protocol from Apollo world to Relay Modern and enable using persisted queries between Relay client and server that either uses Apollo Engine directly or implements the same protocol.

Install

yarn add relay-runtime react-relay-network-modern relay-auto-persisted-queries

Use

This is complete working setup of Relay Modern environment:

// @flow

import { sha256 } from 'js-sha256';
import persistedQueries from 'relay-auto-persisted-queries';
import { Environment, RecordSource, Store } from 'relay-runtime';
import {
  RelayNetworkLayer,
  urlMiddleware,
} from 'react-relay-network-modern';

const network = new RelayNetworkLayer([
  urlMiddleware({
    url: () =>
      Promise.resolve('https://yourserver.example.com/graphql')
  }),
  persistedQueries({ useGETForHashedQueries: true, hash: sha256 })
]);

const source = new RecordSource();
const store = new Store(source);
export default new Environment({ network, store });

Note you can start using GET for queries since the payload sent to the server with persistent query is always small.

Resources

• APQ negotiation protocol
• GraphQL pitfalls
• Improve GraphQL Performance with Automatic Persisted Queries
• Caching GraphQL results in your CDN
• Apollo Engine DOCs for APQ