feat: jotai/urql

[dai-shi]

close #427

• atomWithQuery
• atomWithMutation
• atomWithSubscription
• tests
• examples
• docs

---

title: URQL
description: This doc describes jotai/urql bundle.

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

https://codesandbox.io/s/react-typescript-forked-zujf6?file=/src/App.tsx
<Codesandbox id="zujf6" />

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

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/pmndrs/jotai/6fQELC62q11qdCEbZHBNMeimVk96
✅ Preview: https://jotai-git-feat-urql-pmndrs.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 856879b:

Sandbox	Source
React	Configuration
React Typescript	Configuration
React Typescript (forked)	PR

[dai-shi]

@kitten I think I'm done with atomWithQuery.

[dai-shi]

I think it's better to pass client directly to atomWithQuery.

const client = createClient(...)

const anAtom = atomWithQuery(client, () => ({ query: ... }))

[dai-shi]

https://codesandbox.io/s/react-typescript-forked-pqpof?file=/src/App.tsx

Hmm, having client static isn't very nice. Put it in the args???

[dai-shi]

https://codesandbox.io/s/react-typescript-forked-yqboc?file=/src/App.tsx
I put separately as getClient.

[dai-shi]

Hmm, I wonder how to create examples for mutation and subscription. Are there any dummy servers? Well, the initial release can be atomWithQuery only...

[kitten]

@dai-shi Yes! we've got multiple example schemas up at trygql.formidable.dev; The examples folder in the urql repo shows us using some of them

[dai-shi]

Okay, I will release this. I'm still not confident if this is stable and will note "may contain bugs, api may change". But, unless we release it we wouldn't get enough feedback.