여러분은 Relay와 함께 Jotai를 사용할 수 있습니다.

설치

jotai-relay와 relay-runtime을 설치해야 합니다.

npm install jotai-relay relay-runtime

사용법

기본 개념과 컴파일러 사용법을 미리 알아보려면 Relay 문서를 참고하세요.

atomWithQuery

atomWithQuery는 fetchQuery를 사용하여 새로운 아톰을 생성합니다.

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을 사용하여 새로운 아톰을 생성합니다.

FIXME: 코드 예제와 코드샌드박스 추가 필요

atomWithSubscription

atomWithSubscription은 requestSubscription을 사용하여 새로운 아톰을 생성합니다.

FIXME: 코드 예제와 CodeSandbox 추가 필요