Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
(persisted-fetch) - pass document as a second argument to the generateHash option (#887)
* pass document as a second argument to the generateHash option
* add test to assert that formatDocument preserves custom properties
* assert hashFn is called with the correct arguments
* add build time generation to readme
authored by
Jovi De Croock
and committed by
GitHub
1cdfbefb
c4f24eed
+47
-4
+5
.changeset/cuddly-ligers-design.md
+5
.changeset/cuddly-ligers-design.md
+23
-1
exchanges/persisted-fetch/README.md
+23
-1
exchanges/persisted-fetch/README.md
···
28
28
persistedFetchExchange({
29
29
/* optional config */
30
30
}),
31
-
fetchExchange
31
+
fetchExchange,
32
32
],
33
33
});
34
34
```
···
40
40
41
41
The `persistedFetchExchange` only handles queries, so for mutations we keep the
42
42
`fetchExchange` around alongside of it.
43
+
44
+
## Avoid hashing during runtime
45
+
46
+
If you want to generate hashes at build-time you can use a [webpack-loader](https://github.com/leoasis/graphql-persisted-document-loader) to achieve this,
47
+
when using this all you need to do in this exchange is the following:
48
+
49
+
```js
50
+
import { createClient, dedupExchange, fetchExchange, cacheExchange } from 'urql';
51
+
import { persistedFetchExchange } from '@urql/exchange-persisted-fetch';
52
+
53
+
const client = createClient({
54
+
url: 'http://localhost:1234/graphql',
55
+
exchanges: [
56
+
dedupExchange,
57
+
cacheExchange,
58
+
persistedFetchExchange({
59
+
generateHash: (_, document) => document.documentId,
60
+
}),
61
+
fetchExchange,
62
+
],
63
+
});
64
+
```
+10
-1
exchanges/persisted-fetch/src/persistedFetchExchange.test.ts
+10
-1
exchanges/persisted-fetch/src/persistedFetchExchange.test.ts
···
205
205
json: () => expected,
206
206
});
207
207
208
-
const hashFn = () => Promise.resolve('hello');
208
+
const hashFn = jest.fn(() => Promise.resolve('hello'));
209
209
210
210
await pipe(
211
211
fromValue(queryOperation),
···
225
225
},
226
226
},
227
227
});
228
+
const queryString = `query getUser($name: String) {
229
+
user(name: $name) {
230
+
id
231
+
firstName
232
+
lastName
233
+
}
234
+
}
235
+
`;
236
+
expect(hashFn).toBeCalledWith(queryString, queryOperation.query);
228
237
});
+3
-2
exchanges/persisted-fetch/src/persistedFetchExchange.ts
+3
-2
exchanges/persisted-fetch/src/persistedFetchExchange.ts
···
27
27
makeFetchOptions,
28
28
makeFetchSource,
29
29
} from '@urql/core/internal';
30
+
import { DocumentNode } from 'graphql';
30
31
31
32
import { hash } from './sha256';
32
33
33
34
interface PersistedFetchExchangeOptions {
34
35
preferGetForPersistedQueries?: boolean;
35
-
generateHash?: (query: string) => Promise<string>;
36
+
generateHash?: (query: string, document: DocumentNode) => Promise<string>;
36
37
}
37
38
38
39
export const persistedFetchExchange = (
···
68
69
69
70
return pipe(
70
71
// Hash the given GraphQL query
71
-
fromPromise(hashFn(query)),
72
+
fromPromise(hashFn(query, operation.query)),
72
73
mergeMap(sha256Hash => {
73
74
// Attach SHA256 hash and remove query from body
74
75
body.query = undefined;
+6
packages/core/src/utils/typenames.test.ts
+6
packages/core/src/utils/typenames.test.ts
···
49
49
expect(expectedKey).toBe(actualKey);
50
50
});
51
51
52
+
it('preserves custom properties', () => {
53
+
const doc = parse(`{ id todos { id } }`) as any;
54
+
doc.documentId = '123';
55
+
expect((formatDocument(doc) as any).documentId).toBe(doc.documentId);
56
+
});
57
+
52
58
it('adds typenames to a query string', () => {
53
59
expect(formatTypeNames(`{ todos { id } }`)).toMatchInlineSnapshot(`
54
60
"{