update docs

urql-graphql · Mar 13, 2023 · 96351fd · 96351fd
1 parent 2ac9b1e
commit 96351fd
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 17 deletions.
diff --git a/docs/advanced/subscriptions.md b/docs/advanced/subscriptions.md
@@ -45,7 +45,7 @@ object with a `.subscribe()` method accepting an observer.
 For backends supporting `graphql-ws`, we recommend using the [graphql-ws](https://github.com/enisdenjo/graphql-ws) client.
 
 ```js
-import { createClient, defaultExchanges, subscriptionExchange } from 'urql';
+import { createClient, dedupExchange, cacheExchange, fetchExchange, subscriptionExchange } from 'urql';
 import { createClient as createWSClient } from 'graphql-ws';
 
 const wsClient = createWSClient({
@@ -55,7 +55,9 @@ const wsClient = createWSClient({
 const client = createClient({
   url: '/graphql',
   exchanges: [
-    ...defaultExchanges,
+    dedupExchange,
+    cacheExchange,
+    fetchExchange,
     subscriptionExchange({
       forwardSubscription: (operation) => ({
         subscribe: (sink) => ({

diff --git a/docs/api/core.md b/docs/api/core.md
@@ -22,7 +22,7 @@ It accepts several options on creation.
 
 | Input             | Type                                        | Description                                                                                                                                                                                                                                                                                                    |
 | ----------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `exchanges`       | `Exchange[]`                                | An array of `Exchange`s that the client should use instead of the list of `defaultExchanges`                                                                                                                                                                                                                   |
+| `exchanges`       | `Exchange[]`                                | An array of `Exchange`s that the client should use                                                                                                                                                                                                                   |
 | `url`             | `string`                                    | The GraphQL API URL as used by `fetchExchange`                                                                                                                                                                                                                                                                 |
 | `fetchOptions`    | `RequestInit \| () => RequestInit`          | Additional `fetchOptions` that `fetch` in `fetchExchange` should use to make a request                                                                                                                                                                                                                         |
 | `fetch`           | `typeof fetch`                              | An alternative implementation of `fetch` that will be used by the `fetchExchange` instead of `window.fetch`                                                                                                                                                                                                    |

diff --git a/docs/basics/core.md b/docs/basics/core.md
@@ -134,10 +134,11 @@ The `@urql/core` package exports a function called `createClient` which we can u
 create the GraphQL client. This central `Client` manages all of our GraphQL requests and results.
 
 ```js
-import { createClient } from '@urql/core';
+import { createClient, dedupExchange, cacheExchange, fetchExchange } from '@urql/core';
 
 const client = createClient({
   url: 'http://localhost:3000/graphql',
+  exchanges: [dedupExchange, cacheExchange, fetchExchange],
 });
 ```
 
@@ -153,6 +154,7 @@ GraphQL API.
 ```js
 const client = createClient({
   url: 'http://localhost:3000/graphql',
+  exchanges: [dedupExchange, cacheExchange, fetchExchange],
   fetchOptions: () => {
     const token = getToken();
     return {
@@ -168,17 +170,13 @@ As we've seen above, the most important option for the `Client` is `url`, since
 without it. However, another important option on the `Client` is the `exchanges` option.
 
 This option passes a list of exchanges to the `Client`, which tell it how to execute our requests
-and how to cache data in a certain order. By default, this will be populated with the list of
-`defaultExchanges`.
+and how to cache data in a certain order.
 
 ```js
-import { createClient, defaultExchanges } from '@urql/core';
+import { createClient, dedupExchange, cacheExchange, fetchExchange } from '@urql/core';
 
 const client = createClient({
   url: 'http://localhost:3000/graphql',
-  // the default:
-  exchanges: defaultExchanges,
-  // the same as:
   exchanges: [dedupExchange, cacheExchange, fetchExchange],
 });
 ```

diff --git a/docs/basics/react-preact.md b/docs/basics/react-preact.md
@@ -41,10 +41,11 @@ The `urql` and `@urql/preact` packages export a method called `createClient` whi
 create the GraphQL client. This central `Client` manages all of our GraphQL requests and results.
 
 ```js
-import { createClient } from 'urql';
+import { createClient, dedupExchange, cacheExchange, fetchExchange } from 'urql';
 
 const client = createClient({
   url: 'http://localhost:3000/graphql',
+  exchanges: [dedupExchange, cacheExchange, fetchExchange],
 });
 ```
 
@@ -60,6 +61,7 @@ GraphQL API.
 ```js
 const client = createClient({
   url: 'http://localhost:3000/graphql',
+  exchanges: [dedupExchange, cacheExchange, fetchExchange],
   fetchOptions: () => {
     const token = getToken();
     return {
@@ -76,10 +78,11 @@ To make use of the `Client` in React & Preact we will have to provide it via the
 the `Provider` export.
 
 ```jsx
-import { createClient, Provider } from 'urql';
+import { createClient, Provider, dedupExchange, cacheExchange, fetchExchange } from 'urql';
 
 const client = createClient({
   url: 'http://localhost:3000/graphql',
+  exchanges: [dedupExchange, cacheExchange, fetchExchange],
 });
 
 const App = () => (
@@ -245,6 +248,7 @@ import { createClient } from 'urql';
 
 const client = createClient({
   url: 'http://localhost:3000/graphql',
+  exchanges: [dedupExchange, cacheExchange, fetchExchange],
   // every operation will by default use cache-and-network rather
   // than cache-first now:
   requestPolicy: 'cache-and-network',

diff --git a/docs/basics/svelte.md b/docs/basics/svelte.md
@@ -48,10 +48,11 @@ The `@urql/svelte` package exports a method called `createClient` which we can u
 the GraphQL client. This central `Client` manages all of our GraphQL requests and results.
 
 ```js
-import { createClient } from '@urql/svelte';
+import { createClient, dedupExchange, cacheExchange, fetchExchange } from '@urql/svelte';
 
 const client = createClient({
   url: 'http://localhost:3000/graphql',
+  exchanges: [dedupExchange, cacheExchange, fetchExchange],
 });
 ```
 
@@ -67,6 +68,7 @@ GraphQL API.
 ```js
 const client = createClient({
   url: 'http://localhost:3000/graphql',
+  exchanges: [dedupExchange, cacheExchange, fetchExchange],
   fetchOptions: () => {
     const token = getToken();
     return {
@@ -85,10 +87,11 @@ components. This will share one `Client` with the rest of our app, if we for ins
 
 ```html
 <script>
-  import { createClient, setContextClient } from '@urql/svelte';
+  import { createClient, setContextClient, dedupExchange, cacheExchange, fetchExchange } from '@urql/svelte';
 
   const client = createClient({
     url: 'http://localhost:3000/graphql',
+    exchanges: [dedupExchange, cacheExchange, fetchExchange],
   });
 
   setContextClient(client);
@@ -292,6 +295,7 @@ import { createClient } from '@urql/svelte';
 
 const client = createClient({
   url: 'http://localhost:3000/graphql',
+    exchanges: [dedupExchange, cacheExchange, fetchExchange],
   // every operation will by default use cache-and-network rather
   // than cache-first now:
   requestPolicy: 'cache-and-network',

diff --git a/docs/basics/vue.md b/docs/basics/vue.md
@@ -37,10 +37,11 @@ The `@urql/vue` package exports a method called `createClient` which we can use
 the GraphQL client. This central `Client` manages all of our GraphQL requests and results.
 
 ```js
-import { createClient } from '@urql/vue';
+import { createClient, dedupExchange, cacheExchange, fetchExchange } from '@urql/vue';
 
 const client = createClient({
   url: 'http://localhost:3000/graphql',
+  exchanges: [dedupExchange, cacheExchange, fetchExchange],
 });
 ```
 
@@ -56,6 +57,7 @@ GraphQL API.
 ```js
 const client = createClient({
   url: 'http://localhost:3000/graphql',
+  exchanges: [dedupExchange, cacheExchange, fetchExchange],
   fetchOptions: () => {
     const token = getToken();
     return {
@@ -77,10 +79,11 @@ your parent components and accepts either a `Client` directly or just the option
 
 ```html
 <script>
-  import { createClient, provideClient } from '@urql/vue';
+  import { createClient, provideClient, dedupExchange, cacheExchange, fetchExchange } from '@urql/vue';
 
   const client = createClient({
     url: 'http://localhost:3000/graphql',
+    exchanges: [dedupExchange, cacheExchange, fetchExchange],
   });
 
   provideClient(client);
@@ -361,10 +364,11 @@ provides metadata apart from the usual `query` and `variables` we may pass. This
 we may also change the `Client`'s default `requestPolicy` by passing it there.
 
 ```js
-import { createClient } from '@urql/vue';
+import { createClient, dedupExchange, cacheExchange, fetchExchange } from '@urql/vue';
 
 const client = createClient({
   url: 'http://localhost:3000/graphql',
+  exchanges: [dedupExchange, cacheExchange, fetchExchange],
   // every operation will by default use cache-and-network rather
   // than cache-first now:
   requestPolicy: 'cache-and-network',