1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
---title: URQLdescription: This doc describes `jotai/urql` bundle.nav: 4.08---
## Install
You have to install `@urql/core` and `wonka` to access this bundle and its functions.
```yarn add @urql/core wonka```
## atomWithQuery
`atomWithQuery` creates a new atom with a query. It internally uses [client.query](https://formidable.com/open-source/urql/docs/api/core/#clientquery).
```jsximport { useAtom } from 'jotai'import { createClient } from '@urql/core'import { atomWithQuery } from 'jotai/urql'
const client = createClient({ url: '...' })
const idAtom = atom(1)const userAtom = atomWithQuery(  (get) => ({    query: '{ user { first_name last_name } }',    variables: { id: get(idAtom) },  }),  () => client)
const UserData = () => {  const [{ data }] = useAtom(userAtom)  return <div>{JSON.stringify(data)}</div>}```
### Examples
#### Basic demo
<CodeSandbox id="zujf6" />## atomWithMutation
`atomWithMutation` creates a new atom with a mutation. It internally uses [client.mutation](https://formidable.com/open-source/urql/docs/api/core/#clientmutation).
```jsximport { useAtom } from 'jotai'import { createClient } from '@urql/core'import { atomWithMutation } from 'jotai/urql'
const client = createClient({ url: '...' })
const fooAtom = atomWithMutation(  () => 'mutation Foo { text }',  () => client)
const FooData = () => {  const [{ data }, mutate] = useAtom(fooAtom)  return (    <div>      {JSON.stringify(data)} <button onClick={mutate}>Click me</button>    </div>  )}```
### Examples
TODO
## atomWithSubscription
`atomWithSubscription` creates a new atom with a mutation. It internally uses [client.subscription](https://formidable.com/open-source/urql/docs/api/core/#clientsubscription).
```jsximport { useAtom } from 'jotai'import { createClient } from '@urql/core'import { atomWithSubscription } from 'jotai/urql'
const client = createClient({ url: '...' })
const fooAtom = atomWithSubscription(  () => 'subscription Foo { text }',  () => client)
const FooData = () => {  const [{ data }] = useAtom(fooAtom)  return <div>{JSON.stringify(data)}</div>}```
### Examples
TODO