我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

在前面的文章中,Graphql.js配合expresskoa的例子,都做了实验。但是,express-graphqlkoa-graphql都有一个比较大的问题,就是和最新的graphql@16是不兼容的。这里,提出了一个新的解决思路,就是apollo server。这款apollo代码可以单独使用,也可以配置express或者koa使用。

苏南大叔:GraphQL.js配合Apollo的例子,ApolloServer如何使用? - graphql-apollo
GraphQL.js配合Apollo的例子,ApolloServer如何使用? (图7-1)

大家好,这里是苏南大叔的“程序如此灵动”博客,这里讲述苏南大叔和计算机代码的故事。本文讲述graphqlapollo server结合的例子。测试环境:win10node@16.14.0graphql@16.3.0apollo server@3.6.4。本文中的apollo server@3.6.4graphql@16并没有冲突的状况发生。

apollo server

graphql的官方界面上,有对apollo server的推荐:

官方的文档页面是:

ApolloServer()的函数说明如下:

苏南大叔:GraphQL.js配合Apollo的例子,ApolloServer如何使用? - 阿波罗server
GraphQL.js配合Apollo的例子,ApolloServer如何使用? (图7-2)

本文中单独使用apollo server,并不和expresskoa结合。而且schema定义,数据逻辑处理方式深度结合上一篇文章中的内容,分为文本和代码两种模式定义。可以参考:

苏南大叔:GraphQL.js配合Apollo的例子,ApolloServer如何使用? - apolloserver参数
GraphQL.js配合Apollo的例子,ApolloServer如何使用? (图7-3)

代码例子一

new ApolloServer()需要两个变量:

  • 一个是typeDefs,和以前的schema文本定义是一致的。
  • 另外一个是resolvers,这个和文本定义时的root类似,不同点是:resolvers的参数数量是两个。

完整代码如下:

const { ApolloServer, gql } = require('apollo-server');
const typeDefs = gql`
  type Query {
    "A simple type for getting started!"
    hello: String
    hola (name:String): String
    bonjour (name:String,id:Int): human
  }
  type human {
      id: Int
      name: String
      title: String
      plus: String
  }
`;
const resolvers = {
  Query: {
    hello: () => 'Hello world!',
    hola: (para,args) => '¡Hola ' + args.name + '!',
    bonjour: (para,args) => {
        return { 'id':args.id,'name':args.name,'title':'manager','plus':'wonderful'}
    }
  },
};
const server = new ApolloServer({
  typeDefs,
  resolvers,
});
server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

苏南大叔:GraphQL.js配合Apollo的例子,ApolloServer如何使用? - 默认参数传递
GraphQL.js配合Apollo的例子,ApolloServer如何使用? (图7-4)

这个略有奇怪的apollo-server的导出对象gql模版支持功能的说明文档,见下面:

{ typeDefs,resolvers } 实际上是 { typeDefs:typeDefs,resolvers:resolvers },所以,并不是不可以改名,这个是语法问题。
这两个参数的官方表述都是:Required unless you provide schema.。所以,除非给出schema,否则两个必填。

代码例子二

这个例子里面,apollo server延续代码定义schema的模式,并不存在单独的root参数,resolve是合并写在schema里面的。这个时候,new ApolloServer()仅仅需要一个变量schema

完整代码如下:

const {
    GraphQLSchema,
    GraphQLObjectType,
    GraphQLString,
    GraphQLInt,
    versionInfo
} = require('graphql');
const RootQueryType = new GraphQLObjectType({
    name: 'Query',
    description: 'Root Query',
    fields: () => ({
        hello: {
            type: GraphQLString,
            resolve() {
            return 'hello world';
            },
        },
        hola: {
            type: GraphQLString,
            description: 'hola query',
            args: {
            name: { type: GraphQLString }
            },
            resolve: (parent, args) => {
            return 'hi,' + args.name
            }
        },
        bonjour: {
        type: human,
        description: 'human bonjour',
        args: {
            id: { type: GraphQLInt },
            name: { type: GraphQLString }
        },
        resolve: (parent, args) => {
            return { id: args.id, name: args.name, title: "manager", plus:"plus" };
        }
        }
    })
});
const human = new GraphQLObjectType({
    name: 'human',
    description: 'human',
    fields: () => ({
        id: { type: GraphQLInt },
        name: { type: GraphQLString },
        title: { type: GraphQLString },
        plus: { type: GraphQLString },
    })
})
const schema = new GraphQLSchema({
    query: RootQueryType
})
const server = new ApolloServer({
    schema
});
server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

苏南大叔:GraphQL.js配合Apollo的例子,ApolloServer如何使用? - 打包传递参数
GraphQL.js配合Apollo的例子,ApolloServer如何使用? (图7-5)

查询界面

apollo server官方自带的界面,是从本地跳到了官方页面,然后官方页面的代码再探索本地的接口。不得不说,思路清奇。但是,官方界面的服务器实在不给力,速度奇慢。而且所谓的增强的代码,也并没有强大到替换graphiql的地步。个人对这个apollo的替代界面,表示些许的质疑。

跳转到官方的服务器上面的沙盒查询界面地址是:

苏南大叔:GraphQL.js配合Apollo的例子,ApolloServer如何使用? - 新的查询界面
GraphQL.js配合Apollo的例子,ApolloServer如何使用? (图7-6)

关于查询内容,apollo server的界面上给出的默认语句,比graphiql多两个单词,在{之前多两个单词,而且目前测试的情况下,这两个占位的文字可以随便乱写,都是可以顺利执行的。所以,可能是没有啥用的。否则graphiql中的默认查询语句里面,为啥没有这两个无用的占位呢?

苏南大叔:GraphQL.js配合Apollo的例子,ApolloServer如何使用? - 不同之处
GraphQL.js配合Apollo的例子,ApolloServer如何使用? (图7-7)

参考文献

本文中的apollo server@3.6.4虽然和express或者koa之类的可以无缝结合。但是,

总结

对于apollo server来说,虽然很好很强大,但是对于新人也是很难很复杂的。所以,高手可以使用apollo server,新人就老实的使用express-graphql就好。

更多graphql文章,请点击苏南大叔的博客:

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   node    graphql