# TanStack React 查询模式 ## 设置 // 提供商/QueryProvider.tsx “使用客户端” 从 '@tanstack/react-query' 导入 { QueryClient, QueryClientProvider } 从 '@tanstack/react-query-devtools' 导入 { ReactQueryDevtools } 从 'react' 导入 { useState } 导出函数 QueryProvider({ 孩子 }: { 孩子: React.ReactNode }) { const [queryClient] = useState( ()=> 新的查询客户端({ 默认选项：{ 查询：{ staleTime: 60 * 1000, // 1 分钟 gcTime: 5 * 60 * 1000, // 5分钟（以前的cacheTime） refetchOnWindowFocus：假，重试：1， }, }, }) ）返回（ {孩子} ） } ## 查询键 // lib/queryKeys.ts 导出常量查询键 = { 环境：{ all: ['环境'] 作为 const，列表： () => [...queryKeys.environments.all, 'list'] 作为 const，列表：（过滤器：环境过滤器）=> [...queryKeys.environments.lists(), 过滤器] 作为 const，详细信息： () => [...queryKeys.environments.all, 'detail'] as const, 详细信息： (id: string) => [...queryKeys.environments.details(), id] as const， }, 用户：{ all: ['users'] 作为 const，详细信息： (id: string) => [...queryKeys.users.all, id] as const， }, } ## 基本查询 // 钩子/useEnvironments.ts 从 '@tanstack/react-query' 导入 { useQuery } 从'@/lib/queryKeys'导入{queryKeys} 接口环境过滤器{ 状态？：字符串页数？：编号 } 异步函数 fetchEnvironments(filters: EnvironmentFilters) { const params = new URLSearchParams() if (filters.status) params.set('status',filters.status) if (filters.page) params.set('page', String(filters.page)) const res = wait fetch(`/api/environments?${params}`) if (!res.ok) throw new Error('无法获取环境') 返回 res.json() } 导出函数 useEnvironments(filters: EnvironmentFilters = {}) { 返回 useQuery({ queryKey: queryKeys.environments.list(filters), queryFn: () => fetchEnvironments(过滤器), }) } // 用法函数环境列表() { const { data, isLoading, error } = useEnvironments({ status: 'RUNNING' }) if (isLoading) 返回 if (错误) 返回 <错误消息={error.message} /> 返回（

{env.name}

） } ## 单项查询 // 钩子/useEnvironment.ts 导出函数 useEnvironment(id: string) { 返回 useQuery({ queryKey: queryKeys.environments.detail(id), queryFn: async () => { const res = wait fetch(`/api/environments/${id}`) 如果（！res.ok）{ if (res.status === 404) 返回 null 抛出新错误（'无法获取环境'） } 返回 res.json() }, enabled: !!id, // 如果没有 id 则不获取 }) } ## 突变 // 钩子/useCreateEnvironment.ts 从 '@tanstack/react-query' 导入 { useMutation, useQueryClient } 从'@/lib/queryKeys'导入{queryKeys} 接口创建环境输入{ 名称：字符串描述？：字符串 } 导出函数 useCreateEnvironment() { const queryClient = useQueryClient() 返回 useMutation({ mutationFn：异步（输入：CreateEnvironmentInput）=> { const res = 等待 fetch('/api/environments', { 方法：'POST'， headers: { 'Content-Type': 'application/json' }, 正文：JSON.stringify（输入）， }) 如果（！res.ok）{ const 错误 = 等待 res.json() throw new Error(error.message || '无法创建环境') } 返回 res.json() }, 成功：() => { // 无效并重新获取 queryClient.invalidateQueries({ queryKey: queryKeys.environments.lists(), }) }, }) } // 用法函数 CreateEnvironmentForm() { const 突变 = useCreateEnvironment() const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const formData = new FormData(e.currentTarget) 突变.突变({ 名称：formData.get('name') 作为字符串，描述：formData.get('描述') 作为字符串， }) } 返回（

<输入名称=“名称”必需/>

<按钮类型=“提交”禁用= {mutation.isPending}>
            {突变.isPending ? '创建...' : '创建'}
          </按钮>
          {mutation.isError && (
            <p className="text-red-500">{mutation.error.message}</p>
          )}
        </形式>
      ）
    }

## 乐观更新
    
    
    // 钩子/useUpdateEnvironment.ts
    导出函数 useUpdateEnvironment() {
      const queryClient = useQueryClient()
    
      返回 useMutation({
        mutationFn: async ({ id, ...data }: UpdateEnvironmentInput) => {
          const res = 等待 fetch(`/api/environments/${id}`, {
            方法：'补丁'，
            headers: { 'Content-Type': 'application/json' },
            正文：JSON.stringify（数据），
          })
          if (!res.ok) throw new Error('更新失败')
          返回 res.json()
        },
    
        // 乐观更新
        onMutate: 异步 (newData) => {
          // 取消传出重新获取
          等待 queryClient.cancelQueries({
            queryKey: queryKeys.environments.detail(newData.id),
          })
    
          // 快照之前的值
          const previousEnv = queryClient.getQueryData(
            queryKeys.environments.detail(newData.id)
          ）
    
          // 乐观更新
          queryClient.setQueryData(
            queryKeys.environments.detail(newData.id),
            (旧：环境) => ({ ...old, ...newData })
          ）
    
          返回 { previousEnv }
        },
    
        // 出错时回滚
        onError: (err, newData, context) => {
          如果（上下文？.previousEnv）{
            queryClient.setQueryData(
              queryKeys.environments.detail(newData.id),
              上下文.previousEnv
            ）
          }
        },
    
        // 成功或错误后重新获取
        onSettled: (数据、错误、变量) => {
          queryClient.invalidateQueries({
            queryKey: queryKeys.environments.detail(variables.id),
          })
        },
      })
    }

## 乐观更新删除
    
    
    // 钩子/useDeleteEnvironment.ts
    导出函数 useDeleteEnvironment() {
      const queryClient = useQueryClient()
    
      返回 useMutation({
        mutationFn: async (id: string) => {
          const res = 等待 fetch(`/api/environments/${id}`, {
            方法：'删除'，
          })
          if (!res.ok) throw new Error('删除失败')
        },
    
        onMutate: 异步 (deletedId) => {
          等待 queryClient.cancelQueries({
            queryKey: queryKeys.environments.lists(),
          })
    
          const previousEnvs = queryClient.getQueryData<Environment[]>(
            queryKeys.environments.lists()
          ）
    
          // 乐观地从列表中删除
          queryClient.setQueryData<环境[]>(
            queryKeys.environments.lists(),
            (old) => old?.filter((env) => env.id !==deletedId)
          ）
    
          返回 { previousEnvs }
        },
    
        onError: (err, id, context) => {
          queryClient.setQueryData(
            queryKeys.environments.lists(),
            上下文？.previousEnvs
          ）
        },
    
        已解决：() => {
          queryClient.invalidateQueries({
            queryKey: queryKeys.environments.lists(),
          })
        },
      })
    }

## 无限查询（分页）
    
    
    // 钩子/useInfiniteEnvironments.ts
    从 '@tanstack/react-query' 导入 { useInfiniteQuery }
    
    导出函数 useInfiniteEnvironments() {
      返回 useInfiniteQuery({
        queryKey: ['环境', '无限'],
        queryFn: async ({ pageParam }) => {
          const res = wait fetch(`/api/environments?cursor=${pageParam}`)
          返回 res.json()
        },
        初始页面参数: '',
        getNextPageParam: (lastPage) => lastPage.nextCursor,
      })
    }
    
    // 用法
    函数InfiniteList() {
      const { 数据， fetchNextPage， hasNextPage， isFetchingNextPage } =
        useInfiniteEnvironments()
    
      返回（
        <>
          {data?.pages.map((页面, i) => (
            <片段键={i}>
              {page.items.map((env) => (
                <EnvironmentCard key={env.id} 环境={env} />
              ))}
            </片段>
          ))}
          <按钮
            onClick={() => fetchNextPage()}
            禁用={!hasNextPage ||正在获取下一页}
          >
            {正在获取下一页？ “正在加载...”：有下一页吗？ “加载更多”：“不再”}
          </按钮>
        </>
      ）
    }

## 预取
    
    
    // 悬停时预取
    函数EnvironmentLink({ id, name }: { id: string; name: string }) {
      const queryClient = useQueryClient()
    
      常量预取 = () => {
        queryClient.prefetchQuery({
          queryKey: queryKeys.environments.detail(id),
          queryFn: () => fetchEnvironment(id),
          陈旧时间：60 * 1000，
        })
      }
    
      返回（
        <Link href={`/environments/${id}`} onMouseEnter={prefetch}>
          {名称}
        </链接>
      ）
    }</article></body></html>

坦斯塔克查询

包含技能