该问题通常会发生在组件重新渲染并重新获取查询结果时。此时,Apollo 尝试使用之前已经缓存的数据来更新组件,但其中的一些数据已经过时,导致无法在缓存中找到。因此,缺少了一些数据,结果导致了渲染错误。
为了解决这个问题,可以通过在 useQuery
hook 或 Query
组件中传入 fetchPolicy
参数为 “network-only” 来忽略缓存,从而在每次重新渲染组件时获取最新的数据:
import { useQuery } from '@apollo/react-hooks';
const MyComponent = () => {
const { loading, error, data, refetch } = useQuery(MY_QUERY, {
fetchPolicy: 'network-only',
});
if (loading) return Loading...
;
if (error) return Error :(
;
return (
{data.test}
);
};
这样可以保证每次重新获取数据时,都会忽略缓存,从而避免了数据不一致的问题。