如何解决为什么 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 举报,一经查实,本站将立刻删除。