GraphQL是一个用于API的查询语言,是一个使用基于类型系统来执行查询的服务端运行时
下图展示graphql所处的位置
1。GraphQL API有强类型模式
GraphQL模式是强类型的,可使用SDL (GraphQL模式定义语言)来定义,比如,可以使用构建工具验证API请求,编译时检查API调用可能发生的错误
2。按需获取
在不添加后端接口的前提下减少不必要的字段,做到前端自主订阅字段
1。安装vue脚手架npm安装- g vue-cli
2。安装vue-apollo客户端vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
webpack.base.conf
3.。js安装加载器加载graphql后缀文件
{
测试:/\。(graphql | gql)/美元,
排除:/node_modules/,
装载机:“graphql-tag/加载程序”
},
之前
4.主要。js添加
从“apollo-client”进口{ApolloClient}
从“apollo-link-http”进口{HttpLink}
从“apollo-cache-inmemory”进口{InMemoryCache}
从“vue-apollo”进口VueApollo
const httpLink=new httpLink ({//在这里您应该使用一个绝对URL//配置。js代理设置///graphql: {//目标:“http://eshipe.net: 3000/graphql”,//changeOrigin:没错,//pathRewrite: {//' ^/graphql ': '/graphql '//}//},
uri:‘/graphql ',//访问地址,在这里使用代理
})//创建阿波罗客户机
const apolloClient=new apolloClient ({
链接:httpLink,
缓存:新InMemoryCache (),
connectToDevTools:没错,
})//安装vue插件
Vue.use (VueApollo)
const apolloProvider=new VueApollo ({
defaultClient: apolloClient,
})
新Vue ({
路由器,
商店,
提供:apolloProvider.provide()//注册全局组件
})。山美元(#应用)
5。添加搜索。graphql文件
//定义查询
查询q_user ($ id: Int) {
用户(id: $ id) {
id
地址
的名字
}
}
6。具体的vue组件中
1。从“graphql-tag”;进口gql
2。从'search进口{q_user}。graphql '
3。具体方法中使用
美元。apollo.query ({
查询:q_user,
变量:{
id: 1、
},
})。然后(res=比;{
console.log (res)
})。抓住(呃=比;{
console.log (err)
})
1。npm版本问题
解决思路:npm版本回退npm安装- g npm@4.6.1
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
