Optimumkan pertanyaan data untuk React dan React Query hanya berlaku apabila komponen berada dalam viewport

Question

Saya mempunyai halaman yang menggunakan React untuk memaparkan senarai komponen siaran dan untuk setiap komponen siaran saya mendapat ulasan yang berkaitan dengan siaran itu dan memaparkannya di dalam menggunakan perpustakaan React Query. Masalahnya ialah apabila pengguna memuatkan halaman siaran, React Query memuatkan semua ulasan untuk semua siaran sekaligus, yang menyebabkan bahagian belakang saya menjadi perlahan.

Saya mahu melaksanakan mekanisme yang hanya memuatkan ulasan apabila pengguna menatal ke siaran tertentu, bukannya memuatkan semuanya sekali gus apabila halaman dipaparkan. Bagaimana untuk mencapai ini menggunakan React and React Query?

Ini ialah kod sampel semasa saya untuk mendapatkan dan memaparkan ulasan:

Komponen Catatan Saya

import React daripada 'react';
import { useQuery } daripada 'react-query';

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

  kembali (
    <div>
      {/* Render komponen siaran anda */}
      {isLoading && <div>Memuatkan ulasan...</div>}
      {error && <div>Ralat mendapatkan ulasan</div>}
      {data &&
       <div><p>{post.title}</p>
      )}
    </div>
  );
};

Komponen Halaman Catatan Saya

import React daripada 'react';
import { useQuery } daripada 'react-query';

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

  kembali (
    <div>
      {isLoading && <div>Memuatkan siaran...</div>}
      {ralat && <div>Ralat mendapatkan siaran</div>}
      {data &&
        data.map((post) => (
          <PostComponent key={post.id} post={post} />
        ))}
    </div>
  );
};

Answer 1

Untuk mencapai matlamat ini, anda memerlukan dua komponen.

1. Intersection Observer API - digunakan untuk menentukan sama ada komponen berada dalam viewport
2. React Query Dependent Query (bendera didayakan) - Mendayakan penggunaan pertanyaan apabila komponen berada dalam viewport

Untuk memudahkan interaksi dengan Intersection Observer API dalam apl React anda, anda harus menggunakan API daripada react-intersection-observerIntersection Observer API的交互，您应该使用来自react-intersection-observer库的useInView cangkuk useInView perpustakaan.

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