要解决Apollo-Client在单独的查询中未更新UI中的“Loading __typename”字段的问题,你可以按照以下步骤进行:
addTypename
选项。这将确保在查询中包含__typename
字段。import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://your-graphql-api.com',
cache: new InMemoryCache(),
addTypename: true, // 启用addTypename选项
});
useQuery
钩子时传递了正确的查询和选项。import { useQuery, gql } from '@apollo/client';
const GET_DATA = gql`
query GetData {
// 查询数据
}
`;
function MyComponent() {
const { loading, error, data } = useQuery(GET_DATA, {
// 选项
});
if (loading) {
return Loading...
;
}
if (error) {
return Error: {error.message}
;
}
// 渲染UI
}
确保在选项中没有禁用addTypename
选项。
typename
字段到useQuery
钩子的options
中。import { useQuery, gql } from '@apollo/client';
const GET_DATA = gql`
query GetData {
// 查询数据
}
`;
function MyComponent() {
const { loading, error, data } = useQuery(GET_DATA, {
// 添加typename字段
fetchPolicy: 'cache-and-network',
nextFetchPolicy: 'cache-first',
});
if (loading) {
return Loading...
;
}
if (error) {
return Error: {error.message}
;
}
// 渲染UI
}
确保在options
中设置了适当的fetchPolicy
和nextFetchPolicy
,并使用cache-and-network
和cache-first
策略来确保在从网络获取数据时更新UI中的“Loading __typename”字段。
通过遵循上述步骤,你应该能够解决Apollo-Client未更新UI中“Loading __typename”字段的问题。