nuxt GraphQl关于请求(返回)头信息那些事

最近换了一个环境，重新起航，接触到的项目是用nuxt开发，接口调用有用到graphql，这个东西以前也没接触过，耗了比较久的时间来研究这个东西，后来老大说，我们后端以后都不用graphql了，so...wtf

nuxt配置

1，先装nuxt/apollo

npm install @nuxtjs/apollo --save

2，nuxt.config.js

{
  modules: [
     '@nuxtjs/apollo' 
  ]，
  apollo: {
    clientConfigs: {
      default: {
        // required
        httpEndpoint: 'http://localhost:4000/graphql'
      },
      // 配置第二个端点
        web: '~/plugins/apollo-config-custom.js'
      }
  }
}

3，在plugins目录新建apollo-config-custom.js 名字随意

1. 添加请求头

const config = require('~/config')

// process.env.BASE在运行命令传进来的，pagage.json里面进行配置即可，dev/test/prev/prod
const base = process.env.BASE || 'dev'

export default function(context) {
  const { query } = context
  let token = ''
  // 客户端渲染
  if (process.client) {
    if (query.token) {
      token = query.token
    } 
  } 
  // https://stackoverflow.com/questions/57596674/how-to-catch-and-modify-apollo-response-globally
  // https://github.com/nuxt-community/apollo-module/issues/127
  return {
    httpEndpoint: config.api[base].web,
    browserHttpEndpoint: '/api',
    link: constructorMiddleware,
    inMemoryCacheOptions: {
      addTypename: false
    },
    httpLinkOptions: {
      headers: { // 添加请求头
        token // 请求头 token字段
      }
    },
    getAuth: () => `Bearer ${token}`
  }
}

2. 获取response
   实际运用apollo请求接口后发现，需要的服务器时间戳后端放在了data同级，而Apollo是对返回值进行了封装，并且返回值不允许修改；通过查看nuxt-apollo , apollo文档貌似都没看到有对response的获取的方法，可能是自己英文不太好吧，最后google到了一个获取返回值的方法：

// apollo-config-custom.js
import { ApolloLink } from 'apollo-link'
const constructorMiddleware = new ApolloLink((operation, forward) => {
    return forward(operation).map(response => {
      const newResponse = {
        data: Object.assign(response.data, { serverTimestamp: response.serverTimestamp })
      }
      // 想到一个方法，把response.serverTimestamp 绑定到nuxt全局变量context中，这样就能在需要的地方获取到了
      context = Object.assign(context, { serverTimestamp: response.serverTimestamp })
      return newResponse // 发现response无法修改
    })
  })

...
return {
  ...
  link: constructorMiddleware,
  ...
}

总结

通过对Apollo的研究，对Apollo有了进一步的了解，对通过文档没找到解决需求的方法时，更多的养成了去阅读源码的习惯去找解决办法的习惯，在找如果添加请求的头的时候，由于忽略了文档中提到的httpLinkOptions的提示注释，在网上查了很久，最后再源码中通过查找header发现就是用到了htppLinkOptions参数。如果你也在使用Apollo或者nuxt项目中有用到Apollo，需要添加自定义请求头字段的话，或许对你有帮助~