JotaiJotai

状態
Primitive and flexible state management for React

tRPC

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

安装

您必须安装 jotai-trpc@trpc/client@trpc/server 才能使用集成。

yarn add 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] = useAtom(pokemonAtom);
return (
<div>
<div>ID: {data.id}</div>
<div>Height: {data.height}</div>
<div>Weight: {data.weight}</div>
</div>
);
};

示例

atomWithMutation

...atomWithMutation 创建一个带有“mutate”的新原子。 它在内部使用 Vanilla Client...mutate 过程。

FIXME: 添加代码示例和 codesandbox

atomWithSubscription

...atomWithSubscription 创建一个带有“订阅”的新原子。 它在内部使用 Vanilla Client...subscribe 过程。

FIXME: 添加代码示例和 codesandbox