介绍定义了一种API调用的数据查询语言核心思想传统的API调用一般得到后端组装的一个完整的对象，而前端可能只需要用到其中的部分字段，的大部分工作查询和传输数据是浪费的。graphQL提供了一种新的数据查询方式，只获取需要的数据，使API调用更加灵活、高效和低成本。特性随便拿数据支持关系型数据查询API无需定义各种路由，完全数据驱动无需管理API版本，一个版本不断演进支持大部分主流开发语言和平台强大的配套开发工具使用方法下面我们搭建一个SpaceX新闻网站，直观的了解graphQL的基本用法，所有数据均来自官方API。服务器服务器使用node+express。创建一个新的节点项目并安装以下依赖项：$npmigraphqlexpress-graphqlexpressaxios创建一个入口文件server.js，它创建express服务。要使用graphQL，我们只需要设置一个路由，所有请求都由这个graphQL请求处理程序处理：constexpress=require('express');constgraphqlHTTP=require('express-graphql');constschema=require('./schema');constapp=express();app.use('/graphql',graphqlHTTP({schema,graphiql:true}));constPORT=process.env.PORT||5000;app.listen(PORT,()=>console.log(`服务器在端口${PORT}`));graphqlHTTP是grapql的http服务，用来处理graphql的查询请求，它接收一个options参数，其中schema是一个GraphQLSchema实例，我们接下来定义graphiql设置为true，直接在浏览器中调试graphQL。更多express-graphql的用法，请参考Githubexpress-graphql。schema接下来我们定义schema，意思是‘mode’，它定义了数据模型的结构，字段的类型，以及模型之间的关系，这是graphQL的核心。新建一个schema.js文件，首先定义两个数据模型：LaunchType（发射）和RocketType（火箭）。注意字段的数据类型需要使用GraphQL来定义，不能使用js中的基础数据类型。const{GraphQLObjectType、GraphQLInt、GraphQLString、GraphQLBoolean、GraphQLList、GraphQLSchema}=require('graphql');constLaunchType=newGraphQLObjectType({name:'Launch',fields:()=>({flight_number:{type:GraphQLInt},mission_name:{type:GraphQLString},launch_date_local:{type:GraphQLString},launch_success:{type:GraphQLBoolean},火箭:{类型:RocketType},})});constRocketType=newGraphQLObjectType({name:'Rocket',fields:()=>({rocket_id:{type:GraphQLString},rocket_name:{type:GraphQLString},rocket_type:{type:GraphQLString}})});我们有了数据模型之后，需要从数据库或者第三方API中获取数据，这里我们从spacex官方的API中获取。我们需要定义一个根查询，作为所有查询、处理和返回数据的入口。有关更多信息，请参阅GraphQL根字段和解析器。在schema.js中添加代码：constaxios=require('axios');...constRootQuery=newGraphQLObjectType({name:'RootQueryType',fields:{launches:{type:newGraphQLList(LaunchType),resolve(parent,args){returnaxios.get('https://api.spacexdata.com/v3/launches').then(res=>res.data);}}}});module.exports=newGraphQLSchema({查询：RootQuery});查询列表完成这一步，服务端api基本搭建完成！让我们来看看效果。在浏览器中输入http://localhost:5000/graphql会打开Graphiql（生产环境建议关闭）：我们只能查询所有flight_number:或者更多的属性：是不是很简单很神奇！对于单个查询，我们也可以通过传入参数来查询单条信息：constRootQuery=newGraphQLObjectType({name:'RootQueryType',fields:{...launch:{type:LaunchType,args:{flight_number:{type:GraphQLInt}},resolve(parent,args){returnaxios.get(`https://api.spacexdata.com/v3/launches/${args.flight_number}`).then(res=>res.数据）;}}}}）;结果：我们只是在前端使用GraphiQL调用了浏览器中的接口。接下来我们看看如何在前端页面调用graphql服务。我们在前端使用React。在项目根目录下初始化react项目：$npxcreate-react-appclient为了方便调试，在package.json中添加脚本："start":"nodeserver.js","server":"nodemonserver.js","client":"npmstart--prefixclient","dev":"concurrently\"npmrunserver\"\"npmrunclient\""style我们在bootswatch中使用了一个主题：多少个GraphQL客户端这个项目使用最流行的GraphQL客户端Apollo。更多客户端请参考GraphQL客户端。安装依赖安装如下依赖：$cdclient$npmiapollo-boostreact-apollographql其中apollo-boost是apollo客户端本身，react-apollo是react视图层的集成，graphql用于解析graphql查询声明。设置客户端修改App.js内容如下：importReact,{Component}from'react';importApolloClientfrom'apollo-boost';import{ApolloProvider}from'react-apollo';import'./theme.css';导入'./App.css';从'./spacex-logo-light.png'导入徽标constclient=newApolloClient({uri:'http://localhost:5000/graphql'});类App扩展组件{render(){return(
