Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
major(core): remove default exchanges (#3033)
Co-authored-by: Phil Pluckthun <phil@kitten.sh>
authored by
Jovi De Croock
Phil Pluckthun
and committed by
GitHub
40911d2f
33d64b0a
+247
-143
+18
.changeset/calm-buckets-scream.md
+18
.changeset/calm-buckets-scream.md
···
1
+
---
2
+
'@urql/core': major
3
+
---
4
+
5
+
Remove `defaultExchanges` from `@urql/core` and make `exchanges` a required property on `Client` construction.
6
+
In doing so we make the `urql` package more tree-shakeable as the three default exchanges are in no code paths
7
+
meaning they can be removed if not used.
8
+
9
+
A migration would look as follows if you are currently creating a client without exchanges
10
+
11
+
```js
12
+
import { createClient, cacheExchange, fetchExchange } from '@urql/core'
13
+
14
+
const client = createClient({
15
+
url: '',
16
+
exchanges: [cacheExchange, fetchExchange]
17
+
});
18
+
```
+6
.changeset/honest-apples-join.md
+6
.changeset/honest-apples-join.md
···
1
+
---
2
+
'@urql/preact': major
3
+
'urql': major
4
+
---
5
+
6
+
Remove the default `Client` from `Context`. Previously, `urql` kept a legacy default client in its context, with default exchanges and calling an API at `/graphql`. This has now been removed and you will have to create your own `Client` if you were relying on this behaviour.
+12
-6
docs/advanced/subscriptions.md
+12
-6
docs/advanced/subscriptions.md
···
13
13
To add support for subscriptions we need to add the `subscriptionExchange` to our `Client`.
14
14
15
15
```js
16
-
import { Client, defaultExchanges, subscriptionExchange } from 'urql';
16
+
import { Client, dedupExchange, cacheExchange, fetchExchange, subscriptionExchange } from 'urql';
17
17
18
18
const client = new Client({
19
19
url: 'http://localhost:3000/graphql',
20
20
exchanges: [
21
-
...defaultExchanges,
21
+
dedupExchange,
22
+
cacheExchange,
23
+
fetchExchange,
22
24
subscriptionExchange({
23
25
forwardSubscription,
24
26
}),
···
45
47
For backends supporting `graphql-ws`, we recommend using the [graphql-ws](https://github.com/enisdenjo/graphql-ws) client.
46
48
47
49
```js
48
-
import { createClient, defaultExchanges, subscriptionExchange } from 'urql';
50
+
import { createClient, dedupExchange, cacheExchange, fetchExchange, subscriptionExchange } from 'urql';
49
51
import { createClient as createWSClient } from 'graphql-ws';
50
52
51
53
const wsClient = createWSClient({
···
55
57
const client = createClient({
56
58
url: '/graphql',
57
59
exchanges: [
58
-
...defaultExchanges,
60
+
dedupExchange,
61
+
cacheExchange,
62
+
fetchExchange,
59
63
subscriptionExchange({
60
64
forwardSubscription: request => ({
61
65
subscribe: sink => ({
···
81
85
> The `subscriptions-transport-ws` package isn't actively maintained. If your API supports the new protocol or you can swap the package out, consider using [`graphql-ws`](#setting-up-graphql-ws) instead.
82
86
83
87
```js
84
-
import { Client, defaultExchanges, subscriptionExchange } from 'urql';
88
+
import { Client, dedupExchange, cacheExchange, fetchExchange, subscriptionExchange } from 'urql';
85
89
import { SubscriptionClient } from 'subscriptions-transport-ws';
86
90
87
91
const subscriptionClient = new SubscriptionClient('ws://localhost/graphql', { reconnect: true });
···
89
93
const client = new Client({
90
94
url: '/graphql',
91
95
exchanges: [
92
-
...defaultExchanges,
96
+
dedupExchange,
97
+
cacheExchange,
98
+
fetchExchange,
93
99
subscriptionExchange({
94
100
forwardSubscription: request => subscriptionClient.request(request),
95
101
}),
+1
-10
docs/api/core.md
+1
-10
docs/api/core.md
···
22
22
23
23
| Input | Type | Description |
24
24
| ----------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
25
-
| `exchanges` | `Exchange[]` | An array of `Exchange`s that the client should use instead of the list of `defaultExchanges` |
25
+
| `exchanges` | `Exchange[]` | An array of `Exchange`s that the client should use |
26
26
| `url` | `string` | The GraphQL API URL as used by `fetchExchange` |
27
27
| `fetchOptions` | `RequestInit \| () => RequestInit` | Additional `fetchOptions` that `fetch` in `fetchExchange` should use to make a request |
28
28
| `fetch` | `typeof fetch` | An alternative implementation of `fetch` that will be used by the `fetchExchange` instead of `window.fetch` |
···
522
522
this problem.
523
523
524
524
It's used by the [`Client`](#client) when the `maskTypename` option is enabled.
525
-
526
-
### defaultExchanges
527
-
528
-
This is an array of the default `Exchange`s that the `Client` uses when the `exchanges` option isn't
529
-
passed.
530
-
531
-
```js
532
-
const defaultExchanges = [dedupExchange, cacheExchange, fetchExchange];
533
-
```
534
525
535
526
### composeExchanges
536
527
+2
-1
docs/architecture.md
+2
-1
docs/architecture.md
···
45
45
extra information on how the GraphQL requests are executed.
46
46
47
47
```js
48
-
import { Client } from '@urql/core';
48
+
import { Client, dedupExchange, cacheExchange, fetchExchange } from '@urql/core';
49
49
50
50
new Client({
51
51
url: 'http://localhost:3000/graphql',
52
52
requestPolicy: 'cache-first',
53
+
exchanges: [dedupExchange, cacheExchange, fetchExchange]
53
54
});
54
55
```
55
56
+5
-7
docs/basics/core.md
+5
-7
docs/basics/core.md
···
134
134
create the GraphQL client. This central `Client` manages all of our GraphQL requests and results.
135
135
136
136
```js
137
-
import { createClient } from '@urql/core';
137
+
import { createClient, dedupExchange, cacheExchange, fetchExchange } from '@urql/core';
138
138
139
139
const client = createClient({
140
140
url: 'http://localhost:3000/graphql',
141
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
141
142
});
142
143
```
143
144
···
153
154
```js
154
155
const client = createClient({
155
156
url: 'http://localhost:3000/graphql',
157
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
156
158
fetchOptions: () => {
157
159
const token = getToken();
158
160
return {
···
168
170
without it. However, another important option on the `Client` is the `exchanges` option.
169
171
170
172
This option passes a list of exchanges to the `Client`, which tell it how to execute our requests
171
-
and how to cache data in a certain order. By default, this will be populated with the list of
172
-
`defaultExchanges`.
173
+
and how to cache data in a certain order.
173
174
174
175
```js
175
-
import { createClient, defaultExchanges } from '@urql/core';
176
+
import { createClient, dedupExchange, cacheExchange, fetchExchange } from '@urql/core';
176
177
177
178
const client = createClient({
178
179
url: 'http://localhost:3000/graphql',
179
-
// the default:
180
-
exchanges: defaultExchanges,
181
-
// the same as:
182
180
exchanges: [dedupExchange, cacheExchange, fetchExchange],
183
181
});
184
182
```
+6
-2
docs/basics/react-preact.md
+6
-2
docs/basics/react-preact.md
···
41
41
create the GraphQL client. This central `Client` manages all of our GraphQL requests and results.
42
42
43
43
```js
44
-
import { createClient } from 'urql';
44
+
import { createClient, dedupExchange, cacheExchange, fetchExchange } from 'urql';
45
45
46
46
const client = createClient({
47
47
url: 'http://localhost:3000/graphql',
48
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
48
49
});
49
50
```
50
51
···
60
61
```js
61
62
const client = createClient({
62
63
url: 'http://localhost:3000/graphql',
64
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
63
65
fetchOptions: () => {
64
66
const token = getToken();
65
67
return {
···
76
78
the `Provider` export.
77
79
78
80
```jsx
79
-
import { createClient, Provider } from 'urql';
81
+
import { createClient, Provider, dedupExchange, cacheExchange, fetchExchange } from 'urql';
80
82
81
83
const client = createClient({
82
84
url: 'http://localhost:3000/graphql',
85
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
83
86
});
84
87
85
88
const App = () => (
···
245
248
246
249
const client = createClient({
247
250
url: 'http://localhost:3000/graphql',
251
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
248
252
// every operation will by default use cache-and-network rather
249
253
// than cache-first now:
250
254
requestPolicy: 'cache-and-network',
+6
-2
docs/basics/svelte.md
+6
-2
docs/basics/svelte.md
···
48
48
the GraphQL client. This central `Client` manages all of our GraphQL requests and results.
49
49
50
50
```js
51
-
import { createClient } from '@urql/svelte';
51
+
import { createClient, dedupExchange, cacheExchange, fetchExchange } from '@urql/svelte';
52
52
53
53
const client = createClient({
54
54
url: 'http://localhost:3000/graphql',
55
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
55
56
});
56
57
```
57
58
···
67
68
```js
68
69
const client = createClient({
69
70
url: 'http://localhost:3000/graphql',
71
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
70
72
fetchOptions: () => {
71
73
const token = getToken();
72
74
return {
···
85
87
86
88
```html
87
89
<script>
88
-
import { createClient, setContextClient } from '@urql/svelte';
90
+
import { createClient, setContextClient, dedupExchange, cacheExchange, fetchExchange } from '@urql/svelte';
89
91
90
92
const client = createClient({
91
93
url: 'http://localhost:3000/graphql',
94
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
92
95
});
93
96
94
97
setContextClient(client);
···
292
295
293
296
const client = createClient({
294
297
url: 'http://localhost:3000/graphql',
298
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
295
299
// every operation will by default use cache-and-network rather
296
300
// than cache-first now:
297
301
requestPolicy: 'cache-and-network',
+7
-3
docs/basics/vue.md
+7
-3
docs/basics/vue.md
···
37
37
the GraphQL client. This central `Client` manages all of our GraphQL requests and results.
38
38
39
39
```js
40
-
import { createClient } from '@urql/vue';
40
+
import { createClient, dedupExchange, cacheExchange, fetchExchange } from '@urql/vue';
41
41
42
42
const client = createClient({
43
43
url: 'http://localhost:3000/graphql',
44
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
44
45
});
45
46
```
46
47
···
56
57
```js
57
58
const client = createClient({
58
59
url: 'http://localhost:3000/graphql',
60
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
59
61
fetchOptions: () => {
60
62
const token = getToken();
61
63
return {
···
77
79
78
80
```html
79
81
<script>
80
-
import { createClient, provideClient } from '@urql/vue';
82
+
import { createClient, provideClient, dedupExchange, cacheExchange, fetchExchange } from '@urql/vue';
81
83
82
84
const client = createClient({
83
85
url: 'http://localhost:3000/graphql',
86
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
84
87
});
85
88
86
89
provideClient(client);
···
361
364
we may also change the `Client`'s default `requestPolicy` by passing it there.
362
365
363
366
```js
364
-
import { createClient } from '@urql/vue';
367
+
import { createClient, dedupExchange, cacheExchange, fetchExchange } from '@urql/vue';
365
368
366
369
const client = createClient({
367
370
url: 'http://localhost:3000/graphql',
371
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
368
372
// every operation will by default use cache-and-network rather
369
373
// than cache-first now:
370
374
requestPolicy: 'cache-and-network',
+4
-1
exchanges/auth/src/authExchange.test.ts
+4
-1
exchanges/auth/src/authExchange.test.ts
+4
-1
exchanges/context/src/context.test.ts
+4
-1
exchanges/context/src/context.test.ts
···
32
32
const dispatchDebug = vi.fn();
33
33
let client, op, ops$, next;
34
34
beforeEach(() => {
35
-
client = createClient({ url: 'http://0.0.0.0' });
35
+
client = createClient({
36
+
url: 'http://0.0.0.0',
37
+
exchanges: [],
38
+
});
36
39
op = client.createRequestOperation('query', {
37
40
key: 1,
38
41
query: queryOne,
+4
-2
exchanges/graphcache/src/ast/schemaPredicates.test.ts
+4
-2
exchanges/graphcache/src/ast/schemaPredicates.test.ts
···
8
8
const mocked = (x: any): any => x;
9
9
10
10
describe('SchemaPredicates', () => {
11
-
// eslint-disable-next-line
12
-
const schema = buildClientSchema(minifyIntrospectionQuery(require('../test-utils/simple_schema.json')));
11
+
const schema = buildClientSchema(
12
+
// eslint-disable-next-line
13
+
minifyIntrospectionQuery(require('../test-utils/simple_schema.json'))
14
+
);
13
15
14
16
const frag = (value: string): InlineFragmentNode => ({
15
17
kind: Kind.INLINE_FRAGMENT,
+93
-23
exchanges/graphcache/src/cacheExchange.test.ts
+93
-23
exchanges/graphcache/src/cacheExchange.test.ts
···
54
54
55
55
describe('data dependencies', () => {
56
56
it('writes queries to the cache', () => {
57
-
const client = createClient({ url: 'http://0.0.0.0' });
57
+
const client = createClient({
58
+
url: 'http://0.0.0.0',
59
+
exchanges: [],
60
+
});
58
61
const op = client.createRequestOperation('query', {
59
62
key: 1,
60
63
query: queryOne,
···
111
114
});
112
115
113
116
it('respects cache-only operations', () => {
114
-
const client = createClient({ url: 'http://0.0.0.0' });
117
+
const client = createClient({
118
+
url: 'http://0.0.0.0',
119
+
exchanges: [],
120
+
});
115
121
const op = client.createRequestOperation(
116
122
'query',
117
123
{
···
174
180
],
175
181
};
176
182
177
-
const client = createClient({ url: 'http://0.0.0.0' });
183
+
const client = createClient({
184
+
url: 'http://0.0.0.0',
185
+
exchanges: [],
186
+
});
178
187
const { source: ops$, next } = makeSubject<Operation>();
179
188
180
189
const reexec = vi
···
304
313
},
305
314
};
306
315
307
-
const client = createClient({ url: 'http://0.0.0.0' });
316
+
const client = createClient({
317
+
url: 'http://0.0.0.0',
318
+
exchanges: [],
319
+
});
308
320
const { source: ops$, next } = makeSubject<Operation>();
309
321
310
322
const reexec = vi
···
411
423
},
412
424
};
413
425
414
-
const client = createClient({ url: 'http://0.0.0.0' });
426
+
const client = createClient({
427
+
url: 'http://0.0.0.0',
428
+
exchanges: [],
429
+
});
415
430
const { source: ops$, next } = makeSubject<Operation>();
416
431
const reexec = vi
417
432
.spyOn(client, 'reexecuteOperation')
···
473
488
concealAuthor: true,
474
489
};
475
490
476
-
const client = createClient({ url: 'http://0.0.0.0' });
491
+
const client = createClient({
492
+
url: 'http://0.0.0.0',
493
+
exchanges: [],
494
+
});
477
495
const { source: ops$, next } = makeSubject<Operation>();
478
496
479
497
vi.spyOn(client, 'reexecuteOperation').mockImplementation(next);
···
530
548
concealAuthor: true,
531
549
};
532
550
533
-
const client = createClient({ url: 'http://0.0.0.0' });
551
+
const client = createClient({
552
+
url: 'http://0.0.0.0',
553
+
exchanges: [],
554
+
});
534
555
const { source: ops$, next } = makeSubject<Operation>();
535
556
536
557
vi.spyOn(client, 'reexecuteOperation').mockImplementation(next);
···
583
604
});
584
605
585
606
it('marks errored null fields as uncached but delivers them as expected', () => {
586
-
const client = createClient({ url: 'http://0.0.0.0' });
607
+
const client = createClient({
608
+
url: 'http://0.0.0.0',
609
+
exchanges: [],
610
+
});
587
611
const { source: ops$, next } = makeSubject<Operation>();
588
612
589
613
const query = gql`
···
680
704
},
681
705
};
682
706
683
-
const client = createClient({ url: 'http://0.0.0.0' });
707
+
const client = createClient({
708
+
url: 'http://0.0.0.0',
709
+
exchanges: [],
710
+
});
684
711
const { source: ops$, next } = makeSubject<Operation>();
685
712
686
713
const reexec = vi
···
773
800
},
774
801
};
775
802
776
-
const client = createClient({ url: 'http://0.0.0.0' });
803
+
const client = createClient({
804
+
url: 'http://0.0.0.0',
805
+
exchanges: [],
806
+
});
777
807
const { source: ops$, next } = makeSubject<Operation>();
778
808
779
809
const reexec = vi
···
870
900
},
871
901
};
872
902
873
-
const client = createClient({ url: 'http://0.0.0.0' });
903
+
const client = createClient({
904
+
url: 'http://0.0.0.0',
905
+
exchanges: [],
906
+
});
874
907
const { source: ops$, next } = makeSubject<Operation>();
875
908
876
909
const reexec = vi
···
987
1020
},
988
1021
};
989
1022
990
-
const client = createClient({ url: 'http://0.0.0.0' });
1023
+
const client = createClient({
1024
+
url: 'http://0.0.0.0',
1025
+
exchanges: [],
1026
+
});
991
1027
const { source: ops$, next } = makeSubject<Operation>();
992
1028
993
1029
const reexec = vi
···
1070
1106
1071
1107
describe('custom resolvers', () => {
1072
1108
it('follows resolvers on initial write', () => {
1073
-
const client = createClient({ url: 'http://0.0.0.0' });
1109
+
const client = createClient({
1110
+
url: 'http://0.0.0.0',
1111
+
exchanges: [],
1112
+
});
1074
1113
const { source: ops$, next } = makeSubject<Operation>();
1075
1114
1076
1115
const opOne = client.createRequestOperation('query', {
···
1143
1182
},
1144
1183
};
1145
1184
1146
-
const client = createClient({ url: 'http://0.0.0.0' });
1185
+
const client = createClient({
1186
+
url: 'http://0.0.0.0',
1187
+
exchanges: [],
1188
+
});
1147
1189
const { source: ops$, next } = makeSubject<Operation>();
1148
1190
1149
1191
const opOne = client.createRequestOperation('query', {
···
1227
1269
}
1228
1270
`;
1229
1271
1230
-
const client = createClient({ url: 'http://0.0.0.0' });
1272
+
const client = createClient({
1273
+
url: 'http://0.0.0.0',
1274
+
exchanges: [],
1275
+
});
1231
1276
const { source: ops$, next } = makeSubject<Operation>();
1232
1277
1233
1278
const query = gql`
···
1393
1438
describe('schema awareness', () => {
1394
1439
it('reexecutes query and returns data on partial result', () => {
1395
1440
vi.useFakeTimers();
1396
-
const client = createClient({ url: 'http://0.0.0.0' });
1441
+
const client = createClient({
1442
+
url: 'http://0.0.0.0',
1443
+
exchanges: [],
1444
+
});
1397
1445
const { source: ops$, next } = makeSubject<Operation>();
1398
1446
const reexec = vi
1399
1447
.spyOn(client, 'reexecuteOperation')
···
1536
1584
1537
1585
it('reexecutes query and returns data on partial results for nullable lists', () => {
1538
1586
vi.useFakeTimers();
1539
-
const client = createClient({ url: 'http://0.0.0.0' });
1587
+
const client = createClient({
1588
+
url: 'http://0.0.0.0',
1589
+
exchanges: [],
1590
+
});
1540
1591
const { source: ops$, next } = makeSubject<Operation>();
1541
1592
const reexec = vi
1542
1593
.spyOn(client, 'reexecuteOperation')
···
1661
1712
const client = createClient({
1662
1713
url: 'http://0.0.0.0',
1663
1714
requestPolicy: 'cache-and-network',
1715
+
exchanges: [],
1664
1716
});
1665
1717
const { source: ops$, next: next } = makeSubject<Operation>();
1666
1718
const query = gql`
···
1746
1798
1747
1799
it('applies optimistic updates on top of commutative queries as query result comes in', () => {
1748
1800
let data: any;
1749
-
const client = createClient({ url: 'http://0.0.0.0' });
1801
+
const client = createClient({
1802
+
url: 'http://0.0.0.0',
1803
+
exchanges: [],
1804
+
});
1750
1805
const { source: ops$, next: nextOp } = makeSubject<Operation>();
1751
1806
const { source: res$, next: nextRes } = makeSubject<OperationResult>();
1752
1807
···
1836
1891
1837
1892
it('applies mutation results on top of commutative queries', () => {
1838
1893
let data: any;
1839
-
const client = createClient({ url: 'http://0.0.0.0' });
1894
+
const client = createClient({
1895
+
url: 'http://0.0.0.0',
1896
+
exchanges: [],
1897
+
});
1840
1898
const { source: ops$, next: nextOp } = makeSubject<Operation>();
1841
1899
const { source: res$, next: nextRes } = makeSubject<OperationResult>();
1842
1900
···
1952
2010
1953
2011
it('applies optimistic updates on top of commutative queries until mutation resolves', () => {
1954
2012
let data: any;
1955
-
const client = createClient({ url: 'http://0.0.0.0' });
2013
+
const client = createClient({
2014
+
url: 'http://0.0.0.0',
2015
+
exchanges: [],
2016
+
});
1956
2017
const { source: ops$, next: nextOp } = makeSubject<Operation>();
1957
2018
const { source: res$, next: nextRes } = makeSubject<OperationResult>();
1958
2019
···
2051
2112
2052
2113
it('allows subscription results to be commutative when necessary', () => {
2053
2114
let data: any;
2054
-
const client = createClient({ url: 'http://0.0.0.0' });
2115
+
const client = createClient({
2116
+
url: 'http://0.0.0.0',
2117
+
exchanges: [],
2118
+
});
2055
2119
const { source: ops$, next: nextOp } = makeSubject<Operation>();
2056
2120
const { source: res$, next: nextRes } = makeSubject<OperationResult>();
2057
2121
···
2146
2210
2147
2211
it('allows subscription results to be commutative above mutations', () => {
2148
2212
let data: any;
2149
-
const client = createClient({ url: 'http://0.0.0.0' });
2213
+
const client = createClient({
2214
+
url: 'http://0.0.0.0',
2215
+
exchanges: [],
2216
+
});
2150
2217
const { source: ops$, next: nextOp } = makeSubject<Operation>();
2151
2218
const { source: res$, next: nextRes } = makeSubject<OperationResult>();
2152
2219
···
2283
2350
let deferredData: any;
2284
2351
let combinedData: any;
2285
2352
2286
-
const client = createClient({ url: 'http://0.0.0.0' });
2353
+
const client = createClient({
2354
+
url: 'http://0.0.0.0',
2355
+
exchanges: [],
2356
+
});
2287
2357
const { source: ops$, next: nextOp } = makeSubject<Operation>();
2288
2358
const { source: res$, next: nextRes } = makeSubject<OperationResult>();
2289
2359
+8
-2
exchanges/graphcache/src/offlineExchange.test.ts
+8
-2
exchanges/graphcache/src/offlineExchange.test.ts
···
184
184
});
185
185
186
186
it('should intercept errored queries', async () => {
187
-
const client = createClient({ url: 'http://0.0.0.0' });
187
+
const client = createClient({
188
+
url: 'http://0.0.0.0',
189
+
exchanges: [],
190
+
});
188
191
const onlineSpy = vi
189
192
.spyOn(navigator, 'onLine', 'get')
190
193
.mockReturnValueOnce(false);
···
250
253
251
254
const onlineSpy = vi.spyOn(navigator, 'onLine', 'get');
252
255
253
-
const client = createClient({ url: 'http://0.0.0.0' });
256
+
const client = createClient({
257
+
url: 'http://0.0.0.0',
258
+
exchanges: [],
259
+
});
254
260
const reexecuteOperation = vi
255
261
.spyOn(client, 'reexecuteOperation')
256
262
.mockImplementation(() => undefined);
+4
-1
exchanges/refocus/src/refocusExchange.test.ts
+4
-1
exchanges/refocus/src/refocusExchange.test.ts
+4
-1
exchanges/request-policy/src/requestPolicyExchange.test.ts
+4
-1
exchanges/request-policy/src/requestPolicyExchange.test.ts
+4
-1
exchanges/retry/src/retryExchange.test.ts
+4
-1
exchanges/retry/src/retryExchange.test.ts
+7
-4
packages/core/src/client.test.ts
+7
-4
packages/core/src/client.test.ts
···
31
31
32
32
describe('createClient / Client', () => {
33
33
it('creates an instance of Client', () => {
34
-
expect(createClient({ url }) instanceof Client).toBeTruthy();
35
-
expect(new Client({ url }) instanceof Client).toBeTruthy();
34
+
expect(createClient({ url, exchanges: [] }) instanceof Client).toBeTruthy();
35
+
expect(new Client({ url, exchanges: [] }) instanceof Client).toBeTruthy();
36
36
});
37
37
38
38
it('passes snapshot', () => {
39
-
const client = createClient({ url });
39
+
const client = createClient({ url, exchanges: [] });
40
40
expect(client).toMatchSnapshot();
41
41
});
42
42
});
···
78
78
};
79
79
80
80
let receivedOps: Operation[] = [];
81
-
let client = createClient({ url: '1234' });
81
+
let client = createClient({
82
+
url: '1234',
83
+
exchanges: [],
84
+
});
82
85
const receiveMock = vi.fn((s: Source<Operation>) =>
83
86
pipe(
84
87
s,
+5
-8
packages/core/src/client.ts
+5
-8
packages/core/src/client.ts
···
23
23
24
24
import { DocumentNode } from 'graphql';
25
25
26
-
import { composeExchanges, defaultExchanges } from './exchanges';
26
+
import { composeExchanges } from './exchanges';
27
27
import { fallbackExchange } from './exchanges/fallback';
28
28
29
29
import {
···
111
111
* This is the basis for how `urql` handles GraphQL operations, and exchanges handle the creation, execution,
112
112
* and control flow of exchanges for the `Client`.
113
113
*
114
-
* When this option is left out, the `Client` defaults to a list of {@link defaultExchanges}. By default, these
115
-
* will implement deduping, caching (via a document cache), and fetching (GraphQL over HTTP).
114
+
* To easily get started you should consider using the {@link dedupExchange}, {@link cacheExchange} and {@link fetchExchange}
115
+
* these are all exported from the core package.
116
116
*
117
117
* @see {@link https://formidable.com/open-source/urql/docs/architecture/#the-client-and-exchanges} for more information
118
118
* on what `Exchange`s are and how they work.
119
119
*/
120
-
exchanges?: Exchange[];
120
+
exchanges: Exchange[];
121
121
/** A configuration flag indicating whether support for "Suspense" is activated.
122
122
*
123
123
* @remarks
···
812
812
dispatchDebug = next as ExchangeInput['dispatchDebug'];
813
813
}
814
814
815
-
const exchanges =
816
-
opts.exchanges !== undefined ? opts.exchanges : defaultExchanges;
817
-
818
815
// All exchange are composed into a single one and are called using the constructed client
819
816
// and the fallback exchange stream
820
-
const composedExchange = composeExchanges(exchanges);
817
+
const composedExchange = composeExchanges(opts.exchanges);
821
818
822
819
// All exchanges receive inputs using which they can forward operations to the next exchange
823
820
// and receive a stream of results in return, access the client, or dispatch debugging events
-15
packages/core/src/exchanges/index.ts
-15
packages/core/src/exchanges/index.ts
···
14
14
15
15
export { mapExchange, mapExchange as errorExchange } from './map';
16
16
export type { MapExchangeOpts } from './map';
17
-
18
-
import { cacheExchange } from './cache';
19
-
import { dedupExchange } from './dedup';
20
-
import { fetchExchange } from './fetch';
21
-
22
-
/** The default list of exchanges a `Client` falls back to.
23
-
*
24
-
* @remarks
25
-
* When {@link ClientOptions.exchanges} isn’s passed, a {@link Client} is automatically
26
-
* created using this list of default exchanges.
27
-
*
28
-
* By default, this adds deduplication of operations, a basic document cache,
29
-
* and the built-in fetch exchange for GraphQL over HTTP.
30
-
*/
31
-
export const defaultExchanges = [dedupExchange, cacheExchange, fetchExchange];
+15
-4
packages/next-urql/src/__tests__/with-urql-client.spec.ts
+15
-4
packages/next-urql/src/__tests__/with-urql-client.spec.ts
···
1
1
import React, { createElement as h } from 'react';
2
2
import { shallow, configure } from 'enzyme';
3
3
import Adapter from 'enzyme-adapter-react-16';
4
-
import { Client } from '@urql/core';
4
+
import {
5
+
Client,
6
+
dedupExchange,
7
+
fetchExchange,
8
+
cacheExchange,
9
+
} from '@urql/core';
5
10
import { vi, expect, it, beforeEach, describe, beforeAll } from 'vitest';
6
11
7
12
import { withUrqlClient } from '../with-urql-client';
···
26
31
27
32
describe('with client options', () => {
28
33
beforeEach(() => {
29
-
Component = withUrqlClient(() => ({ url: 'http://localhost:3000' }), {
30
-
ssr: true,
31
-
})(MockApp);
34
+
Component = withUrqlClient(
35
+
ssr => ({
36
+
url: 'http://localhost:3000',
37
+
exchanges: [dedupExchange, cacheExchange, ssr, fetchExchange],
38
+
}),
39
+
{
40
+
ssr: true,
41
+
}
42
+
)(MockApp);
32
43
});
33
44
34
45
const mockContext: NextUrqlPageContext = {
+2
-2
packages/preact-urql/README.md
+2
-2
packages/preact-urql/README.md
···
29
29
small example:
30
30
31
31
```jsx
32
-
import { createClient, defaultExchanges, Provider, useQuery } from '@urql/preact';
32
+
import { createClient, dedupExchange, cacheExchange, fetchExchange, Provider, useQuery } from '@urql/preact';
33
33
34
34
const client = createClient({
35
35
url: 'https://myHost/graphql',
36
-
exchanges: defaultExchanges,
36
+
exchanges: [dedupExchange, cacheExchange, fetchExchange],
37
37
});
38
38
39
39
const App = () => (
+15
-22
packages/preact-urql/src/context.ts
+15
-22
packages/preact-urql/src/context.ts
···
1
1
import { createContext } from 'preact';
2
2
import { useContext } from 'preact/hooks';
3
-
import { Client, createClient } from '@urql/core';
3
+
import { Client } from '@urql/core';
4
4
5
-
// We assume some default options here; mainly not to actually be used
6
-
// but not to error catastrophically if someone is just playing around
7
-
const defaultClient = createClient({ url: '/graphql' });
5
+
const OBJ = {};
6
+
export const Context: import('preact').Context<Client | object> = createContext(
7
+
OBJ
8
+
);
9
+
export const Provider: import('preact').Provider<Client | object> =
10
+
Context.Provider;
11
+
export const Consumer: import('preact').Consumer<Client | object> =
12
+
Context.Consumer;
8
13
9
-
export const Context = createContext<Client>(defaultClient);
10
-
export const Provider = Context.Provider;
11
-
export const Consumer = Context.Consumer;
12
14
Context.displayName = 'UrqlContext';
13
-
14
-
let hasWarnedAboutDefault = false;
15
15
16
16
export const useClient = (): Client => {
17
17
const client = useContext(Context);
18
18
19
-
if (
20
-
process.env.NODE_ENV !== 'production' &&
21
-
client === defaultClient &&
22
-
!hasWarnedAboutDefault
23
-
) {
24
-
hasWarnedAboutDefault = true;
19
+
if (client === OBJ && process.env.NODE_ENV !== 'production') {
20
+
const error =
21
+
"No client has been specified using urql's Provider. please create a client and add a Provider.";
25
22
26
-
console.warn(
27
-
"Default Client: No client has been specified using urql's Provider." +
28
-
'This means that urql will be falling back to defaults including making ' +
29
-
'requests to `/graphql`.\n' +
30
-
"If that's not what you want, please create a client and add a Provider."
31
-
);
23
+
console.error(error);
24
+
throw new Error(error);
32
25
}
33
26
34
-
return client;
27
+
return client as Client;
35
28
};
+14
-24
packages/react-urql/src/context.ts
+14
-24
packages/react-urql/src/context.ts
···
1
1
import { createContext, useContext } from 'react';
2
-
import { Client, createClient } from '@urql/core';
3
-
4
-
// We assume some default options here; mainly not to actually be used
5
-
// but not to error catastrophically if someone is just playing around
6
-
const defaultClient = createClient({ url: '/graphql' });
2
+
import { Client } from '@urql/core';
7
3
8
-
export const Context: import('react').Context<Client> = createContext(
9
-
defaultClient
4
+
const OBJ = {};
5
+
export const Context: import('react').Context<Client | object> = createContext(
6
+
OBJ
10
7
);
11
-
export const Provider: import('react').Provider<Client> = Context.Provider;
12
-
export const Consumer: import('react').Consumer<Client> = Context.Consumer;
8
+
export const Provider: import('react').Provider<Client | object> =
9
+
Context.Provider;
10
+
export const Consumer: import('react').Consumer<Client | object> =
11
+
Context.Consumer;
13
12
14
13
Context.displayName = 'UrqlContext';
15
-
16
-
let hasWarnedAboutDefault = false;
17
14
18
15
export const useClient = (): Client => {
19
16
const client = useContext(Context);
20
17
21
-
if (
22
-
process.env.NODE_ENV !== 'production' &&
23
-
client === defaultClient &&
24
-
!hasWarnedAboutDefault
25
-
) {
26
-
hasWarnedAboutDefault = true;
18
+
if (client === OBJ && process.env.NODE_ENV !== 'production') {
19
+
const error =
20
+
"No client has been specified using urql's Provider. please create a client and add a Provider.";
27
21
28
-
console.warn(
29
-
"Default Client: No client has been specified using urql's Provider." +
30
-
'This means that urql will be falling back to defaults including making ' +
31
-
'requests to `/graphql`.\n' +
32
-
"If that's not what you want, please create a client and add a Provider."
33
-
);
22
+
console.error(error);
23
+
throw new Error(error);
34
24
}
35
25
36
-
return client;
26
+
return client as Client;
37
27
};