JotaiJotai

상태
React를 위한 기본적이고 유연한 상태 관리

tRPC

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

설치

이 확장 기능을 사용하려면 jotai-trpc, @trpc/client, @trpc/server를 설치해야 합니다.

npm install jotai-trpc @trpc/client @trpc/server

사용법

import { createTRPCJotai } from 'jotai-trpc'


const trpc = createTRPCJotai<MyRouter>({
  links: [
    httpLink({
      url: myUrl,
    }),
  ],
})


const idAtom = atom('foo')
const queryAtom = trpc.bar.baz.atomWithQuery((get) => get(idAtom))

atomWithQuery

...atomWithQuery는 "쿼리"를 사용하여 새로운 아톰을 생성합니다. 내부적으로 Vanilla Client의 ...query 프로시저를 사용합니다.

import { atom, useAtom } from 'jotai'
import { httpLink } from '@trpc/client'
import { createTRPCJotai } from 'jotai-trpc'
import { trpcPokemonUrl } from 'trpc-pokemon'
import type { PokemonRouter } from 'trpc-pokemon'


const trpc = createTRPCJotai<PokemonRouter>({
  links: [
    httpLink({
      url: trpcPokemonUrl,
    }),
  ],
})


const NAMES = [
  'bulbasaur',
  'ivysaur',
  'venusaur',
  'charmander',
  'charmeleon',
  'charizard',
  'squirtle',
  'wartortle',
  'blastoise',
]


const nameAtom = atom(NAMES[0])


const pokemonAtom = trpc.pokemon.byId.atomWithQuery((get) => get(nameAtom))


const Pokemon = () => {
  const [data, refresh] = useAtom(pokemonAtom)
  return (
    <div>
      <div>ID: {data.id}</div>
      <div>Height: {data.height}</div>
      <div>Weight: {data.weight}</div>
      <button onClick={refresh}>Refresh</button>
    </div>
  )
}

예제

atomWithMutation

...atomWithMutation는 "mutate" 기능을 가진 새로운 아톰을 생성합니다. 내부적으로 Vanilla Client의 ...mutate 프로시저를 사용합니다.

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

atomWithSubscription

...atomWithSubscription는 "subscribe" 기능을 가진 새로운 아톰을 생성합니다. 내부적으로 Vanilla Client의 ...subscribe 프로시저를 사용합니다.

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

GitHubnpm