reactjs - 有没有一种简单的方法可以使用 Apollo Client 2.5 for React 管理本地状态? 'read' 相当于 'client.writeData' 是什么?

标签 reactjs apollo react-apollo apollo-client

我正在学习 Apollo Client 2.5 的本地状态管理功能,发现它相当令人困惑。无论如何,我能够很容易地理解 Apollo Server,但事实证明这更令人畏惧。

当人们想要设置本地解析器和查询来读取本地状态时,我(有点)了解如何使用它,但是有没有一种方法可以简单地设置一些本地状态变量,就像使用 Redux 可以很容易地那样。例如,在完成登录突变时将 isLoggedIn 设置为 true?我尝试了这个(以下 https://www.apollographql.com/docs/react/essentials/local-state )

return <Mutation mutation={LOGIN} onCompleted={data => {
      if (data && data.login) {
        const {login: {token}} = data
        if (token) {
          history.push('/list')
        }
      }
    }}>
      {(register, {data, error, loading, client}) => {

        if (error) {
          return <div>{error.toString()}</div>
        }
        if (loading) return <div>Loading...</div>
        if (data && data.login) {
          const {login: {token}} = data
          if (token) {
            localStorage.setItem('token', token)
            client.writeData({isLoggedIn:true})
          }

但出现错误

Error: Error writing result to store for query: {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GeneratedClientQuery"},"selectionSet":null}]} Cannot read property 'selections' of null

但我不知道我是否正确使用了writeData。更重要的是,我如何读取数据? API 中似乎没有相应的 readData 调用。我是否需要设置 GraphQL 查询并运行该查询来查看用户是否已登录?我是否需要为该查询创建一个解析器并在构建 Apollo 客户端时包含它?

我看到一些使用 apollo-link-state 的示例,它们似乎更简单,但显然它已被弃用并包含在 Apollo Client 2.5 中。

显然,我只见树木不见森林,欢迎任何建议。

最佳答案

你差不多已经有了,你只是忘了在数据对象中传递数据而不是直接传递==>

client.writeData({ data: { isLoggedIn: false } });

关于reactjs - 有没有一种简单的方法可以使用 Apollo Client 2.5 for React 管理本地状态? 'read' 相当于 'client.writeData' 是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55936423/

相关文章:

reactjs - 改变使用 useQuery 获取的远程数据的最佳方法是什么

reactjs - 我们如何使用React-Redux Hooks API使用useSelector()和useDispatch()创建多个Reducers?

reactjs - Next.js + React 返回上一页

javascript - 使用上下文 API 进行身份验证,不断重定向到登录页面

meteor - Apollo:从 cron 作业调用变异服务器端?

javascript - GraphQL( Apollo ): Can you access directives within resolve function?

react-apollo - 为什么在 data.fetchMore 期间 data.loading 不会变为 true?

javascript - 来自 Apollo GraphQL 客户端的 Elasticsearch 查询的大小始终为十

javascript - 如果值设置为 this.state.value,React-bootstrap 表单只允许我输入?

vue.js - v-if 破坏 nuxt ssr