urql.mdx

title	description	nav
URQL	This doc describes `jotai/urql` bundle.	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.

import { 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

atomWithMutation

atomWithMutation creates a new atom with a mutation. It internally uses client.mutation.

import { 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.

import { 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