从 ApolloClient 的请求中获取 clientState 数据以用于 operation.setContext 反应 apollo graphql答案

【问题标题】：get clientState data from inside ApolloClient's request for use in operation.setContext react apollo graphql从 ApolloClient 的请求中获取 clientState 数据以用于 operation.setContext 反应 apollo graphql
【发布时间】：2020-03-25 22:28:18
【问题描述】：

React - Apollo - GraphQl 大家好你们好代码是：

const client = new ApolloClient({
  uri: "http://someurl.com/graphqlserverendpoint/",
  fetchOptions:{
    credentials : "include" 
  },
  request : operation => { 
    // i want to access needed data from here
  const neededDataFromClientState = "QueryDataFromHere!!!"
  const token = localStorage.getItem('authToken') || "" ; 
    operation.setContext({
      headers: {
        Authorization : `JWT ${token}` 
      }
    })

  },
  clientState : {  
    defaults : { 
      isLoggedIn : !!localStorage.getItem('authToken') ,  
      neededData : "the data I want get"

    }
  }
});

我想从请求操作中访问名为 requiredData 的数据

有没有人愿意帮助我？谢谢。。

【问题讨论】：

奇怪的 ApolloClient 用法...来源/原因？
你想发布一个新的课程来教 apollo 客户端，以减少奇怪的 ApolloClient 使用吗？
我只是尝试在我的 django 后端实现带有 jwt-token 的身份验证系统。我是反应新手，如果你熟悉另一种语言，有时很难学习。也许我必须从 js 开始：) 我尝试存储 jwt 令牌客户端缓存并在所有请求中附加标头。我不想存储令牌浏览器存储。也许有人对此站有一些解决方案。或者也许有人在使用 jwt 令牌时提供更好的安全性建议？我搜索但没有找到任何教程。我使用 Django - graphql ， django-graphql-jwt - react

标签： reactjs graphql apollo-client

【解决方案1】：

您没有提供导入 - 您的 ApolloClient 来自 apollo-boost 项目，这就是它的配置选项不同于从 apollo-client 导入的标准的原因。

过时

Apollo Boost 项目现已退役，因为 Apollo Client 3.0 提供了类似的简单设置。我们建议删除所有 apollo-boost 依赖项并根据需要修改您的 ApolloClient 构造函数。

Apollo boost 是一个“简单的入门”项目，旨在隐藏一些配置复杂性（[几行更多]缓存和链接配置）。

解决方案

使用docs 和许多教程（如this）中描述的普通、广为人知的身份验证方法

localStorage 用于保持用户登录页面/浏览器刷新。

其他数据可以通过上下文在links 之间传递 - 数据可以像token 中的this example 一样完全存储在外部。其他（在链之后，顺序很重要）链接[-s] 可以使用 operation.getContext().token 从上下文中读取数据，而不是从 localStorage。

【讨论】：

感谢您对我的启发。我会尝试这个解决方案。谢谢谢谢..