在 Next.js 中将 React-TanStack-Query 提升到新的水平

还记得我们之前关于用 React-TanStack-Query 替换传统 fetch useState useEffect 方法的讨论吗？如果您一直在使用基础知识——设置 QueryProvider、编写基本查询和处理突变——您可能已经体验到了这些优势。 然而，我们才刚刚开始探索它的功能。

让我们更深入地研究先进技术，这些技术将显着增强您的数据获取，将应用程序的性能从“良好”转变为“异常快”。

建立更强大的基础

我们之前的指南演示了使用 React-TanStack-Query 的基本电影列表：

const { data: movies, error, isLoading } = useQuery(['movies'], fetchMovies);

这是一个很好的起点，但如果我们的目标是 Netflix 级别的响应能力呢？ 让我们提升技术吧。

先进技术带来卓越性能

1.智能预取（实现类似 Netflix 的速度）

我们最初的电影列表要求用户点击后等待。我们可以大幅改善这一点：

// components/MovieList.jsx
import { useQueryClient } from '@tanstack/react-query';

export default function MovieList() {
  const queryClient = useQueryClient();

  // Leveraging our existing fetchMovies function
  const prefetchMovie = async (movieId) => {
    await queryClient.prefetchQuery({
      queryKey: ['movie', movieId],
      queryFn: () => fetchMovieDetails(movieId),
      // Maintain freshness for 5 minutes
      staleTime: 5 * 60 * 1000,
    });
  };

  return (
    <div className="grid grid-cols-4 gap-4">
      {movies.map(movie => (
        <div key={movie.id} onMouseEnter={() => prefetchMovie(movie.id)}
          className="movie-card"
        >
          {movie.title}
        </div>
      ))}
    </div>
  );
}

现在，当用户将鼠标悬停在电影上时，详细信息就会预先加载 - 单击即可立即访问！ ✨

2.增强突变（还记得那些吗？）

我们的第一篇文章涵盖了基本突变。让我们通过乐观更新来优化它们：

// hooks/useUpdateMovie.js
export function useUpdateMovie() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: updateMovie,
    // The key improvement
    onMutate: async (newMovie) => {
      // Halt ongoing refetches
      await queryClient.cancelQueries(['movie', newMovie.id]);

      // Store current state (for rollback if needed)
      const previousMovie = queryClient.getQueryData(['movie', newMovie.id]);

      // Immediate (optimistic) update
      queryClient.setQueryData(['movie', newMovie.id], newMovie);

      return { previousMovie };
    },
    // Error handling
    onError: (err, newMovie, context) => {
      queryClient.setQueryData(
        ['movie', newMovie.id],
        context.previousMovie
      );
    },
  });
}

3.并行数据加载（消除不必要的等待）

顺序加载已成为过去：

// pages/movie/[id].js
export default function MoviePage({ movieId }) {
  const results = useQueries({
    queries: [
      {
        queryKey: ['movie', movieId],
        queryFn: () => fetchMovie(movieId),
      },
      {
        queryKey: ['cast', movieId],
        queryFn: () => fetchCast(movieId),
      },
      {
        queryKey: ['reviews', movieId],
        queryFn: () => fetchReviews(movieId),
      },
    ],
  });

  if (results.some(result => result.isLoading)) {
    return <LoadingSpinner />;
  }

  const [movie, cast, reviews] = results.map(r => r.data);

  return <MovieDetails cast={cast} movie={movie} reviews={reviews} />;
}

4.实现无限滚动（高效的方式）

让我们将分页示例升级为无缝无限滚动：

// components/InfiniteMovieList.jsx
import { useInfiniteQuery } from '@tanstack/react-query';
import { useInView } from 'react-intersection-observer';

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

  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useInfiniteQuery({
    queryKey: ['movies'],
    queryFn: fetchMoviePage,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  });

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

  return (
    <div>
      {data.pages.map((page) => (
        page.movies.map((movie) => (
          <MovieCard key={movie.id} movie={movie} />
        ))
      ))}

      <div ref={ref}>
        {isFetchingNextPage ? <LoadingSpinner /> : null}
      </div>
    </div>
  );
}

5.利用 Next.js 14 个服务器组件

这是我们第一篇文章中不提供的功能：Next.js 14 服务器组件集成：

const { data: movies, error, isLoading } = useQuery(['movies'], fetchMovies);

专业提示（经验教训）

1. 一致的查询键：细化我们的电影查询键：

// components/MovieList.jsx
import { useQueryClient } from '@tanstack/react-query';

export default function MovieList() {
  const queryClient = useQueryClient();

  // Leveraging our existing fetchMovies function
  const prefetchMovie = async (movieId) => {
    await queryClient.prefetchQuery({
      queryKey: ['movie', movieId],
      queryFn: () => fetchMovieDetails(movieId),
      // Maintain freshness for 5 minutes
      staleTime: 5 * 60 * 1000,
    });
  };

  return (
    <div className="grid grid-cols-4 gap-4">
      {movies.map(movie => (
        <div key={movie.id} onMouseEnter={() => prefetchMovie(movie.id)}
          className="movie-card"
        >
          {movie.title}
        </div>
      ))}
    </div>
  );
}

2. 智能重新获取：改进窗口焦点的基本重新获取：

// hooks/useUpdateMovie.js
export function useUpdateMovie() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: updateMovie,
    // The key improvement
    onMutate: async (newMovie) => {
      // Halt ongoing refetches
      await queryClient.cancelQueries(['movie', newMovie.id]);

      // Store current state (for rollback if needed)
      const previousMovie = queryClient.getQueryData(['movie', newMovie.id]);

      // Immediate (optimistic) update
      queryClient.setQueryData(['movie', newMovie.id], newMovie);

      return { previousMovie };
    },
    // Error handling
    onError: (err, newMovie, context) => {
      queryClient.setQueryData(
        ['movie', newMovie.id],
        context.previousMovie
      );
    },
  });
}

3. 强大的错误处理：增强我们的基本错误处理：

// pages/movie/[id].js
export default function MoviePage({ movieId }) {
  const results = useQueries({
    queries: [
      {
        queryKey: ['movie', movieId],
        queryFn: () => fetchMovie(movieId),
      },
      {
        queryKey: ['cast', movieId],
        queryFn: () => fetchCast(movieId),
      },
      {
        queryKey: ['reviews', movieId],
        queryFn: () => fetchReviews(movieId),
      },
    ],
  });

  if (results.some(result => result.isLoading)) {
    return <LoadingSpinner />;
  }

  const [movie, cast, reviews] = results.map(r => r.data);

  return <MovieDetails cast={cast} movie={movie} reviews={reviews} />;
}

选择正确的技术

• 基本查询（来自我们的第一篇文章）：非常适合简单的数据获取。
• 预取：当用户操作可预测时效果最佳。
• 并行查询：当需要多个独立数据集时使用。
• 无限查询：适合冗长的可滚动列表。
• 乐观更新：采用即时用户体验。

结论

我们比最初的设置有了显着的进步！这些增强功能对于创造真正卓越的用户体验至关重要。

请记住，您不需要立即实施所有内容。从基础开始，然后根据需要逐步整合这些优化。

下次有人评论您的应用程序的速度时，您就会知道为什么它如此令人印象深刻。 ？

编码愉快！ React-TanStack-Query 提供了无限的可能性。接下来我们应该探索什么？

以上是在 Next.js 中将 React-TanStack-Query 提升到新的水平的详细内容。更多信息请关注PHP中文网其他相关文章！