--- title: URQL description: This doc describes URQL integration. nav: 4.08 --- ## Install You have to install `jotai-urql`, `@urql/core` and `wonka` to use the integration. ``` yarn add jotai-urql @urql/core wonka ``` ## Exported functions - `atomsWithQuery` for [client.query](https://formidable.com/open-source/urql/docs/api/core/#clientquery) - `atomsWithMutation` for [client.mutation](https://formidable.com/open-source/urql/docs/api/core/#clientmutation) - `atomsWithSubscription` for [client.subscription](https://formidable.com/open-source/urql/docs/api/core/#clientsubscription) All three functions follow the same signature. ```ts const [dataAtom, statusAtom] = atomsWithSomething(getArgs, getClient) ``` The first `getArgs` parameter is a function that returns an array of arguments to those functions. The second optional `getClient` parameter is a function that returns [Client](https://formidable.com/open-source/urql/docs/api/core/#client). The return values have two atoms. The first one is called `dataAtom` and it's an atom for the data from the observer. `dataAtom` requires Suspense. The second one is called `statusAtom` and it's an atom for the full result from the observer. `statusAtom` doesn't require Suspnse. The data from the observer is also included in `statusAtom`, so if you don't use Suspense, you don't need to use `dataAtom`. ## atomsWithQuery `atomsWithQuery` creates new atoms with a query. It internally uses [client.query](https://formidable.com/open-source/urql/docs/api/core/#clientquery). ```jsx import { useAtom } from 'jotai' import { createClient } from '@urql/core' import { atomsWithQuery } from 'jotai-urql' const client = createClient({ url: '...' }) const idAtom = atom(1) const [userAtom] = atomsWithQuery( (get) => ({ query: '{ user { first_name last_name } }', variables: { id: get(idAtom) }, }), () => client ) const UserData = () => { const [{ data }] = useAtom(userAtom) return