如何仅当组件在视口中使用 React 和 React Query 查询数据？

Question

我有一个呈现帖子组件列表的 React 页面，对于每个帖子组件，我正在获取与该帖子相关的评论并使用 React Query 库在其中显示它们。 问题是当用户加载帖子页面时，React Query 会一次加载所有帖子的所有评论，这导致我的后端速度变慢 go。

我想实现一种机制，仅当用户滚动到该特定帖子时才加载评论，而不是在页面呈现时立即加载所有内容。 我如何使用 React 和 React Query 实现这一点？

这是我当前用于获取和显示评论的示例代码：

我的帖子组件

 import React from 'react'; import { useQuery } from 'react-query'; const PostComponent = ({ post }) => { const { data, isLoading, error } = useQuery( ['comments', post.id], () => fetchComments(post.id) ); return ( <div> {/* Render your post component */} {isLoading && <div>Loading comments...</div>} {error && <div>Error fetching comments</div>} {data && ( <div><p>{post.title}</p> </div> )} </div> ); };

我的帖子页面组件

 import React from 'react'; import { useQuery } from 'react-query'; const PostsPage = () => { const { data, isLoading, error } = useQuery('posts', fetchPosts); return ( <div> {isLoading && <div>Loading posts...</div>} {error && <div>Error fetching posts</div>} {data && data.map((post) => ( <PostComponent key={post.id} post={post} /> ))} </div> ); };

Answer 1

要实现此目标，您需要两个组件。

1. Intersection Observer API - 用于阻止组件是否在视口中
2. React Query Dependent Queries (enabled flag) - 当组件在视口中时启用使用查询

为了在 React 应用程序中简化与Intersection Observer API的交互，您应该使用react-intersection-observer库中的useInView挂钩。

 import React from 'react'; import { useQuery } from "react-query"; import { useInView } from "react-intersection-observer"; const PostComponent = ({ post }) => { const { ref, inView } = useInView(); const { data, isLoading, error } = useQuery( ["comments", post.id], () => fetchComments(post.id), // the useQuery hook will fetch only when inView is enabled { enabled: inView } ); return ( <div ref={ref}> {isLoading && <div>Loading comments...</div>} {error && <div>Error fetching comments</div>} {data && ( <div> <p>{post.title}</p>{" "} </div> )} </div> ); };

查看更多：

• 现场演示代码和盒子