问题描述: 在使用Apollo Graphql的useQuery钩子时,如果由于网络错误而重试查询,数据不会更新。
解决方法: 您可以使用Apollo Graphql的refetch功能来解决这个问题。refetch函数可以重新执行查询并更新数据。
以下是一个代码示例:
import React from 'react';
import { useQuery } from '@apollo/client';
import { gql } from 'apollo-boost';
const GET_DATA = gql`
query GetData {
data {
id
name
}
}
`;
const MyComponent = () => {
const { loading, error, data, refetch } = useQuery(GET_DATA);
if (loading) return Loading...
;
if (error) return Error: {error.message}
;
return (
{data.data.map(item => (
{item.name}
))}
);
};
export default MyComponent;
在上面的示例中,我们首先定义了一个名为GET_DATA的GraphQL查询。然后,在MyComponent组件中使用useQuery钩子来执行该查询,并获取loading, error, data和refetch属性。
在组件的返回部分,我们首先检查loading和error状态,并根据相应的状态显示不同的消息。如果加载中,我们显示 "Loading..." 消息;如果出现错误,我们显示错误消息。
如果没有错误,并且数据成功获取,则我们将遍历数据数组并显示每个数据项的名称。
最后,我们添加了一个按钮,当点击时调用refetch函数来重新执行查询。
这样,当由于网络错误而重试查询时,点击刷新按钮将会重新执行查询并更新数据。