優化React和React Query的資料查詢，僅在元件在視窗中時進行

Question

我有一個使用React渲染帖子組件列表的頁面，對於每個帖子組件，我都會獲取與該帖子相關的評論，並使用React Query庫將其顯示在內部。問題是，當用戶加載帖子頁面時，React Query會一次加載所有帖子的所有評論，這會導致我的後端變慢。

我想實作一個機制，只有當使用者捲動到特定的貼文時才載入評論，而不是在頁面渲染時一次載入所有內容。如何使用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>
      {/* 渲染你的貼文元件 */}
      {isLoading && <div>正在加載評論...</div>}
      {error && <div>取得評論時發生錯誤</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>正在加載帖子...</div>}
      {error && <div>取得貼文時發生錯誤</div>}
      {data &&
        data.map((post) => (
          <PostComponent key={post.id} post={post} />
        ))}
    </div>
  );
};

Answer 1

為了實現這個目標，您需要兩個元件。

1. Intersection Observer API - 用於確定元件是否在視口中
2. React Query Dependent Queries（enabled標誌）- 在元件在視窗中時啟用查詢的使用

為了簡化在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>
  );
};