在前段时间使用graphql获取数据，感觉获取数据来说是方便了一些，但是也爆出了一系列的问题。先来graphql的使用方法…
- 下载依赖包
需要搭配Apollo一起使用
npm install -S apollo-cache-inmemory apollo-client apollo-link apollo-link-context apollo-link-http- 配置
(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() //需要添加这个 })以上配置算是可以了
- 观察后台数据格式
例如格式是这样的
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! }- 在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返回的数据只读，不可更改，原来是想添加一个属性的，至今未找到解决方法，如果有解决办法的大神请留言，谢谢。
报错： 
疑似解决方法 但是只是说明不符合格式，并没有说明怎么解决