为什么 Apollo useQuery 钩子会在出错时导致无限重新渲染？

问题描述

我使用 Apollo 的 useQuery 钩子和 graphql.macro 库从 .graphql 文件加载查询。这是在 create-react-app 项目中，所以没有自定义 webpack 配置。

该组件始终以加载状态开始，如果网络请求成功则工作。但是，如果网络请求不成功，组件会重新渲染并无限重试请求。解决方案是将调用移动到 loader 自定义挂钩之外的 useData，但为什么呢？ useQuery 钩子是否基于 DocumentNode 在内部记忆请求？如果是这样，为什么这只发生在错误状态而不是请求成功时？

useData.ts

export const useData = (dataID: string = '') => {
  const dataQuery = loader('../graphql/queryData.graphql');
  const { data,error,loading } = useQuery<IData>(dataQuery,{
    variables: { id: dataID },});

  return { data,loading };
};

component.tsx

export const ViewData: React.FunctionComponent<Props> = ({ dataID }) => {
  const { data,loading } = useData(dataID);

  if (loading) {
    return <div>Loading Data...</div>;
  }

  if (error) {
    return (
      <div>
        {`Failed to find data ${dataID},please check the ID and try again.`}
      <div/>
    );
  }

  const { name,type } = data;

  return (
    <div>
      { `displaying ${name} of ${type}` }
    </div>
  );
};

感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）