ApolloClient-useQuerydoesn'tre-renderwhendataarrives
- 确定组件是否正确使用了useQuery Hooks 例：
import React from 'react'; import { useQuery, gql } from '@apollo/client';
const GET_POSTS = gql query GetPosts { posts { id title body } };
function PostList() { const { loading, error, data } = useQuery(GET_POSTS);
if (loading) return
Loading...
; if (error) returnError :(
;return (
{post.title}
{post.body}
- 确定查询是否正确调用并且查询结果会触发组件重新渲染（例如：父组件中的props、状态变化） 例：
import React, { useState } from 'react'; import { useQuery, gql } from '@apollo/client';
const GET_USER = gql query GetUser($email: String!) { user(email: $email) { id name email } };
function UserDetail({ email }) { const [status, setStatus] = useState(''); const { loading, error, data } = useQuery(GET_USER, { variables: { email }, onCompleted: () => setStatus('completed'), onError: () => setStatus('error'), });
if (status === 'completed') { return (
{data.user.name}
{data.user.email}
Invalid email.
; } return loading ?Loading...
: null; }- 如果前两遍检查都没有解决问题，可以尝试适当增加useQuery中的fetchPolicy参数，例如"cache-and-network"会尽可能从缓存中获取数据，但是如果缓存无效或不可用则会从网络中获取最新的数据。 例：
const { loading, error, data } = useQuery(GET_USER, { variables: { email }, fetchPolicy: 'cache-and-network', });