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

苏南大叔在上一篇文章中阐述了大量自己对graphql究竟是什么的观点后,本文将要讲述第一个graphql的小例子(代码基于node)。当然,作为第一个入门例子,您也可以根据您的喜好选择其它语言的demo,在官方的页面上都有列出各种选择。这里苏南大叔就是随手选了个nodejs的范例。

苏南大叔:GraphQL基于nodejs的例子,如何运行第一个demo? - graphql-demo-nodejs
GraphQL基于nodejs的例子,如何运行第一个demo?(图5-1)

大家好,这里是苏南大叔的“程序如此灵动”博客,这里讲述苏南大叔和计算机代码的故事。本文讲述如何基于nodejs运行第一个graphql的代码。

测试环境:win10node@16.14.0graphql@15.8.0/graphql@16.3.0

下载graphql

前一篇文章中,苏南大叔已经详细阐述了GraphQL究竟是个什么事物的观点,它是一个新的接口查询语言。如果您还不知道它具体是个什么事物,可以点下面的链接查看:

关于下载graphql,鉴于它的极为奇特的功用及身份。所以,它并不是一款独立的软件。它只是一款标准,每个语言下都有自己的基于其标准的实现。所以,在每个不同的高级编程语言(node/java/php/go等等)里面,graphql它都是单独下载的。

本文中的代码是基于nodejs的。当前最新版是graphql@16.3.0,安装命令是:

npm i graphql --save

然而普及程度更多的版本是15系列。如果降级安装的话,命令是:

npm i graphql@15 --save

有关nodejsnpm如何安装,如何加速的文章,可以点击下面的链接:

官方原版代码

这里本地运行一个nodejs的代码,例子是官方提供的,见下面的链接:

苏南大叔:GraphQL基于nodejs的例子,如何运行第一个demo? - 官方范例代码
GraphQL基于nodejs的例子,如何运行第一个demo?(图5-2)

基于nodejs的官方原版范例代码:

var { graphql, buildSchema } = require('graphql');
var schema = buildSchema(`
  type Query {
    hello: String
  }
`);
var root = { hello: () => 'Hello world!' };
graphql(schema, '{ hello }', root).then((response) => {
  console.log(response);
});

版本差异

目前GraphQL正处在1516的版本更替过程中,它们的函数并不一致,所以,您可能会碰到一些错误提示信息。不必着急,并不是你复制错代码了,也不是查询语句的问题。只不过是大版本更替,api函数不兼容导致的。这其中的道理,可以点击下面的链接了解:

所以,如果您碰到这样的错误提示,就说明您本地的graphql的版本和代码的调用并不是兼容的。

Error: Expected undefined to be a GraphQL schema.

这个错误并不是代码上所显示的schema的问题,并不要纠结于是不是schema的语法错误。

苏南大叔:GraphQL基于nodejs的例子,如何运行第一个demo? - 错误截图
GraphQL基于nodejs的例子,如何运行第一个demo?(图5-3)

方案一:查看本地graphql版本号的方法如下:

npm ls graphql

相关的说明文章,请点击:

方案二:代码查看已价值的GraphQL版本号的方法:

var { version, versionInfo } = require('graphql');
console.log(version)
console.log(versionInfo)

改良版代码

对于本文来说,graphql1516版本并不兼容,两者的差异在于最后的调用形式。苏南大叔改良版的代码如下:

var { graphql, buildSchema, versionInfo } = require('graphql');
var schema = buildSchema(`
  type Query {
    hello: String
  }
`);
var root = { hello: () => 'Hello world!' };
console.log(versionInfo)
if (versionInfo.major == 15) {
  graphql(schema, '{ hello }', root).then((response) => {
    console.log(response);
  });
}
else if (versionInfo.major == 16)  {
  graphql({
    schema: schema,
    source: '{ hello }',
    rootValue: root
  }).then((response) => {
    console.log(response);
  });
}
else{
    console.log("todo");
}

然而上面这个代码也就是针对1516进行的切换,并没有处理其它版本的情况,所以请大家理性的复制代码。

苏南大叔:GraphQL基于nodejs的例子,如何运行第一个demo? - 改良版代码
GraphQL基于nodejs的例子,如何运行第一个demo?(图5-4)

graphql的版本号是graphql@15系列的话,那么运行下面的代码:

graphql(schema, '{ hello }', root).then((response) => {
    console.log(response);
});

graphql的版本号是graphql@16系列的话,那么运行下面的代码:

graphql({
    schema: schema,
    source: '{ hello }',
    rootValue: root
}).then((response) => {
    console.log(response);
});

运行结果:

苏南大叔:GraphQL基于nodejs的例子,如何运行第一个demo? - 运行结果
GraphQL基于nodejs的例子,如何运行第一个demo?(图5-5)

模拟用户输入部分:

  • GraphQL@15中,graphql(schema, '{ hello }', root)中的{ hello },就是模拟的输入数据。
  • GraphQL@16中,这个{ hello }查询语句,就体现为source参数。

参考文献

总结

既然升级到了graphql@16了,官方也不加个特别说明,导致大量新人懵逼。本文的代码正确运行,是基于本地的graphql的版本号的。所以,请确认相关事宜。

更多graphql的文章,请参考苏南大叔的博客:

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

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

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

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