如何在React子组件中直接获取并使用Apollo Client对象？

嘿，这个需求我太熟了！你想要在Toolbar组件里直接拿到Apollo Client实例，不用通过props层层传递，而且不想依赖useQuery（毕竟你只是要执行操作，不需要渲染数据），其实有几个非常顺手的方法：

这是Apollo Client专门为函数组件提供的钩子，就是用来直接获取上下文里的client实例的，完全不需要关联任何渲染逻辑，正好匹配你的场景。

代码示例：

// Toolbar.js
import { useApolloClient } from '@apollo/client';
// 导入你的mutation（更新操作推荐用mutation而非query，符合GraphQL规范）
import { UPDATE_DATA_MUTATION } from './your-queries';

function Toolbar() {
  // 直接从上下文拿到client实例
  const client = useApolloClient();

  const saveButtonClicked = async () => {
    try {
      // 执行更新操作
      const response = await client.mutate({
        mutation: UPDATE_DATA_MUTATION,
        variables: {
          // 传入你的更新参数，比如目标ID、新内容等
          itemId: 123,
          newContent: '更新后的内容'
        }
      });
      console.log('更新成功:', response.data);
      // 这里可以添加成功提示、缓存刷新等后续操作
    } catch (error) {
      console.error('更新失败:', error);
      // 处理错误，比如给用户显示提示
    }
  };

  return (
    <div className="toolbar">
      <button onClick={saveButtonClicked}>Save</button>
    </div>
  );
}

export default Toolbar;

这个方法之所以最推荐，是因为它是官方设计的语义化钩子，内部已经帮你处理了从Apollo上下文获取client的逻辑，用法和其他React Hooks一致，代码清晰易维护，还能兼容Apollo后续的版本更新。

如果你想直接操作上下文，也可以用React原生的useContext钩子配合Apollo的上下文对象：

// Toolbar.js
import { useContext } from 'react';
import { ApolloContext } from '@apollo/client';
import { UPDATE_DATA_MUTATION } from './your-queries';

function Toolbar() {
  const client = useContext(ApolloContext);
  
  // 后续的saveButtonClicked逻辑和上面完全一致
  const saveButtonClicked = async () => {
    // ...
  };

  return <button onClick={saveButtonClicked}>Save</button>;
}

不过这个方法不如useApolloClient推荐，因为如果以后Apollo的上下文结构发生变化，你可能需要修改代码，而官方钩子会帮你自动兼容这些变化。

你提到用client.query来做更新操作，其实按照GraphQL的规范：查询数据用query，修改数据（增删改）用mutation，所以你的更新操作更适合用client.mutate，这样既符合最佳实践，也能让其他开发者更容易理解你的代码意图。

另外，你之前觉得useQuery需要返回渲染数据——其实不是必须的，但如果只是为了执行一次操作，直接调用client.query或client.mutate会更高效，因为useQuery会自动监听缓存变化并重新执行，而你不需要这个特性。

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