为什么要用graphql？让我们回顾一下我们现在使用的API设计风格。纯休息：一个端点对应一个资源。优点：灵活解构。缺点：因为一个端点对应一个资源，所以需要多次请求。Rest：一个端点对应一个视图。优点：一次Request，得到的就是需要的缺点：不够灵活，耦合度高，维护成本高，迭代慢以上就是常用的两种接口方法，两者各有优缺点。有没有可以利用所有优势的解决方案？？我们需要一个标准的API层，也就是GraphQL。请注意，GraphQL是一个规范，是Facebook提倡的规范，而不是一个实现。GraphQL有以下三种定义：一种用于描述数据类型和关系的API定义语言，一种可以描述需要获取的具体数据的查询语言，以及一种可以解析为数据单一属性的可执行模型。GraphQL是什么样子的？这样理解起来可能看起来比较难，没关系，直接上代码吧。GraphQL实践由于GraphQL是一个规范，它不是一个实现。如果要自己实现，还是有难度的。别着急，强大的开源社区已经为我们准备好了。这是Apollo开源项目。Apollo提供了丰富的后端实现（节点支持：express、koa、hapi、restify等框架）和前端（React、RN、Angular、IOS、Android等）实现。官方文档：http://dev.apollodata.com/too...。下面的实践都是基于Apollo基于nodejs的Express框架实现的。演示代码：https://github.com/jasondu/ap...1.如何搭建GraphQL服务器Stepstobuildaserverimportexpressfrom'express';import{graphqlExpress,graphiqlExpress,}from'apollo-server-express';从'body-parser'导入bodyParser；从'./data/schema'导入架构；//定义GraphQL查询格式constGRAPHQL_PORT=3002;constgraphQLServer=express();graphQLServer.use('/graphql',bodyParser.json(),graphqlExpress({schema}));//实现GraphQL接口函数graphQLServer.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}));//实现GraphQL浏览器调试接口graphQLServer.listen(GRAPHQL_PORT,()=>console.log(`GraphiQL现在运行在http://localhost:${GRAPHQL_PORT}/graphiql`));懂Express的童鞋应该能看到上面的代码，我解释一下：apollo-server-express是Apollo提供的一个库，用于在express环境下实现grapql。这里使用graphqlExpress的两个类来实现grapql接口的功能。graphiqlExpress是实现grapql浏览器（Anin-browserIDEforexploringGraphQL.）类的调试接口，多了一个“i”。后面可以看到这个调试界面。schema是定义GraphQL查询格式的书写模式。让我们看看Schema.js是如何写的。导入{makeExecutableSchema,}来自'graphql-tools';importresolversfrom'./resolvers';//DefineschemaconsttypeDefs=`typeAuthor{#作者的字段包括：id,name,和发布的帖子id:IntfirstName:StringlastName:Stringposts:[Post]}typePost{#帖子的字段包括以下，包括哪个作者写的帖子id:Inttitle:Stringtext:Stringviews:Intauthor:Author}typeQuery{#定义查询内容author(firstName:String,lastName:String):Author#查询作者信息getFortuneCookie:String}`;constschema=makeExecutableSchema({typeDefs,resolvers});exportdefaultschema;这里使用了Apollo提供的makeExecutableSchema方法。数据转换为GraphQLSchema实例typeDefs，定义了三种格式Author、Post、Query，其中Query为查询时返回的结构，Author、Post为Query中解释的结构类型。接下来，我们就可以编写具体的实现了。WriteResolversconstresolvers={Query:{author(root,args){//args是上面schema中author的入参return{id:1,firstName:'Hello',lastName:'World'};},},Author:{//在作者中定义帖子posts(author){return[{id:1,title:'Apost',text:'Sometext',views:2},{id:2,title:'Anotherpost',text:'Someothertext',views:200}];},},Post:{//在Post中定义作者author(post){return{id:1,firstName:'Hello',lastName:'World'};},},};导出默认解析器；上面的代码比较简单，这里就不多解释了。至此，我们就完成了一个GraphQL服务器的开发，添加我们的npmi&npmstart，启动吧！打开http://localhost:3002/graphiql，可以看到前面提到的graphiql，也就是GraphQL浏览器调试接口。graphiql可以支持关联函数，可以非常快速地编写查询语句。2、如何在客户端查询GraphQL数据（以react为例）步骤使用create-react-app创建项目，根据Apollo客户端方案库修改：react-apollocreate-react-appclient&yarnaddreact-apolloApp.jsimportReact,{Component}from'react';importlogofrom'./logo.svg';import'./App.css';//------添加内容--------//import{ApolloClient,ApolloProvider,createNetworkInterface,gql,graphql,}from'react-apollo';//设置接口地址constnetworkInterface=createNetworkInterface({uri:'http://localhost:3002/graphql'});constclient=newApolloClient({networkInterface,});constTest=({data:{loading,error,author}})=>{if(loading){return
Loading...
;}if(error){return{error.message}
;}return(