Jotai

状態

原始和灵活的 React 状态管理

Relay

您可以将 Jotai 与 Relay 一起使用。

安装

你必须安装 jotai-relay 和 relay-runtime。

yarn add jotai-relay relay-runtime

使用

请参阅 Relay Docs 以了解基础知识以及如何提前使用编译器。

atomWithQuery

atomWithQuery 使用 fetchQuery 创建一个新原子。

import React, { Suspense } from "react";
import { Provider, useAtom } from "jotai";
import { environmentAtom, atomWithQuery } from "jotai-relay";
import { Environment, Network, RecordSource, Store } from "relay-runtime";
import graphql from "babel-plugin-relay/macro";

const myEnvironment = new Environment({
  network: Network.create(async (params, variables) => {
    const response = await fetch("https://countries.trevorblades.com/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        query: params.text,
        variables,
      }),
    });
    return response.json();
  }),
  store: new Store(new RecordSource()),
});

const countriesAtom = atomWithQuery(
  graphql`
    query AppCountriesQuery {
      countries {
        name
      }
    }
  `,
  () => ({})
);

const Main = () => {
  const [data] = useAtom(countriesAtom);
  return (
    <ul>
      {data.countries.map(({ name }) => (
        <li key={name}>{name}</li>
      ))}
    </ul>
  );
};

const App = () => {
  return (
    <Provider initialValues={[[environmentAtom, myEnvironment]]}>
      <Suspense fallback="Loading...">
        <Main />
      </Suspense>
    </Provider>
  );
};

示例

atomWithMutation

atomWithMutation 使用 commitMutation 创建一个新原子。

FIXME: 添加代码示例和 codesandbox

atomWithSubscription

atomWithSubscription 使用 requestSubscription 创建一个新原子。