urql.mdx

title	description	nav
URQL	This doc describes URQL integration.	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
• atomsWithMutation for client.mutation
• atomsWithSubscription for client.subscription

All three functions follow the same signature.

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.

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.

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 <div>{JSON.stringify(data)}</div>
}

Examples

Basic demo

FIXME: Update demo

atomsWithMutation

atomsWithMutation creates new atoms with a mutation. It internally uses client.mutation.

import { useAtom } from 'jotai'
import { createClient } from '@urql/core'
import { atomsWithMutation } from 'jotai-urql'

const client = createClient({ url: '...' })

const [fooAtom] = atomsWithMutation(
  () => '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: create example

atomsWithSubscription

atomsWithSubscription creates new atoms with a subscription. It internally uses client.subscription.

import { useAtom } from 'jotai'
import { createClient } from '@urql/core'
import { atomsWithSubscription } from 'jotai-urql'

const client = createClient({ url: '...' })

const [fooAtom] = atomsWithSubscription(
  () => 'subscription Foo { text }',
  () => client
)

const FooData = () => {
  const [{ data }] = useAtom(fooAtom)
  return <div>{JSON.stringify(data)}</div>
}

Examples

TODO: create example