URQL
安装
您必须安装 jotai-urql
、@urql/core
和 wonka
才能使用集成。
yarn add jotai-urql @urql/core wonka
导出函数
- client.query 的
atomsWithQuery
- client.mutation 的
atomsWithMutation
- client.subscription 的
atomsWithSubscription
所有三个函数都遵循相同的签名。
const [dataAtom, statusAtom] = atomsWithSomething(query,getVariables,getContext,getClient);
前三个参数将是这些函数的参数(对于 mutation,它是空的)。
最后一个可选的 getClient
参数是一个返回 Client 的函数。
返回值有两个原子。
第一个称为 dataAtom
,它是来自观察者的数据的原子。 dataAtom
需要 Suspense。
第二个称为 statusAtom
,它是来自观察者的完整结果的原子。 statusAtom
不需要 Suspnse。
来自观察者的数据也包含在 statusAtom
中,所以如果你不使用 Suspense,你不需要使用 dataAtom
。
atomsWithQuery
atomsWithQuery
使用查询创建新原子。 它在内部使用 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("{ user { first_name last_name } }", // query(get) => ({ id: get(idAtom) }), // variablesundefined, // context() => client);const UserData = () => {const [{ data }] = useAtom(userAtom);return <div>{JSON.stringify(data)}</div>;};
示例
基础演示
FIXME: 更新演示
atomsWithMutation
atomsWithMutation
创建具有 mutation 的新原子。 它在内部使用 client.mutation。
import { useAtom } from "jotai";import { createClient } from "@urql/core";import { atomsWithMutation } from "jotai-urql";const client = createClient({ url: "..." });const [fooAtom] = atomsWithMutation(() => client);const FooData = () => {const [{ data }, mutate] = useAtom(fooAtom);return (<div>{JSON.stringify(data)}{" "}<buttononClick={() =>mutate({ query: "mutation Foo { text }", variables: {} })}>Click me</button></div>);};
示例
TODO: 创建示例
atomsWithSubscription
atomsWithSubscription
通过订阅创建新原子。 它在内部使用 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 }", // query() => ({}), // variablesundefined, // context() => client);const FooData = () => {const [{ data }] = useAtom(fooAtom);return <div>{JSON.stringify(data)}</div>;};
示例
TODO: 创建示例