Jotai

状態

原始和灵活的 React 状态管理

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) }), // 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: 创建示例

JotaiJotai

URQL

Jotai