在React中使用Apollo的refetchQuery时，如何为组件未调用的查询传Id？

首先得明确：你遇到的报错核心是查询定义了必填参数，但没有给它提供参数来源——因为你没在组件内调用这个查询，查询库不知道该用什么Id去执行请求，所以抛出了参数缺失的错误。下面给你几个可行的解决思路：

1. 在组件内正常调用查询并传入Id #

如果这个查询是组件渲染时需要用到的，直接用查询钩子（比如React Query的useQuery）调用它，把Id作为参数传入：

// 假设你用的是React Query
import { useQuery } from '@tanstack/react-query';

function SongDetail({ songId }) {
  // 把songId作为查询键的一部分，同时传入查询函数
  const { data: song, isLoading } = useQuery(
    ['song', songId], // 查询键，用来区分不同Id的缓存
    () => fetchSong(songId) // 传入Id给查询函数
  );

  if (isLoading) return <div>Loading...</div>;
  return <div>{song.title}</div>;
}

这样组件挂载时，查询库会拿到songId并执行fetchSong，不会再报参数缺失的错误。

2. 定义为惰性查询（手动触发） #

如果你不需要组件挂载时就执行这个查询，而是需要手动触发（比如点击按钮后），可以用惰性查询，这样只有你主动调用时才需要传入Id：

import { useLazyQuery } from '@tanstack/react-query';

function SongPlayer() {
  const [fetchSong, { data: song }] = useLazyQuery(
    ['song'],
    ({ queryKey }) => {
      const [_, targetId] = queryKey;
      return fetchSong(targetId);
    }
  );

  // 点击按钮时传入Id触发查询
  const handlePlaySong = (songId) => {
    fetchSong({ queryKey: ['song', songId] });
  };

  return (
    <div>
      <button onClick={() => handlePlaySong('123')}>播放歌曲123</button>
      {song && <div>当前播放：{song.title}</div>}
    </div>
  );
}

惰性查询不会在组件挂载时自动执行，只有你调用fetchSong方法并传入Id时才会发起请求，完美避开初始化时的参数缺失问题。

3. 检查你之前的options传参方式 #

你之前尝试在导出时用options传参数失败，大概率是因为参数的传递位置不对。查询的参数需要和查询的执行绑定（比如作为查询函数的输入、查询键的一部分），而不是放在导出的options里——options一般用来配置缓存、重试等行为，不是用来传业务参数的。

总结一下：只要让查询库知道什么时候用什么Id去执行fetchSong，这个报错就会消失。要么在组件渲染时传入Id自动执行，要么定义成惰性查询手动触发传参。

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