TanStack Query v4迁移至v5：手动修改4个文件语法求助

核心变更前置说明 #

先明确v5最影响代码的核心变化：

• useQuery/useMutation 统一采用对象参数格式，不再支持旧的位置参数写法
• QueryClient 初始化时，默认选项拆分为 defaultQueryOptions 和 defaultMutationOptions
• invalidateQueries 必须通过对象传递 queryKey，不再支持直接传字符串
• 包导入路径从 react-query 改为 @tanstack/react-query

各文件修改要点 #

App.tsx #

• 调整导入路径：

  // v4
  import { QueryClient, QueryClientProvider } from 'react-query'
  // v5
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
  

• 重构 QueryClient 初始化代码：

  // v4
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: { staleTime: 5000 },
      mutations: { retry: 1 },
    },
  })
  // v5
  const queryClient = new QueryClient({
    defaultQueryOptions: { staleTime: 5000 },
    defaultMutationOptions: { retry: 1 },
  })
  

event.component.tsx #

• 重构 useQuery 调用逻辑：

  // v4
  const { data, isLoading } = useQuery('events', fetchEvents, { staleTime: 3000 })
  // v5
  const { data, isLoading } = useQuery({
    queryKey: ['events'],
    queryFn: fetchEvents,
    staleTime: 3000,
  })
  

• 调整缓存失效调用：

  // v4
  queryClient.invalidateQueries('events')
  // v5
  queryClient.invalidateQueries({ queryKey: ['events'] })
  

create.event.tsx #

• 重构 useMutation 结构：

  // v4
  const mutation = useMutation(createEvent, {
    onSuccess: (newEvent) => {
      queryClient.setQueryData('events', (oldData) => [...oldData, newEvent])
    },
  })
  // v5
  const mutation = useMutation({
    mutationFn: createEvent,
    onSuccess: (newEvent) => {
      queryClient.setQueryData(['events'], (oldData) => [...oldData, newEvent])
    },
  })
  

update.event.tsx #

• 重构 useMutation 及缓存更新逻辑：

  // v4
  const mutation = useMutation(updateEvent, {
    onSuccess: (updatedEvent) => {
      queryClient.setQueryData(['event', updatedEvent.id], updatedEvent)
      queryClient.invalidateQueries('events')
    },
  })
  // v5
  const mutation = useMutation({
    mutationFn: updateEvent,
    onSuccess: (updatedEvent) => {
      queryClient.setQueryData(['event', updatedEvent.id], updatedEvent)
      queryClient.invalidateQueries({ queryKey: ['events'] })
    },
  })
  

• 错误处理适配类型变化：

  // v5 中处理错误
  if (mutation.isError) {
    const error = mutation.error as Error
    console.error(error.message)
  }
  

额外注意点 #

• 自定义hook中用到的 useQuery/useMutation 需同步改为对象参数格式
• 若使用 useInfiniteQuery，getNextPageParam 需作为选项属性传递：

  // v5
  const { data, fetchNextPage } = useInfiniteQuery({
    queryKey: ['infiniteEvents'],
    queryFn: ({ pageParam = 0 }) => fetchEvents(pageParam),
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  })
  

内容的提问来源于stack exchange，提问作者SpicyyRiice