TanStack Query
TanStack Query 提供了一组用于管理异步状态(通常是外部数据)的函数。
来自概述文档:
React Query 通常被描述为 React 缺少的数据获取库,但在更专业的术语中,它使 React 应用程序中的 获取、缓存、同步和更新服务器状态 变得轻而易举。
jotai-tanstack-query 是一个用于 TanStack Query 的 Jotai 集成库。 它为所有 TanStack 查询功能提供了一个美妙的界面,使您能够将这些功能与现有的 Jotai 状态结合使用。
安装
除了 jotai
之外,您还必须安装 jotai-tanstack-query
和 @tanstack/query-core
才能使用集成。
yarn add jotai-tanstack-query @tanstack/query-core
导出函数
- QueryObserver 的
atomsWithQuery
- InfiniteQueryObserver 的
atomsWithInfiniteQuery
- MutationObserver 的
atomsWithMutation
所有三个函数都遵循相同的签名。
const [dataAtom, statusAtom] = atomsWithSomething(getOptions, getQueryClient);
第一个 getOptions
参数是一个将输入返回给观察者的函数。
第二个可选的 getQueryClient
参数是一个返回 QueryClient 的函数。
返回值有两个原子。
第一个称为 dataAtom
,它是来自观察者的数据的原子。 dataAtom
需要 Suspense。
第二个称为 statusAtom
,它是来自观察者的完整结果的原子。 statusAtom
不需要 Suspense。
来自观察者的数据也包含在 statusAtom
中,因此如果您不使用 Suspense,则不需要使用 dataAtom。
atomsWithQuery
使用
atomsWithQuery
从 TanStack Query 创建实现标准 Query
的新原子。
查询是对绑定到唯一键的异步数据源的声明性依赖。 查询可以与任何基于 Promise 的方法(包括 GET 和 POST 方法)一起使用以从服务器获取数据。
import { atom, useAtom } from "jotai";import { atomsWithQuery } from "jotai-tanstack-query";const idAtom = atom(1);const [userAtom] = atomsWithQuery((get) => ({queryKey: ["users", get(idAtom)],queryFn: async ({ queryKey: [, id] }) => {const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);return res.json();},}));const UserData = () => {const [data] = useAtom(userAtom);return <div>{JSON.stringify(data)}</div>;};
atomsWithInfiniteQuery
使用
atomsWithInfiniteQuery
与 atomsWithQuery
非常相似,但它适用于 InfiniteQuery
,用于要分页的数据。 您可以在此处阅读有关无限查询的更多信息。
可以将 更多数据 加载到现有数据集或 无限滚动 中的渲染列表也是一种非常常见的 UI 模式。 React Query 支持一个有用的 useQuery 版本,称为 useInfiniteQuery 用于查询这些类型的列表。
标准查询原子之间的一个显着区别是附加选项 getNextPageParam
和 getPreviousPageParam
,您将使用它们来指示查询如何获取任何其他页面。
import { atom, useAtom } from "jotai";import { atomsWithInfiniteQuery } from "jotai-tanstack-query";const idAtom = atom(1);const [userAtom] = atomsWithInfiniteQuery((get) => ({queryKey: ["users", get(idAtom)],queryFn: async ({ queryKey: [, id] }) => {const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);return res.json();},// 无限查询可以支持分页 fetchgetNextPageParam: (lastPage, pages) => lastPage.nextCursor,}));const UserData = () => {const [data] = useAtom(userAtom);return data.pages.map((userData, index) => (<div key={index}>{JSON.stringify(userData)}</div>));};