Apollo Client更新后无法向父组件传参，查询完成后需传函数求方案

我来帮你搞定这个问题～其实核心思路很简单：让父组件提前传一个回调函数作为prop给你的Query组件所在的子组件，等Query查询完成（拿到数据且无错误）时，直接调用这个回调函数就能把信息或者执行逻辑传递给父组件了。

下面给你两种具体的实现方案：

方案一：直接在Query渲染回调里调用父组件的函数 #

先在父组件里定义好回调函数，然后传给子组件：

// 父组件代码
const ParentComponent = () => {
  // 定义查询完成后的处理逻辑
  const handleQueryFinish = (dogData) => {
    console.log('子组件查询完成啦，拿到的狗狗数据：', dogData);
    // 这里可以写你需要的其他逻辑，比如更新父组件的state
  };

  return (
    <div>
      <h1>我的狗狗照片</h1>
      {/* 把回调函数作为prop传给子组件 */}
      <DogPhoto breed="golden" onQueryComplete={handleQueryFinish} />
    </div>
  );
};

然后修改你的子组件（包含Query的组件），接收这个回调prop，在查询完成时调用：

// 子组件DogPhoto代码
const DogPhoto = ({ breed, onQueryComplete }) => {
  return (
    <Query query={GET_DOG_PHOTO} variables={{ breed }}>
      {({ loading, error, data }) => {
        if (loading) return null;
        if (error) {
          console.error('查询出错了：', error);
          return `Error!: ${error}`;
        }

        // 确保传入的是函数，避免报错
        if (typeof onQueryComplete === 'function') {
          onQueryComplete(data);
        }

        return (
          <img 
            src={data.dog.displayImage} 
            style={{ height: 100, width: 100 }} 
          />
        );
      }}
    </Query>
  );
};

方案二：用useQuery钩子配合useEffect（更可控） #

如果你用的是函数组件，推荐改用Apollo的useQuery钩子，配合React的useEffect，可以更精准地控制回调的触发时机（避免组件重复渲染时多次调用）：

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

const DogPhoto = ({ breed, onQueryComplete }) => {
  const { loading, error, data } = useQuery(GET_DOG_PHOTO, {
    variables: { breed },
  });

  // 当加载完成、无错误且有数据时，触发父组件的回调
  useEffect(() => {
    if (!loading && !error && data) {
      onQueryComplete(data);
    }
  }, [loading, error, data, onQueryComplete]);

  if (loading) return null;
  if (error) return `Error!: ${error}`;

  return (
    <img 
      src={data.dog.displayImage} 
      style={{ height: 100, width: 100 }} 
    />
  );
};

这种方式下，只有当data真正更新且查询完成时，才会执行回调，不会因为组件的其他渲染触发多余的调用。

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