TanStack Query 入门食用指南 ​

对常见的请求场景进行一个封装，可以跨组件的管理请求状态，并且支持多个框架版本。

由于V5版本只有纯英文文档，因此在进行阅读后记录它的基本用法，哪天用到了可以快速使用。

本篇记录的是react-query的用法，其它版本大差不差。

QueryClient && QueryClientProvider ​

const queryClient = new QueryClient()

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App/>
    </QueryClientProvider>
  </React.StrictMode>,
)

实例化QueryClient类，此处可传递全局配置。

使用QueryClientProvider组件注入后，所有子组件就可以通过useQueryClient来进行跨组件操作。

useQuery ​

query一般用于get请求的场景，页面加载就可以发起请求。

const [enabled, setEnabled] = useState(false)

const { isPending, isFetching, isLoading, data, refetch } = useQuery({
  // 这里可以放不同的数据类型，一般可以将组件的state放进去
  queryKey: ['useQuery'],
  // 这里会传入一些参数
  queryFn: ({ queryKey }) => axios().then((response) => {
    // 这里需要自行处理response得到的数据，最后就会放到data中
    return response
  }),
  enabled,
  placeholderData: keepPreviousData,
  initialData: initialData
})

• queryFn为请求函数，无论是使用fetch还是axios只要是返回Promise都可以使用。在调用queryFn时，queryKey会作为参数上下文中的queryKey传给queryFn。 当需要将请求状态更改为error状态时可以在Promise内返回reject或throw new Error。

• queryKey可以用于在其它地方通过queryClient调用或通过其定义的queryKey在变更时重新发起请求，queryKey的数组内支持数字，字符串以及可序列化的对象。

• useQuery会返回请求的状态以及数据源，这里需要注意isPending和isFetching的区别，isPending和devtools/network的pending不同， 它代表的是数据的获取状态，isFetching才是请求的状态。isLoading是isPending && isFetching的计算值，一般用于惰性发起请求。

惰性请求 ​

• 当需要惰性（也可以说是根据条件决定）发起请求时，可以定义enabled为组件的state，然后将state放入queryKey当中，也可以从useQuery内使用refetch来手动发起请求，不过官方并不推荐手动发起。

分页场景 ​

• 在分页场景下，可以定义placeholderData属性，可以使用自带的keepPreviousData或自定义返回值，这样在切换分页时，在新数据获取之前，可以保留旧的数据。 这个属性可以理解为分页场景下的placeholder。

初始数据 ​

• 如果想在发起请求之前放一些假数据或从其它地方得到的数据在那，那么可以定义initialData，数据类型要和data内的相同，支持直接定义或函数返回。

useInfiniteQuery ​

const { data, fetchNextPage, fetchPreviousPage, hasNextPage } = useInfiniteQuery({
  queryKey: ['infinite'],
  queryFn: ({ pageParam }) => axios(pageParam).then((res) => res.data),
  initialPageParam: {
    page: 1,
    size: 10
  },
  getNextPageParam: (lastPage, allPage, pageParam) => {
    // 在此返回下一页的pageParam
  },
  getPreviousPageParam: () => {
    // 用法与getNextPageParam一致，但不是必填项
  }
})

• queryKey与queryFn和useQuery的用法基本一致，不过queryFn中多了一个pageParam参数可供使用。

• 使用useInfiniteQuery时必须传入initialPageParam和getNextPageParam。initialPageParam为发起请求的初始值，一般为页码和页数或只有页码。 getNextPageParam用于获取下一页数据（如调用了fetchNextPage）时的pageParam，如果后端提供了下一页的字段，那么可以直接使用，若未提供则需要手动对页数进行+1。

• hasNextPage是getNextPageParam返回值，不为undefined或null时都为true。

• 对应NextPage，useInfiniteQuery也提供了getPreviousPageParam以及其它和NextPage相似的功能，不过需要注意的是，getPreviousPageParam不是获取上一页，而是从头部插入数据。

• 在data上和useQuery不同，data则变为一个对象，包含page和pageParams，前者是请求获取的数据源，后者则是每次Next或Previous所得到的pageParam

• 需要注意的是这里的page是由每一次获取到的数据一起拼接而成，是一个二维或多维数组，在使用时需注意使用方式。

{
  data?.pages.map((group, index) => (
    <Fragment key={index}>
      {/*这里才是请求到的数据*/}
      {group.map((item) => <p key={item.value}>{item.label}</p>)}
    </Fragment>
  ))
}

useMutation ​

常用于post场景，需手动发起。

const { mutateAsync, mutate, isPending, isSuccess } = useMutation({
  mutationKey: ['useMutation'],
  mutationFn: (params) => axios(params),
  onMutate: () => {},
  onSuccess: () => {},
  onError: () => {},
  onSettled: () => {}
})

• mutationKey与mutationFn和query中的用法基本一致，mutationFn的参数来自于mutate或mutateAsync传递的值。

• useMutation具有独特的回调事件，onMutate可以理解为发起请求前需要进行的操作，其余三个回调事件可以对应理解为Promise中的then，catch，finally。

• mutate与mutateAsync的使用方法一致，区别是若想触发useMutation上定义的回调之外的其他回调，mutateAsync可以向使用Promise那样注册then/catch/finally， 而mutate需要作为第二个参数传入其回调事件。

mutate(params, {
  onSuccess: () => {},
  onError: () => {},
  onSettled: () => {}
})