React中设置skip为true调用GraphQL查询后为何无法获取数据或错误？

核心问题1：未解构data变量 #

你的代码里没有从useQuery的返回值中解构data，所以自然无法访问到查询返回的数据。修改解构语句即可：

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

const { loading, error, data, refetch } = useQuery(GET_CARD_DETAILS, {
  variables: {
    confirmationId,
    name,
  },
  skip: true,
});

核心问题2：忽略refetch的返回值 #

refetch本身会返回一个Promise，包含本次查询的data和error，你可以直接在调用时获取结果，无需依赖组件状态更新：

const handleFetchData = async () => {
  try {
    const result = await refetch();
    if (result.error) {
      // 处理查询错误
      console.error(result.error);
      return;
    }
    // 直接使用返回的数据
    console.log(result.data);
  } catch (err) {
    // 处理请求异常
    console.error(err);
  }
};

补充说明：skip模式下的初始状态 #

当skip设为true时，useQuery不会执行初始查询，因此初始的data和error都是undefined。只有调用refetch后，组件重新渲染，这两个变量才会更新。渲染时要处理这种空值情况：

return (
  <div>
    <button onClick={handleFetchData}>Fetch Data</button>
    {loading && <p>加载中...</p>}
    {error && <p>查询出错：{error.message}</p>}
    {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
  </div>
);

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