Apollo-Client的refetchQueries
选项允许你在执行GraphQL查询后重新获取其他查询。
通常,在执行GraphQL查询后,Apollo-Client将更新缓存并更新UI以反映返回的新数据。但是,有时你可能希望重新获取其他查询以获取与当前查询相关的数据。
下面是一个示例,展示了如何使用refetchQueries
选项:
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://example.com/graphql',
cache: new InMemoryCache(),
});
// 定义一个查询
const GET_USER_QUERY = gql`
query GetUser($id: ID!) {
user(id: $id) {
id
name
}
}
`;
// 定义一个突变
const UPDATE_USER_MUTATION = gql`
mutation UpdateUser($id: ID!, $name: String!) {
updateUser(id: $id, name: $name) {
id
name
}
}
`;
// 执行查询并更新UI
client.query({
query: GET_USER_QUERY,
variables: { id: '123' },
}).then(result => {
// 更新UI
});
// 执行突变并重新获取查询
client.mutate({
mutation: UPDATE_USER_MUTATION,
variables: { id: '123', name: 'John' },
refetchQueries: [{ query: GET_USER_QUERY, variables: { id: '123' } }],
}).then(result => {
// 更新UI
});
在上面的示例中,我们定义了一个GET_USER_QUERY
查询和一个UPDATE_USER_MUTATION
突变。首先,我们执行了GET_USER_QUERY
查询来获取用户数据并更新UI。然后,我们执行了UPDATE_USER_MUTATION
突变来更新用户的名称,并使用refetchQueries
选项重新获取GET_USER_QUERY
查询。这将导致Apollo-Client重新执行GET_USER_QUERY
查询,并使用新的数据更新UI。
请注意,refetchQueries
选项接受一个查询配置对象数组,每个对象都包含要重新获取的查询和相应的变量。在上面的示例中,我们以{ query: GET_USER_QUERY, variables: { id: '123' } }
的形式提供了一个查询配置对象。
希望这可以帮助你理解Apollo-Client的refetchQueries
选项是如何工作的!
上一篇:Apollo-Client + Express-Graphql 后端 - 会话不持久化?
下一篇:Apollo-Client refetch - TypeError: undefined is not an object (阿波罗客户端重新获取数据 - 类型错误:未定义的对象)