Graphql尝鲜
在只学习graphql client端知识的过程中,我们常常需要一个graphql ide来提示graphql语法,以及实现graphql的server端来进行练手。 graphql社区提供了graphiql让我们使用
graphiql (npm):一个交互式的运行于浏览器中的 GraphQL IDE.
但graphiql提供的live demo基本打不开,难道刚接触graphql就要自己实现graphql的server端? 好在github用graphql写了一套api,我们可以去这里,登陆后即可体验一把graphql。
graphql client端选择
graphql在前端实现有以下方案。
Relay (github) (npm):Facebook 的框架,用于构建与 GraphQL 后端交流的 React 应用。
Apollo Client (github):一个强大的 JavaScript GraphQL 客户端,设计用于与 React、React Native、Angular 2 或者原生 JavaScript 一同工作。
graphql-request:一个简单的弹性的 JavaScript GraphQL 客户端,可以运行于所有的 JavaScript 环境(浏览器,Node.js 和 React Native)—— 基本上是 fetch 的轻度封装。
Lokka:一个简单的 JavaScript GraphQL 客户端,可以运行于所有的 JavaScript 环境 —— 浏览器,Node.js 和 React Native。
nanogql:一个使用模板字符串的小型 GraphQL 客户端库。
从npm download数量上看Apollo Client是最多的,并且Apollo也有服务端的解决方案,所以这里选择Apollo Client作为graphql的client端 apollo client对于web 框架都有具体的实现,但是我更希望能像axios那样去使用graphql,而不是每套web框架都要去学一下具体实现,那样会折腾死自己。
初始化项目
// 使用vue-cli初始化项目
vue init webpack-simple my-project
npm i
复制代码
安装graphql
npm i apollo-cache-inmemory apollo-client apollo-link apollo-link-http
npm i graphql graphql-tag
复制代码
项目结构如下
.
├── index.html
├── package.json
├── package-lock.json
├── README.md
├── src
│ ├── App.vue
│ ├── graphql // 接口
│ │ ├── search.graphql
│ │ └── search.js
│ ├── main.js
│ └── utils
│ └── graphql.js // 对Apollo-client封装
└── webpack.config.js
复制代码
apollo-client
接下来对apollo-client进行封装,加上中间件(实现类似于axios拦截器的效果)。 graphql.js
import ApolloClient from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { HttpLink } from 'apollo-link-http'
import { onError } from 'apollo-link-error'
import { ApolloLink, from } from 'apollo-link'
const token = '598ffa46592d1c7f57ccf8173e47290c6db0d549'
const Middleware = new ApolloLink((operation, forward) => {
// request时对请求进行处理
console.log('Middleware', operation, forward)
})
const Afterware = new ApolloLink((operation, forward) => {
return forward(operation).map(response => {
// 服务器返回数据
console.log('Afterware--response', response)
return response
})
})
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.map(({ message, locations, path }) =>
console.log(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
),
);
if (networkError) console.log(`[Network error]: ${networkError}`);
});
const httpLink = new HttpLink({
uri: 'https://api.github.com/graphql', // 配置请求url
headers: { // 配置header
Authorization: `Bearer ${token}`
}
})
const cache = new InMemoryCache() // 缓存
export default new ApolloClient({
link: from([Middleware, Afterware, errorLink, httpLink]),
cache
})
复制代码
配置webpack支持.graphql文件
// 在rules下添加以下规则
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
}
复制代码
search.graphql
query searchR ($keyword: String!) {
search (query: $keyword , type: REPOSITORY){
userCount
}
}
复制代码
search.js
import client from '../utils/graphql'
// import gql from 'graphql-tag'
import { searchR } from './search.graphql'
export const search = (params) => client.query({
query: searchR,
variables: params
})
复制代码
到这里我们已经可以直接调用/graphql/下导出的function