无法读取未定义的属性“重新获取”

【问题标题】：Cannot read property 'refetch' of undefined无法读取未定义的属性“重新获取”
【发布时间】：2020-12-05 23:00:49
【问题描述】：

这是我的代码

const NewVerificationCode = () => {
  const { loading, error, data = {}, refetch } = useQuery(CONFIRMATION_CODE, {
    skip: true,
    notifyOnNetworkStatusChange: true,
    fetchPolicy: "no-cache",
  });

  return <div onClick={() => refetch()}>CONFIRMATION</div>;
};

const CONFIRMATION_CODE = gql`
  query {
    my {
      sendNewTokenForConfirmation
    }
  }
`;

当我提出请求时，我得到一个错误

未捕获的类型错误：无法读取未定义的属性“重新获取”

【问题讨论】：

refetch 应该在结果中 useQuery 所以我不知道这里有什么问题。但我认为使用突变或useLazyQuery 似乎更适合您的用例。

标签： graphql apollo-client

【解决方案1】：

data = {}

看起来您试图从未定义的data 错误中“逃脱” - 不推荐的方法...使用

if(loading) return <Loading />

...在主要内容之前或

if(data) return <div onClick={() => refetch()}>CONFIRMATION</div>;
return null;

skip 选项阻止钩子执行，所以不可能有refetch。只需使用useLazyQuery 或使用一些状态来控制skip 选项，比如：

const [blocked, setBlocked] = useState(true);
const { loading, error, data = {}, refetch } = useQuery(CONFIRMATION_CODE, {
  skip: blocked,
  notifyOnNetworkStatusChange: true,
  fetchPolicy: "no-cache",
});

if(data) return <div onClick={() => {if(blocked) setBlocked(false) else refetch()}}>CONFIRMATION ... {data.someValue}</div>;
return null;
};

【讨论】：