kitten.sh
1<h2 align="center">@urql/exchange-execute</h2>
2
3<p align="center"><strong>An exchange for executing queries against a local schema in <code>urql</code></strong></p>
4
5`@urql/exchange-execute` is an exchange for the [`urql`](https://github.com/urql-graphql/urql) GraphQL client which executes queries against a local schema.
6This is a replacement for the default _fetchExchange_ which sends queries over HTTP/S to be executed remotely.
7
8## Quick Start Guide
9
10First install `@urql/exchange-execute` alongside `urql`:
11
12```sh
13yarn add @urql/exchange-execute
14# or
15npm install --save @urql/exchange-execute
16```
17
18You'll then need to add the `executeExchange`, that this package exposes, to your `urql` Client,
19by replacing the default fetch exchange with it:
20
21```js
22import { createClient, cacheExchange } from 'urql';
23import { executeExchange } from '@urql/exchange-execute';
24
25const client = createClient({
26 url: 'http://localhost:1234/graphql',
27 exchanges: [
28 cacheExchange,
29 // Replace the default fetchExchange with the new one.
30 executeExchange({
31 /* config */
32 }),
33 ],
34});
35```
36
37## Usage
38
39The exchange takes the same arguments as the [_execute_ function](https://graphql.org/graphql-js/execution/#execute) provided by graphql-js.
40
41Here's a brief example of how it might be used:
42
43```js
44import { buildSchema } from 'graphql';
45
46// Create local schema
47const schema = buildSchema(`
48 type Todo {
49 id: ID!
50 text: String!
51 }
52
53 type Query {
54 todos: [Todo]!
55 }
56
57 type Mutation {
58 addTodo(text: String!): Todo!
59 }
60`);
61
62// Create local state
63let todos = [];
64
65// Create root value with resolvers
66const rootValue = {
67 todos: () => todos,
68 addTodo: (_, args) => {
69 const todo = { id: todos.length.toString(), ...args };
70 todos = [...todos, todo];
71 return todo;
72 }
73}
74
75// ...
76
77// Pass schema and root value to executeExchange
78executeExchange({
79 schema,
80 rootValue,
81}),
82// ...
83```