一文掌握 TanStack Query：让 React 数据管理变得简单高效1 / 2

'use client'

import { useEffect, useState } from 'react'

interface Category {
  id: number
  name: string
  image: string
}

export default function CategoriesList() {
  const [categories, setCategories] = useState<Category[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<Error | null>(null)

  const fetchCategories = async () => {
    try {
      setIsLoading(true)
      const response = await fetch('https://api.escuelajs.co/api/v1/categories')
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      const data = await response.json()
      setCategories(data.slice(0, 5))
    }
    catch (err) {
      setError(err instanceof Error ? err : new Error('发生未知错误'))
    }
    finally {
      setIsLoading(false)
    }
  }

  // 组件挂载时获取数据
  useEffect(() => {
    fetchCategories()
  }, [])

  // 加载状态显示
  if (isLoading) {
    return (
      <div className="container m-auto  text-center">
        加载中...
      </div>
    )
  }

  // 错误状态显示
  if (error) {
    return (
      <div className="container m-auto  text-center text-orange-600">
        发生错误:
        {error.message}
      </div>
    )
  }

  return (
    <div className="grid grid-cols-5 gap-4 container m-auto">
      {categories.map(category => (
        <article key={category.id}>
          <img src={category.image} alt={category.name} className="size-30 rounded !m-0" />
          <p>Clothes</p>
        </article>
      ))}
    </div>
  )
}

'use client'

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

// 创建实例
const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools />
      <Example />
    </QueryClientProvider>
  )
}

function Example() {
  // 发请求
  const { isPending, error, data, isFetching } = useQuery({
    queryKey: ['repoData'],
    queryFn: async () => {
      const response = await fetch('https://api.github.com/repos/TanStack/query')
      return await response.json()
    },
  })

  // 处理请求正在加载中的状态
  if (isPending)
    return 'Loading...'

  // 处理请求出错的状态
  if (error)
    return `An error has occurred: ${error.message}`

  return (
    <div>
      <h1>{data.full_name}</h1>
      <p>{data.description}</p>
      <strong>
        {' '}
        👀
        {data.subscribers_count}
      </strong>
      <strong>
        {' '}
        ✨
        {data.stargazers_count}
      </strong>
      <strong>
        {' '}
        🍴
        {data.forks_count}
      </strong>
      <div>{isFetching ? 'Updating...' : ''}</div>
    </div>
  )
}

'use client'
import { useQuery } from '@tanstack/react-query'
import { Input } from 'antd'
import { Search } from 'lucide-react'
import { useState } from 'react'
import { Button } from '@/components/ui/button'

interface User {
  id: number
  email: string
  username: string
  address: {
    city: string
    street: string
    number: number
    zipcode: string
  }
  phone: string
}

async function fetchUser(id: string): Promise<User> {
  const response = await fetch(`https://fakestoreapi.com/users/${id}`)
  if (!response.ok) {
    throw new Error('Network response was not ok')
  }
  return response.json()
}

function UserDetail({ userId }: { userId: string }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
    enabled: !!userId, // 只有当 userId 存在时才执行查询
  })

  if (isLoading)
    return <p>loading...</p>

  if (error) {
    return <p className=" text-red-600 p-4 border-red-400">{error.message}</p>
  }

  if (!data)
    return <p className=" text-orange-600 p-4 border-orange-400"> No data available</p>

  return (
    <div className="border p-6 flex flex-col gap-2 rounded-md">

      <div className="font-semibold">
        👩‍🚀
        {data.username}
      </div>

      <div>
        <p>
          📩 :
          {data.email}
        </p>

        <p>
          📲 :
          {data.phone}
        </p>

        <p>
          <span> 📇 :</span>
          {data.address.street}
          {data.address.number}
          ,
          {data.address.city}
        </p>
      </div>
    </div>
  )
}

export default function QueryUser() {
  const [inputValue, setInputValue] = useState<string>('1') // 输入框的值
  const [userId, setUserId] = useState<string>('1') // 实际查询的用户ID

  const handleSearch = () => {
    if (inputValue.trim()) {
      setUserId(inputValue.trim())
    }
  }

  return (
    <div className="flex flex-col gap-2">
      <div className="flex items-center gap-2">
        <Input value={inputValue} onChange={e => setInputValue(e.target.value)} />
        <Button onClick={handleSearch} size="icon" variant="outline">
          <Search className="h-4 w-4" />
        </Button>
      </div>
      <div className="w-80">
        <UserDetail userId={userId} />
      </div>
    </div>
  )
}

'use client'

import { zodResolver } from '@hookform/resolvers/zod'
import { useMutation, useQueryClient } from '@tanstack/react-query'

import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { z } from 'zod'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
import { Input } from '@/components/ui/input'

const userSchema = z.object({
  email: z.string().email('Invalid email address'),
  username: z.string().min(1, 'Username is required'),
  password: z.string().min(6, 'Password must be at least 6 characters'),
  name: z.object({
    firstname: z.string().min(1, 'First name is required'),
    lastname: z.string().min(1, 'Last name is required'),
  }),
  address: z.object({
    city: z.string().min(1, 'City is required'),
    street: z.string().min(1, 'Street is required'),
    number: z.coerce.string().min(6, 'Street number is required'),
    zipcode: z.string().min(1, 'Zipcode is required'),
    geolocation: z.object({
      lat: z.string().min(1, 'Latitude is required'),
      long: z.string().min(1, 'Longitude is required'),
    }),
  }),
  phone: z.string().min(1, 'Phone is required'),
})

export type UserFormData = z.infer<typeof userSchema>

async function createUser(user: UserFormData): Promise<UserFormData & { id: number }> {
  const response = await fetch('https://fakestoreapi.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(user),
  })
  if (!response.ok) {
    throw new Error('Network response was not ok')
  }
  return response.json()
}

export default function CreateUserForm() {
  const queryClient = useQueryClient()

  const form = useForm<UserFormData>({
    resolver: zodResolver(userSchema),
    defaultValues: {
      address: {
        geolocation: {
          lat: '-37.3159',
          long: '81.1496',
        },
        city: 'kilcoole',
        street: 'new road',
        number: '7682',
        zipcode: '12926-3874',
      },
      email: 'john@gmail.com',
      username: 'johnd',
      password: 'm38rmF$',
      name: {
        firstname: 'john',
        lastname: 'doe',
      },
      phone: '1-570-236-7033',
    },
  })

  const mutation = useMutation({
    mutationFn: createUser,
    onSuccess: (newUser: UserFormData) => {
      console.log('🚀 ~ CreateUserForm ~ newUser:', newUser)
      queryClient.invalidateQueries({ queryKey: ['users'] })
      toast.success('User created successfully!')
      form.reset()
    },
    onError: (error) => {
      toast.error(`Failed to create user: ${error.message}`)
    },
  })

  const handleSubmit = (values: UserFormData) => {
    mutation.mutate(values)
  }

  return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardHeader>
        <CardTitle>Create New User</CardTitle>
        <CardDescription>Fill in the details to create a new user account</CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
            {/* Basic Information */}
            <div className="space-y-4">
              <h3 className="text-lg font-medium">Basic Information</h3>

              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input type="email" placeholder="Enter email" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="username"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Username</FormLabel>
                    <FormControl>
                      <Input placeholder="Enter username" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Password</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="Enter password" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="name.firstname"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>First Name</FormLabel>
                      <FormControl>
                        <Input placeholder="Enter first name" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="name.lastname"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Last Name</FormLabel>
                      <FormControl>
                        <Input placeholder="Enter last name" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <FormField
                control={form.control}
                name="phone"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Phone</FormLabel>
                    <FormControl>
                      <Input placeholder="Enter phone number" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            {/* Address Information */}
            <div className="space-y-4">
              <h3 className="text-lg font-medium">Address Information</h3>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="address.city"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>City</FormLabel>
                      <FormControl>
                        <Input placeholder="Enter city" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="address.street"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Street</FormLabel>
                      <FormControl>
                        <Input placeholder="Enter street" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="address.number"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Street Number</FormLabel>
                      <FormControl>
                        <Input placeholder="Enter street number" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="address.zipcode"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Zipcode</FormLabel>
                      <FormControl>
                        <Input placeholder="Enter zipcode" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <FormField
                  control={form.control}
                  name="address.geolocation.lat"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Latitude</FormLabel>
                      <FormControl>
                        <Input placeholder="Enter latitude" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <FormField
                  control={form.control}
                  name="address.geolocation.long"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Longitude</FormLabel>
                      <FormControl>
                        <Input placeholder="Enter longitude" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
            </div>

            <Button type="submit" className="w-full" disabled={mutation.isPending}>
              {mutation.isPending ? 'Creating User...' : 'Create User'}
            </Button>
          </form>
        </Form>
      </CardContent>
    </Card>
  )
}

'use client'

import { useQuery } from '@tanstack/react-query'
import { Button } from '@/components/ui/button'

interface Todo {
  id: number
  title: string
  completed: boolean
}

async function fetchTodos(): Promise<Todo[]> {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=5')
  if (!response.ok) {
    throw new Error('网络请求失败')
  }
  return response.json()
}

/**
 * 待办事项列表组件
 */
export default function TodoList() {
  const {
    data: todos,
    isLoading,
    isError,
    error,
    refetch,
    isFetching,
    isStale,
    dataUpdatedAt,
  } = useQuery<Todo[], Error>({
    queryKey: ['todos'],
    queryFn: fetchTodos,
    staleTime: 5000,
  })

  if (isLoading) {
    return <div className="text-orange-500">加载中...</div>
  }

  if (isError) {
    return (
      <div className="text-red-500">
        错误:
        {error.message}
      </div>
    )
  }

  return (
    <div>
      <h3>TODO List</h3>

      {/* 当数据过期且不在获取中时显示刷新按钮 */}
      {isStale && !isFetching && (
        <Button type="button" variant="outline" onClick={() => refetch()} style={{ marginBottom: '1rem' }}>
          刷新数据
        </Button>
      )}

      {/* 如果正在获取新数据，显示加载提示 */}
      {isFetching && <div className="text-blue-500">正在更新数据...</div>}

      <p className="text-xs">
        数据更新于
        {new Date(dataUpdatedAt).toLocaleTimeString('zh-CN', {
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
        })}
      </p>

      <ul>
        {todos?.map(todo => (
          <li key={todo.id}>
            <input type="checkbox" defaultChecked={todo.completed} />
            <span className="ml-2">{todo.title}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}

'use client'
import type { TablePaginationConfig } from 'antd/es/table'
import type { PaginationParams, ProductsResponse } from './types'
import { keepPreviousData, useQuery } from '@tanstack/react-query'
import { Alert, Card, Space, Spin, Table, Tag } from 'antd'
import { useState } from 'react'

async function fetchProducts({ page, limit }: PaginationParams): Promise<ProductsResponse> {
  const skip = (page - 1) * limit
  const response = await fetch(
    `https://dummyjson.com/products?limit=${limit}&skip=${skip}`,
  )
  if (!response.ok) {
    throw new Error('Failed to fetch products')
  }
  return response.json()
}

export default function ProductList() {
  const [pagination, setPagination] = useState<PaginationParams>({
    page: 1,
    limit: 10,
  })

  const { data, isPending, isError, error } = useQuery({
    queryKey: ['products', pagination],
    queryFn: () => fetchProducts(pagination),
    placeholderData: keepPreviousData,
  })

  const handleTableChange = (newPagination: TablePaginationConfig) => {
    setPagination({
      page: newPagination.current || 1,
      limit: newPagination.pageSize || 10,
    })
  }

  if (isPending) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <Spin size="large" />
      </div>

    )
  }

  if (isError) {
    return (
      <Alert
        type="error"
        message="Error"
        description={error.message}
        showIcon
      />
    )
  }

  return (
    <div className=" container mx-auto py-10">
      <Card title="Product List">
        <Table
          columns={[
            {
              title: 'Thumbnail',
              dataIndex: 'thumbnail',
              key: 'thumbnail',
              render: thumbnail => (
                <img src={thumbnail} alt="product" style={{ width: 80, height: 80, objectFit: 'contain' }} />
              ),
            },
            {
              title: 'Title',
              dataIndex: 'title',
              key: 'title',
              render: title => (
                <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {title}
                </div>

              ),
            },
            {
              title: 'Price',
              dataIndex: 'price',
              key: 'price',
              render: (price, record) => (
                <Space direction="vertical" size={0}>
                  <span style={{ color: '#ff4d4f', textDecoration: 'line-through' }}>
                    $
                    {(price * (1 + record.discountPercentage / 100)).toFixed(2)}
                  </span>

                  <span style={{ fontWeight: 'bold' }}>
                    $
                    {price}
                  </span>

                </Space>

              ),
            },
            {
              title: 'Category',
              dataIndex: 'category',
              key: 'category',
              render: category => (
                <Tag color="blue">{category}</Tag>
              ),
            },
          ]}
          dataSource={data?.products}
          rowKey="id"
          pagination={{
            current: pagination.page,
            pageSize: pagination.limit,
            total: data?.total,
            showSizeChanger: true,
            showTotal: total => `Total ${total} items`,
          }}

          onChange={handleTableChange}
          loading={isPending}
        />
      </Card>
    </div>
  )
}

'use client'
import type { ProductsResponse } from './types'
import { useInfiniteQuery } from '@tanstack/react-query'
import { Alert, Card, Image, List, Rate, Space, Spin, Tag, Typography } from 'antd'
import { useEffect } from 'react'
import { useInView } from 'react-intersection-observer'

const { Text, Paragraph } = Typography

async function fetchProducts({ pageParam = 0 }): Promise<ProductsResponse> {
  const limit = 10
  const skip = pageParam * limit
  const response = await fetch(
    `https://dummyjson.com/products?limit=${limit}&skip=${skip}`,
  )
  if (!response.ok) {
    throw new Error('Failed to fetch products')
  }
  return response.json()
}

export default function InfiniteProductList() {
  const { ref, inView } = useInView()

  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery({
    queryKey: ['products'],
    queryFn: fetchProducts,
    initialPageParam: 1,
    getNextPageParam: (lastPage) => {
      const { skip, limit, total } = lastPage
      const nextPage = skip + limit
      return nextPage < total ? nextPage / limit : undefined
    },
  })

  useEffect(() => {
    if (inView && hasNextPage) {
      fetchNextPage()
    }
  }, [inView, fetchNextPage, hasNextPage])

  if (status === 'pending') {
    return (
      <div className="text-center p-12.5">
        <Spin size="large" />
      </div>
    )
  }

  if (status === 'error') {
    return <Alert type="error" message="Error" description={error.message} showIcon />
  }

  return (
    <Card title="Infinite Product List">
      <List
        grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
        dataSource={data.pages.flatMap(page => page.products)}
        renderItem={product => (
          <List.Item>
            <Card
              hoverable
              cover={(
                <div style={{ padding: '20px', textAlign: 'center', background: '#fafafa' }}>
                  <Image
                    alt={product.title}
                    src={product.thumbnail}
                    style={{ height: 200, objectFit: 'contain' }}
                    preview={{
                      src: product.images[0],
                    }}
                  />
                </div>
              )}
            >
              <Card.Meta
                title={(
                  <Paragraph
                    ellipsis={{ rows: 2 }}
                    style={{ marginBottom: 8 }}
                  >
                    {product.title}
                  </Paragraph>
                )}
                description={(
                  <Space direction="vertical" size={4} style={{ width: '100%' }}>
                    <Space>
                      <Tag color="blue">{product.brand}</Tag>
                      <Tag color="green">{product.category}</Tag>
                    </Space>
                    <Space direction="vertical" size={0}>
                      <Text type="secondary" delete>
                        $
                        {(product.price * (1 + product.discountPercentage / 100)).toFixed(2)}
                      </Text>
                      <Text strong style={{ fontSize: 16 }}>
                        $
                        {product.price}
                      </Text>
                    </Space>
                    <Space>
                      <Rate disabled defaultValue={product.rating} allowHalf />
                      <Text type="secondary">
                        (
                        {product.rating}
                        )
                      </Text>
                    </Space>
                    <Tag color={product.stock > 10 ? 'green' : product.stock > 0 ? 'orange' : 'red'}>
                      {product.stock > 0 ? `In Stock (${product.stock})` : 'Out of Stock'}
                    </Tag>
                  </Space>
                )}
              />
            </Card>
          </List.Item>
        )}
      />

      <div ref={ref} className="mt-5 h-12 flex items-center justify-center">
        {isFetchingNextPage
          ? <Spin />
          : hasNextPage
            ? 'Load More'
            : 'No More Products'}
      </div>
    </Card>
  )
}