使用Apollo串行执行GraphQL查询并传递变量的问题求助

我明白你遇到的问题了——要在Apollo里串行执行GraphQL查询，而且后一个查询的变量得依赖前一个的结果，但组件挂载时没法预先拿到这些变量对吧？别担心，有两种实用的方案可以解决这个问题，我给你详细说说：

方案一：使用useLazyQuery手动触发第二个查询 #

useLazyQuery允许你手动触发查询，而不是组件挂载就自动执行。我们可以先执行第一个查询，等拿到结果后，再调用useLazyQuery返回的函数来启动第二个查询，同时传入从第一个结果里拿到的变量。

示例代码：

import { useQuery, useLazyQuery } from '@apollo/client';
import { GET_INITIAL_DATA, GET_DEPENDENT_DATA } from './your-query-files';

function DependentQueryComponent() {
  // 第一个查询：组件挂载自动执行，无需依赖变量
  const { data: initialData, loading: firstLoading, error: firstError } = useQuery(GET_INITIAL_DATA);
  
  // 第二个查询：用useLazyQuery定义，等待手动触发
  const [getDependentData, { data: dependentData, loading: secondLoading, error: secondError }] = useLazyQuery(GET_DEPENDENT_DATA);

  // 监听第一个查询的结果，拿到数据后触发第二个查询
  useEffect(() => {
    // 确保第一个查询的结果存在，避免传入undefined变量
    if (initialData?.requiredVariable) {
      getDependentData({ 
        variables: { 
          dependentVar: initialData.requiredVariable 
        } 
      });
    }
  }, [initialData, getDependentData]);

  // 处理加载和错误状态
  if (firstLoading || secondLoading) return <div>加载中...</div>;
  if (firstError) return <div>第一个查询出错：{firstError.message}</div>;
  if (secondError) return <div>第二个查询出错：{secondError.message}</div>;

  // 渲染最终数据
  return (
    <div>
      <h2>依赖查询结果：</h2>
      <p>{dependentData.targetField}</p>
    </div>
  );
}

这个方案的好处是灵活性高——你可以在触发第二个查询前加额外的判断逻辑，比如验证数据格式，或者等待用户交互后再执行。

方案二：利用useQuery的skip选项延迟执行第二个查询 #

如果你不需要额外的触发逻辑，只是想等第一个查询完成后自动执行第二个，那么可以用useQuery的skip选项。这个选项可以控制查询是否被跳过，我们把它设置为“当第一个查询结果不存在时跳过”，同时将第一个结果作为第二个查询的变量。

示例代码：

import { useQuery } from '@apollo/client';
import { GET_INITIAL_DATA, GET_DEPENDENT_DATA } from './your-query-files';

function DependentQueryComponent() {
  // 第一个查询：组件挂载自动执行
  const { data: initialData, loading: firstLoading, error: firstError } = useQuery(GET_INITIAL_DATA);
  
  // 第二个查询：根据第一个结果的存在性决定是否执行
  const { data: dependentData, loading: secondLoading, error: secondError } = useQuery(GET_DEPENDENT_DATA, {
    // 当initialData里的requiredVariable不存在时，跳过查询
    skip: !initialData?.requiredVariable,
    // 传入依赖变量，可选链避免undefined报错
    variables: { dependentVar: initialData?.requiredVariable }
  });

  // 处理加载和错误状态
  if (firstLoading || secondLoading) return <div>加载中...</div>;
  if (firstError) return <div>第一个查询出错：{firstError.message}</div>;
  if (secondError) return <div>第二个查询出错：{secondError.message}</div>;

  // 渲染最终数据
  return (
    <div>
      <h2>依赖查询结果：</h2>
      <p>{dependentData.targetField}</p>
    </div>
  );
}

这个方案更简洁，代码量更少，适合简单的依赖场景。Apollo会自动监听skip选项和variables的变化，当skip变为false时，就会自动执行第二个查询。

两种方案都能完美解决你“前一个查询结果作为下一个变量”的需求，你可以根据自己的场景选择最合适的一种。

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