ReactQuery：使用场景理解 useQuery 的用法

2024-01-21 22:35:22

在先前的文章中，我们探讨了 ReactQuery 中的各种状态。有了这些基础，我们现在可以深入研究 useQuery 的用法，并通过实际场景来理解它的各种功能。

场景 1：获取单一资源

最常见的场景是使用 useQuery 获取单个资源。例如，我们想要获取一个博客文章的数据：

import { useQuery } from 'react-query';

const BlogPost = ({ id }) => {
  const { data, isLoading, error } = useQuery(['blogPost', id], () => {
    return fetch(`/api/blog-posts/${id}`).then((res) => res.json());
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>{error.message}</p>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
};

在这里，useQuery 根据 id 作为查询键获取博客文章数据。它返回一个对象，其中包含数据、加载状态和错误消息。如果数据正在加载，它会显示一个加载指示符。如果发生错误，它会显示错误消息。否则，它会渲染博客文章数据。

场景 2：使用缓存策略

useQuery 允许我们指定缓存策略，以优化性能和用户体验。例如，我们可以使用 staleTime 选项来指定数据可以在缓存中保持新鲜多长时间：

const BlogPost = ({ id }) => {
  const { data, isLoading, error } = useQuery(['blogPost', id], () => {
    return fetch(`/api/blog-posts/${id}`).then((res) => res.json());
  }, {
    staleTime: 600000 // 数据可在缓存中保持新鲜 10 分钟
  });
};

现在，即使在数据过期后，useQuery 仍会从缓存中提供数据长达 10 分钟。这可以防止不必要的网络请求，提高性能。

场景 3：使用无限滚动

useQuery 还支持无限滚动，它允许我们按需加载数据。例如，我们想要创建一个博客文章列表，用户滚动时加载更多文章：

import { useInfiniteQuery } from 'react-query';

const BlogPostList = () => {
  const { data, isLoading, error, fetchNextPage } = useInfiniteQuery('blogPosts', async ({ pageParam = 1 }) => {
    return fetch(`/api/blog-posts?page=${pageParam}`).then((res) => res.json());
  }, {
    getNextPageParam: (lastPage, pages) => {
      if (lastPage.totalPages > pages.length) {
        return pages.length + 1;
      }

      return undefined;
    }
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>{error.message}</p>;

  return (
    <div>
      {data.pages.map((page) => (
        <div key={page.id}>
          <h1>{page.title}</h1>
          <p>{page.content}</p>
        </div>
      ))}

      <button onClick={fetchNextPage}>Load More</button>
    </div>
  );
};