还记得我们之前关于用 React-TanStack-Query 替换传统 fetch useState useEffect 方法的讨论吗？如果您一直在使用基础知识——设置 QueryProvider、编写基本查询和处理突变——您可能已经体验到了这些优势。 然而，我们才刚刚开始探索它的功能。
让我们更深入地研究先进技术，这些技术将显着增强您的数据获取，将应用程序的性能从“良好”转变为“异常快”。
我们之前的指南演示了使用 React-TanStack-Query 的基本电影列表：
<code class="language-javascript">const { data: movies, error, isLoading } = useQuery(['movies'], fetchMovies);</code>这是一个很好的起点，但如果我们的目标是 Netflix 级别的响应能力呢？ 让我们提升技术吧。
我们最初的电影列表要求用户点击后等待。我们可以大幅改善这一点：
<code class="language-javascript">// 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>
);
}</code>现在，当用户将鼠标悬停在电影上时，详细信息就会预先加载 - 单击即可立即访问！ ✨
我们的第一篇文章涵盖了基本突变。让我们通过乐观更新来优化它们：
<code class="language-javascript">// 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
);
},
});
}</code>顺序加载已成为过去：
<code class="language-javascript">// 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} />;
}</code>让我们将分页示例升级为无缝无限滚动：
<code class="language-javascript">// 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>
);
}</code>这是我们第一篇文章中不提供的功能：Next.js 14 服务器组件集成：
<code class="language-javascript">const { data: movies, error, isLoading } = useQuery(['movies'], fetchMovies);</code><code class="language-javascript">// 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>
);
}</code><code class="language-javascript">// 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
);
},
});
}</code><code class="language-javascript">// 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} />;
}</code>我们比最初的设置有了显着的进步！这些增强功能对于创造真正卓越的用户体验至关重要。
请记住，您不需要立即实施所有内容。从基础开始，然后根据需要逐步整合这些优化。
下次有人评论您的应用程序的速度时，您就会知道为什么它如此令人印象深刻。 ？
编码愉快！ React-TanStack-Query 提供了无限的可能性。接下来我们应该探索什么？
以上是在 Next.js 中将 React-TanStack-Query 提升到新的水平的详细内容。更多信息请关注PHP中文网其他相关文章！
