在前段时间使用graphql获取数据，感觉获取数据来说是方便了一些，但是也爆出了一系列的问题。先来graphql的使用方法…

1. 下载依赖包
   需要搭配Apollo一起使用

npm install -S apollo-cache-inmemory apollo-client apollo-link apollo-link-context apollo-link-http

2. 配置（main.js中进行配置）

(1）先引入依赖包

import {ApolloClient} from 'apollo-client'
import {HttpLink} from 'apollo-link-http'
import {InMemoryCache} from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
import {ApolloLink} from 'apollo-link'

(2)配置请求路径

const apiLink = new HttpLink({
  uri: 'http://127.0.0.1：8080/v2/api'    //请求路径
})

(3)中间件添加请求头（如果不需要略掉这一步）

const middlewareLink = new ApolloLink((operation, forward) => {
  const token = sessionStorage.getItem('access_token')
  operation.setContext({
    headers: {
      Authorization: `Bearer ${token}` || null
    }
  })
  return forward(operation)
})

（4）创建Apollo连接

const apiClient = new ApolloClient({
  link: middlewareLink.concat(apiLink),  //如果不添加请求头直接放路径
  cache: new InMemoryCache()
})

（5）如果需要使用两个路径，例如一个添加请求头，一个不需要加

const apolloProvider = new VueApollo({
  clients: {
    api: apiClient,   //需要添加请求头
    base: baseClient   //不需要添加请求头
  },
  defaultClient: baseClient  //默认请求路径，如果只有一个请求就使用这个就行
})

（6）在vue中引入

Vue.use(VueApollo)
new Vue({
  el: '#app',
  router,
  provide: apolloProvider.provide()  //需要添加这个
})

以上配置算是可以了

---

3. 观察后台数据格式
   例如格式是这样的

type APIQuery {
  workorder(code: String!): WorkOrder!
}
type WorkOrder {
  id: Int!
  code: String!
  status: Int!
  shipto: String!
  quantity: Int!
  product: Product!    //带二级数据，需要查询二级
  choices: [choicesItem!]!  //二级数组
  logistics: String!
  notes: String!
  images: String!
  created_at: String!
  updated_at: String!
}

type choicesItem{
  name: String!
  quantity: Int!
  level: Int!
  size: String!
  attributes: String!
}

4. 在apollo.js里写前台语法
   前端graphql可以这样写

import gql from 'graphql-tag'  //引入graphql
export default apollo = {
	workorder: gql `query APIQuery($code: String!){  //如果类型后面带！表示该参数必填
    workorder(code:$code){
      code
      status
      created_at
      updated_at
      quantity
	  product {
	   code
	   name
	   price
	  }
      choices {   //二级查询，带[]
        name
        quantity
        size
        attributes
      }
    }
  }`
}

5.xx.vue文件中引入语法

import gql from '../apollo'
this.$apollo
 .query({
   query: gql.workorder,
   variables: {
     code: this.$route.params.code
   },
   client: 'api'      //如果请求不同的路径用client标识选的路径
 })
 .then(response => {
   
 })
 .catch(error => {
   
 })

至此graphql能运行起来了，开头说爆出的问题：
1、apollo返回的数据只读，不可更改，原来是想添加一个属性的。
报错：

解决的话可以把对象先转化为字符串再转化成对象，即：
let a=JSON.parse(JSON.stringfy(a))