Tanstack Query

向军大叔每晚八点在 抖音 和 bilibli 直播

Query Hook

下面来定义 Tankstack Query 的hook，使项目文件结构更清晰。

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import React from 'react'

export const useAppQuery = () => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
        retryDelay: 1000,
        refetchOnWindowFocus: false,
      },
    },
  })

  const AppQueryProvider = ({ children }: { children: React.ReactNode }) => {
    return (
      <QueryClientProvider client={queryClient}>
        <React.Fragment>
          {children}
          <ReactQueryDevtools initialIsOpen={false} />
        </React.Fragment>
      </QueryClientProvider>
    )
  }
  return { queryClient, AppQueryProvider }
}

然后在 App.tsx 组件中使用

import { useAppQuery } from './hooks/useAppQuery'
import { useRouter } from './hooks/useRooter'

export const App = () => {
  const { AppQueryProvider } = useAppQuery()
  const { router, RouterProvider } = useRouter()
  return (
    <AppQueryProvider>
      <RouterProvider router={router} />
    </AppQueryProvider>
  )
}

错误边界

使用 useSuspenseQuery 发送请求时，使用 ErrorBoundary 来处理错误边界

import { Footer } from '@/components/common/Footer'
import { Navbar } from '@/components/common/Navbar'
import { Loading } from '@/components/Loading'
import { createFileRoute, Outlet, useNavigate } from '@tanstack/react-router'
import { Suspense } from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import toast from 'react-hot-toast'
export const Route = createFileRoute('/front')({
  component: Page,
})

//错误处理组件
function ErrorBoundaryFallback({ error }: { error: any }) {
  const navigate = useNavigate()
  switch (error?.status) {
    case 401:
      toast.error('请登录后操作', { id: '401' })
      navigate({ to: '/auth/login' })
      break
    case 403:
      toast.error('你没有访问权限', { id: '403' })
      navigate({ to: '/' })
      break
    case 404:
      toast.error('你访问的内容不存在', { id: '404' })
      navigate({ to: '/error/404' })
      break
    default:
      navigate({ to: '/error/500' })
  }

  return <></>
}

function Page() {
  return (
    <Suspense fallback={<Loading />}>
      <ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
        <Navbar />
        <Outlet />
        <Footer />
      </ErrorBoundary>
    </Suspense>
  )
}