React および React Query のデータ クエリを最適化して、コンポーネントがビューポート内にある場合にのみ実行されるようにします。

Question

React を使用して投稿コンポーネントのリストをレンダリングするページがあり、投稿コンポーネントごとにその投稿に関連するコメントを取得し、React Query ライブラリを使用して内部に表示します。問題は、ユーザーが投稿ページを読み込むときに、React Query がすべての投稿のすべてのコメントを一度に読み込むため、バックエンドの速度が低下することです。

ページのレンダリング時にすべてを一度に読み込むのではなく、ユーザーが特定の投稿までスクロールしたときにのみコメントを読み込むメカニズムを実装したいと考えています。 React と React Query を使用してこれを実現するにはどうすればよいでしょうか?

これは、コメントを取得して表示するための現在のサンプル コードです。

私の投稿コンポーネント

React を 'react' からインポートします。
import { useQuery } から 'react-query';

const PostComponent = ({ post }) => {
  const { データ、isLoading、エラー } = useQuery(
    ['コメント', post.id],
    () => fetchComments(post.id)
  );

  戻る （
    <div>
      {/* 投稿コンポーネントをレンダリングします */}
      {isLoading && <div>コメントを読み込み中...</div>}
      {error && <div>コメント取得エラー</div>}
      {データ&&(
       <div><p>{post.title}</p> </div>
      )}
    </div>
  );
};

マイ投稿ページコンポーネント

React を 'react' からインポートします。
import { useQuery } から 'react-query';

const PostsPage = () => {
  const { データ、isLoading、エラー } = useQuery('posts', fetchPosts);

  戻る （
    <div>
      {isLoading && <div>投稿を読み込み中...</div>}
      {error && <div>投稿の取得エラー</div>}
      {データ&&
        data.map((post) => (
          <PostComponent key={post.id} post={post} />
        ))}
    </div>
  );
};

Answer 1

この目標を達成するには、2 つのコンポーネントが必要です。

1. Intersection Observer API - コンポーネントがビューポート内にあるかどうかを判断するために使用されます
2. React Query dependent Queries (有効フラグ) - コンポーネントがビューポート内にあるときにクエリの使用を有効にします

React アプリで Intersection Observer API との対話を簡素化するには、react-intersection-observer の useInView フックを使用する必要があります。図書館 。

リーリー