Graphql & Apollo
下图是2018年前端data layer工具的趋势图。我曾经在某一期博客提到过这张图，当时只注意了第二名的Graphql。后来发现排名第三的Apollo其实也是Graphql系列的工具，全名是apollo link state。
Graphql & Apollo
Apollo也是使用Graphql语法管理数据，稍显不同的是它并不与后端通信，是纯粹的浏览器Local Data管理工具。Graphql在今年实现了前后端一统。
本期默认大家已经有了一定的vue和graphql背景知识，作为延伸学习，简单介绍一下Graphql在前端操作state management的一些方法。
vue-apollo
VUE主要通过vue-apollo集成Graphql Client框架。用法很简单，普通的插件集成。配一下默认的link和cache就可以连接后台graphql server了。（Apollo需要在link里加stateLink，后面再谈。）
vue-apollo-graphql
Vue.use(VueApollo);
const httpLink = new HttpLink( {uri: '/graphql'} );
const cache = new InMemoryCache();
// Create the apollo client
const apolloProvider = new VueApollo({
defaultClient: new ApolloClient({link, cache})
});
new Vue({
...
apolloProvider,
...
});
添加Apollo Provider后，我们不再需要通过mounted/created发起请求，一切数据处理委托给Graphql，通过apollo provider即可直接绑定客户端graphql cache的数据。从某种意义上来说，graphq cache可被视为一层data layer来管理SPA的全局state。因此Graphql推出不久，影响最大的不是后端的rest api，反倒是前端的Redux。
// in *.vue
<template>
<div>Get Todos from server: {{ todos }}</div>
</template>
<script>
export default {
apollo: {
todos: gql`{
todos: getTodos {
id
text
}
}
`,
},
...
}
<script>
Memory Cache
Memory Cache是Graphql存储数据的平台。如下所示，前端与后端交互后，Graphql客户端会在浏览器Cache里驻留response数据，然后通过这些全局缓存来管理状态。前端的graphql query默认的fetchPolicy是cache-first（顾名思义优先使用缓存，未命中则向后端请求数据，更新缓存后再渲染UI），除此之外还可以定制cache-and-network、cache-only、network-only等策略。
Store data in Graphql cache
这里提一下，Memory Cache是通过key-value表单形式存储每一个对象。即便是数组内的对象也会被规格化存储。默认的primary key是id（或_id）和 __typename的组合键。当然也可以自定义主键。
state update
如上图所示，点击
UPDATE按钮后，触发的是某个对象的mutation操作，并未再次query State数组；但是mutation请求返回后更新了<id, __typename>主键对应的某块缓存，state数组也随之更新。
update () {
this.$apollo.mutate({
mutation: gql`mutation ($id: Int, $text: String!) {
update(id: $id, text: $text) {
id
text
}
}`,
variables: {
id: 0,
text: `Updated`,
},
});
}
Apollo
今年下半年的时候Apollo大版本更新了graphql client，推出了apollo link state，我当时没及时更近后来还折腾了一番。
apollo client 2.0
Apollo Client开始支持Rest api和local state的数据管理。Apollo通过新的directive（@rest、@client）指向不同的数据。如下是一个拼接了Graphql、rest和local state的查询。
const getUser = gql`
query getUser($id: String) {
user(id: $id) {
id
name @rest(route: '/todos/name')
cart @client
}
}
`;
Apollo遵循的还是Graphql的实现方式，只是把resolver放在了前端；通过直接读写cache里的数据更新state。这下就真没Redux什么事了。
const stateLink = withClientState({
cache,
resolvers: {
Mutation: {
addTodo: (_, { id, text }, { cache }) => {
const newTodo = {id, text, __typename: 'Todo'}
const {todos} = cache.readQuery({ query });
todos.push(newTodo)
const data = { todos };
cache.writeData({ data });
return newTodo;
},
}
}
});
const client = new ApolloClient({
cache,
link: ApolloLink.from([stateLink, new HttpLink()]),
});
小结
以上是这段时间我自己学习Apollo Graphql的一些总结。虽然接触不深，但还是可以感觉到Graphql带来的便捷。Apollo甚至给出了一套完整的前后端数据管理方案，初学者在前后端的学习成本变得更低了。相信2019年Graphql还会是前端开发的潮流，这种趋势已经不是rest、redux可阻挡的存在了。希望身边有更多小伙伴来和我一起学习，一起体验这种新的变化。
网友评论