Jotai

React 原始而灵活的状态管理

Relay

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

安装

你需要安装 jotai-relay 和 relay-runtime。

npm i jotai-relay relay-runtime

使用

查看 Relay 文档以了解基础知识以及如何提前使用编译器。

atomWithQuery

atomWithQuery 使用 fetchQuery 创建一个新的 atom。

import React, { Suspense } from 'react'
import { Provider, useAtom } from 'jotai'
import { useHydrateAtoms } from 'jotai/utils'
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 HydrateAtoms = ({ children }) => {
  useHydrateAtoms([[environmentAtom, myEnvironment]])
  return children
}

const App = () => {
  return (
    <Provider>
      <HydrateAtoms>
        <Suspense fallback="Loading...">
          <Main />
        </Suspense>
      </HydrateAtoms>
    </Provider>
  )
}

示例

atomWithMutation

atomWithMutation 使用 commitMutation 创建一个新的 atom。

待修复：添加代码示例和 codesandbox

atomWithSubscription

atomWithSubscription 使用 requestSubscription 创建一个新的 atom。