JotaiJotai

状態
原始和灵活的 React 状态管理

URQL

安装

您必须安装 jotai-urql@urql/corewonka 才能使用集成。

yarn add jotai-urql @urql/core wonka

导出函数

所有三个函数都遵循相同的签名。

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) }), // variables
undefined, // 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)}{" "}
<button
onClick={() =>
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
() => ({}), // variables
undefined, // context
() => client
);
const FooData = () => {
const [{ data }] = useAtom(fooAtom);
return <div>{JSON.stringify(data)}</div>;
};

示例

TODO: 创建示例