在前段時間使用graphql獲取資料，感覺獲取資料來說是方便了一些，但是也爆出了一系列的問題。先來graphql的使用方法…

1. 下載依賴包
   需要搭配Apollo一起使用

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

1. 配置

(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()  //需要新增這個
})

以上配置算是可以了

1. 觀察後臺資料格式
   例如格式是這樣的

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!
}

1. 在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.引入語法

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))