Optimiser les requêtes de données pour React et React Query afin qu'elles se produisent uniquement lorsque le composant est dans la fenêtre d'affichage.

Question

J'ai une page qui utilise React pour afficher une liste de composants de publication, et pour chaque composant de publication, je reçois les commentaires liés à cette publication et les affiche à l'intérieur à l'aide de la bibliothèque React Query. Le problème est que lorsque l'utilisateur charge la page de publication, React Query charge tous les commentaires de toutes les publications en même temps, ce qui ralentit mon backend.

Je souhaite implémenter un mécanisme qui charge uniquement les commentaires lorsque l'utilisateur fait défiler vers une publication spécifique, au lieu de tout charger en même temps lors du rendu de la page. Comment y parvenir en utilisant React et React Query ?

Voici mon exemple de code actuel pour obtenir et afficher des commentaires :

Mon composant de publication

importer React depuis 'react';
importer { useQuery } depuis 'react-query' ;

const PostComponent = ({ post }) =>
  const {données, isLoading, erreur} = useQuery(
    ['commentaires', post.id],
    () => récupérer les commentaires (post.id)
  );

  retour (
    

      {/* Afficher votre composant de publication */}
      {isLoading && 
Chargement des commentaires...
}
      {erreur && 
Erreur lors de l'obtention des commentaires
}
      {données &&
       
{post.title}
      )}
    
  );
};



Composant Ma page de publication


importer React depuis 'react';
importer { useQuery } depuis 'react-query' ;

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

  retour (
    

      {isLoading && 
Chargement des messages...
}
      {erreur && 
Erreur lors de l'obtention des messages
}
      {données &&
        data.map((post) => (
          
        ))}
    
  );
};

Answer 1

Pour atteindre cet objectif, vous avez besoin de deux composants.

1. API Intersection Observer - utilisée pour déterminer si un composant est dans la fenêtre
2. React Query Dependent Queries (indicateur activé) - Permet l'utilisation de requêtes lorsque le composant est dans la fenêtre

Pour simplifier l'interaction avec l'API Intersection Observer dans votre application React, vous devez utiliser l'API de react-intersection-observerIntersection Observer API的交互，您应该使用来自react-intersection-observer库的useInViewLe hook useInView de la bibliothèque.

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>
  );
};