使用Apollo的 useQuery 钩子时,有时候我们会发现当数据未改变时,函数组件不会重新渲染。这是因为 Apollo 在默认情况下使用了浅比较来判断查询结果是否发生变化,当它不能检测到数据的变化时,就不能触发重新渲染。
为了解决这个问题,我们可以使用 useQuery 的一个选项:options.fetchPolicy
。这个选项定义了数据更新的策略,在其中设置为 options.fetchPolicy = 'network-only'
可以让 Apollo 忽略缓存并从服务器重新获取数据,即使数据没有改变也会触发重新渲染。
以下是一个示例代码:
import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
const GET_USERS = gql`
query getUsers {
users {
id
name
}
}
`;
function UsersList() {
const { loading, error, data } = useQuery(GET_USERS, {
fetchPolicy: 'network-only',
});
if (loading) return Loading...
;
if (error) return Error :(
;
return (
{data.users.map(user => (
- {user.name}
))}
);
}
export default UsersList;