From 96351fdcd7d5f7cfad9a3c627e36658e169dce55 Mon Sep 17 00:00:00 2001 From: jdecroock Date: Mon, 13 Mar 2023 11:44:55 +0100 Subject: [PATCH] update docs --- docs/advanced/subscriptions.md | 6 ++++-- docs/api/core.md | 2 +- docs/basics/core.md | 12 +++++------- docs/basics/react-preact.md | 8 ++++++-- docs/basics/svelte.md | 8 ++++++-- docs/basics/vue.md | 10 +++++++--- 6 files changed, 29 insertions(+), 17 deletions(-) diff --git a/docs/advanced/subscriptions.md b/docs/advanced/subscriptions.md index 96df7a5c4e..ce290cab04 100644 --- 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 index b417e9b85d..79aa20d988 100644 --- 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 index 295aca9e5c..11742e5b61 100644 --- 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 index 3b20dc3483..269b519876 100644 --- 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 index 0e884e6635..f2da40d149 100644 --- 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