https://github.com/daniel15/urql-persisted-queries
urql exchange that implements Apollo-style Automatic Persisted Queries
https://github.com/daniel15/urql-persisted-queries
Last synced: about 1 year ago
JSON representation
urql exchange that implements Apollo-style Automatic Persisted Queries
- Host: GitHub
- URL: https://github.com/daniel15/urql-persisted-queries
- Owner: Daniel15
- License: mit
- Created: 2019-06-09T06:41:29.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-04-10T15:33:08.000Z (about 6 years ago)
- Last Synced: 2025-04-28T15:52:22.190Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://d.sb/urql-pq
- Size: 217 KB
- Stars: 27
- Watchers: 2
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# urql-persisted-queries
`urql-persisted-queries` implements Apollo-style [Automatic Persisted Queries](https://www.apollographql.com/docs/apollo-server/features/apq/) in [urql](https://formidable.com/open-source/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:
```sh
yarn add urql-persisted-queries
```
Then in your JavaScript code, replace urql's regular `fetchExchange` with the `persistedFetchExchange`. For example:
```javascript
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.