可能是由于缓存或异步加载的原因,导致useQuery返回的loading始终是true。为了解决这个问题,我们可以使用fetchPolicy属性来配置useQuery的行为。fetchPolicy属性用于控制使用缓存还是从服务器获取最新数据。
下面是一个示例代码:
import { useQuery, gql } from "@apollo/client";
const GET_DATA = gql`
query GetData {
// query语句
}
`;
const MyComponent = () => {
const { data, loading, error } = useQuery(GET_DATA, {
fetchPolicy: "cache-and-network" // 设置fetchPolicy属性
});
if (loading) return Loading... // 渲染loading状态
return (
// 渲染组件
);
};
在上面的示例代码中,我们将fetchPolicy属性设置为“cache-and-network”,这意味着我们会先从缓存获取数据,然后从服务器获取最新数据。这样可以保证我们获取到的数据是最新的,并且loading状态将会在数据加载完成后消失。