Skip to content
urql exchange that implements Apollo-style Automatic Persisted Queries
Branch: master
Clone or download
Latest commit a768c3d Jun 9, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Initial commit Jun 9, 2019
scripts Initial commit Jun 9, 2019
src Initial commit Jun 9, 2019
test Initial commit Jun 9, 2019
.eslintignore Initial commit Jun 9, 2019
.eslintrc.json Initial commit Jun 9, 2019
.gitignore Initial commit Jun 9, 2019
.prettierignore Initial commit Jun 9, 2019
LICENSE Initial commit Jun 9, 2019
README.md Add README Jun 9, 2019
package.json Initial commit Jun 9, 2019
tsconfig.json
yarn.lock Initial commit Jun 9, 2019

README.md

urql-persisted-queries

urql-persisted-queries implements Apollo-style Automatic Persisted Queries in urql. From the Apollo docs:

Apollo Server implements Automatic Persisted Queries (APQ), a technique that greatly improves network performance for GraphQL with zero build-time configuration. A persisted query is a ID or hash that can be sent to the server instead of the entire GraphQL query string. This smaller signature reduces bandwidth utilization and speeds up client loading times. Persisted queries are especially nice paired with GET requests, enabling the browser cache and integration with a CDN.

With Automatic Persisted Queries, the ID is a deterministic hash of the input query, so we don't need a complex build step to share the ID between clients and servers. If a server doesn't know about a given hash, the client can expand the query for it; Apollo Server caches that mapping.

In order to use this, your GraphQL server needs to be compatible with it.

Usage

To use urql-persisted-queries, you need to install it either via Yarn or npm:

yarn add urql-persisted-queries

Then in your JavaScript code, replace urql's regular fetchExchange with the persistedFetchExchange. For example:

import { createClient, Provider, dedupExchange, cacheExchange } from 'urql';
import { persistedFetchExchange } from 'urql-persisted-queries';
// ...
const client = createClient({
  url: 'http://localhost:3001/graphql',
  exchanges: [dedupExchange, cacheExchange, persistedFetchExchange],
});

A basic example project is included in the example directory.

You can’t perform that action at this time.