Apollo Client多组件useQuery加载优先级优化方案咨询

刚好之前处理过类似的多可视化组件+Apollo查询的性能问题，给你分享几个亲测有效的方案，完美解决视口内组件优先加载、顶部查询插队的需求：

一、视口内组件优先加载：用Intersection Observer实现懒加载查询 #

核心思路就是让不在视口的组件先不发起useQuery，等用户滚动到该组件进入视口范围时，再触发数据请求。我们可以封装一个简单的监听hook来实现：

1. 封装Intersection Observer Hook #

import { useState, useEffect, useRef } from 'react';

const useIntersectionObserver = (options = { threshold: 0.1 }) => {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setIsVisible(true);
        observer.unobserve(entry.target); // 只触发一次查询，避免重复监听
      }
    }, options);

    if (ref.current) observer.observe(ref.current);

    return () => {
      if (ref.current) observer.unobserve(ref.current);
    };
  }, [options]);

  return [ref, isVisible];
};

2. 在可视化组件中使用 #

把你的可视化组件包裹在监听容器里，只有当组件进入视口时才执行useQuery：

import { useQuery } from '@apollo/client';
import { useIntersectionObserver } from './hooks';

const ChartComponent = () => {
  const [ref, isVisible] = useIntersectionObserver();
  // 只有组件可见时才发起查询
  const { data, loading } = isVisible 
    ? useQuery(YOUR_CHART_QUERY) 
    : { data: null, loading: false };

  return (
    <div ref={ref} className="chart-container">
      {loading ? <div>加载中...</div> : data && <YourChartRender data={data} />}
    </div>
  );
};

这样页面初始化时只会加载视口内的组件请求，滚动到其他组件时才会触发对应的查询，不会一开始就把20个请求全部打出去拖慢速度。

二、给顶部组件的查询设置优先级 #

Apollo Client其实支持通过查询上下文设置请求优先级，让顶部组件的查询优先被处理，不会被其他请求阻塞：

import { useQuery } from '@apollo/client';

const TopHeaderChart = () => {
  const { data, loading } = useQuery(TOP_PRIORITY_QUERY, {
    context: {
      priority: 'high' // 也可以用数字，比如10，数值越高优先级越高
    }
  });

  return (
    <div className="top-chart">
      {loading ? <div>顶部图表加载中...</div> : data && <TopChart data={data} />}
    </div>
  );
};

Apollo的查询调度器会根据这个优先级排序请求队列，高优先级的查询会被优先发送和处理，确保顶部组件最快拿到数据加载完成。

三、额外优化建议 #

除了上面两个核心方案，还有几个小技巧能进一步提升性能：

• 合并重复查询：如果多个组件用到相同的数据，不妨在父组件发起一次大查询，然后通过props或Context把数据分发给子组件，减少请求数量。
• 优化缓存策略：合理设置fetchPolicy，比如对不常变化的数据用cache-first，避免重复请求；需要实时数据的用cache-and-network。
• 避免不必要的重渲染：给组件加上memo包装，或者用useMemo缓存查询结果，减少组件不必要的重渲染消耗。

内容的提问来源于stack exchange，提问作者mbn