Graphql前端状态管理

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