问题描述: 在使用Apollo GraphQL的useQuery时,我发现在我声明data为空对象之前,useQuery无法正常工作。
解决方法:
import { useQuery } from '@apollo/client';
import { gql } from 'apollo-boost';
const GET_DATA = gql`
query GetData {
// your query
}
`;
const MyComponent = () => {
const [data, setData] = useState({}); // 初始data值为空对象
const { loading, error } = useQuery(GET_DATA, {
onCompleted: (result) => {
setData(result); // 更新data的值为查询结果
}
});
if (loading) {
return Loading...;
}
if (error) {
return Error! {error.message};
}
// 使用data进行渲染
return (
// render data
);
};
import { useQuery } from '@apollo/client';
import { gql } from 'apollo-boost';
const GET_DATA = gql`
query GetData {
// your query
}
`;
const MyComponent = () => {
const { loading, error, data } = useQuery(GET_DATA, {
fetchPolicy: 'cache-and-network' // 设置fetchPolicy为'cache-and-network'
});
if (loading) {
return Loading...;
}
if (error) {
return Error! {error.message};
}
// 使用data进行渲染
return (
// render data
);
};
通过以上两种方法,你可以在声明data为空对象之前让useQuery正常工作。