Optimieren Sie die Datenabfrage für React und React Query so, dass sie nur erfolgt, wenn sich die Komponente im Ansichtsfenster befindet

Question

Ich habe eine Seite, die React verwendet, um eine Liste von Beitragskomponenten zu rendern, und für jede Beitragskomponente erhalte ich die Kommentare zu diesem Beitrag und zeige sie mithilfe der React Query-Bibliothek darin an. Das Problem besteht darin, dass React Query alle Kommentare für alle Beiträge auf einmal lädt, wenn der Benutzer die Beitragsseite lädt, was dazu führt, dass mein Backend langsamer wird.

Ich möchte einen Mechanismus implementieren, der Kommentare nur dann lädt, wenn der Benutzer zu einem bestimmten Beitrag scrollt, anstatt alles auf einmal zu laden, wenn die Seite gerendert wird. Wie erreicht man dies mit React und React Query?

Dies ist mein aktueller Beispielcode zum Abrufen und Anzeigen von Kommentaren:

Meine Beitragskomponente

import React from 'react';
import { useQuery } aus 'react-query';

const PostComponent = ({ post }) =>
  const { data, isLoading, error } = useQuery(
    ['Kommentare', post.id],
    () => fetchComments(post.id)
  );

  zurückkehren (
    <div>
      {/* Rendern Sie Ihre Beitragskomponente */}
      {isLoading && <div>Kommentare werden geladen...</div>}
      {error && <div>Fehler beim Abrufen von Kommentaren</div>}
      {Daten && (
       <div><p>{post.title}</p>
      )}
    </div>
  );
};

Komponente „Meine Beitragsseite“.

import React from 'react';
import { useQuery } aus 'react-query';

const PostsPage = () =>
  const { data, isLoading, error } = useQuery('posts', fetchPosts);

  zurückkehren (
    <div>
      {isLoading && <div>Beiträge werden geladen...</div>}
      {error && <div>Fehler beim Abrufen von Beiträgen</div>}
      {Daten &&
        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>
  );
};