Apollo客户端本地状态缓存竞争条件

Question

因此，我一直试图在React应用程序中使用apollo-boost来使用缓存，在查询中使用@client指令来管理我的客户端状态，但我遇到了一些问题。

基本上，我使用writeQuery()将布尔值写入一个组件(我们称之为组件a)中的本地应用程序状态，并希望在componentDidUpdate方法中使用readQuery()在另一个组件中获得该值(我们称其为组件B)。问题是，在组件A中的writeQuery设置缓存/本地状态中的值之前，组件B中的readQuery()正在运行，因此组件B读取的值出现错误。

我已经通过使用setTimeout来延迟readQuery()来确认这一点，事实上，在使用超时之后，值是正确的，但这个解决方案是不可信的，我可能不知道Apollo客户端中有什么，因为这个功能对于本地状态管理来说是非常基本的。有什么建议吗？

我相信在Redux中，这一问题得到了解决，因为状态被注入到props中，这使得组件更新，所以组件A是改变状态的那个组件，组件B甚至不必使用componentDidUpdate来获得新值，因为状态会被注入，组件B会用正确的值更新。

任何帮助都将不胜感激，如果我没有说清楚，我很抱歉！

EDIT:writeQuery()正在突变解析程序中使用。

Answer 1

readQuery和writeQuery等方法用于读取和修改突变内部的缓存。通常，它们不应直接在组件内部使用。通过调用readQuery，您只从缓存中获取数据一次。相反，您应该使用Query组件。

const TODO_QUERY = gql`
query GetTodos {
todos @client {
id
text
completed
}
}
`
<Query query={TODO_QUERY}>
{({ data }) => {
if (data.todos) return <ToDoListComponent todos={data.todos}/>
return null
}}
</Query>

Query组件订阅了对缓存的相关更改，因此data的值将在缓存订阅时更新。

类似地，您应该为要对缓存进行的任何更改创建适当的突变，然后使用Mutation组件来实际突变缓存。

const client = new ApolloClient({
clientState: {
defaults: {
todos: []
},
resolvers: {
Mutation: {
addTodo: (_, { text }, { cache }) => {
const previous = cache.readQuery({ query: TODO_QUERY })
const newTodo = { id: nextTodoId++, text, completed: false, __typename: 'TodoItem' }
const data = {
todos: previous.todos.concat([newTodo]),
}
cache.writeQuery({ query, data })
return newTodo
},
},
}
}
})
<Mutation mutation={ADD_TODO}>
{(addTodo) => (
// use addTodo to mutate the cache asynchronously
)}
</Mutation>

请查看文档以了解更多详细信息。