GraphQL基于nodejs的例子，如何运行第一个demo？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

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

测试环境：win10，node@16.14.0，graphql@15.8.0/graphql@16.3.0。

下载graphql

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

• https://newsn.net/say/graphql.html

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

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

npm i graphql --save

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

npm i graphql@15 --save

有关nodejs及npm如何安装，如何加速的文章，可以点击下面的链接：

• https://newsn.net/say/centos-node-bin-2.html
• https://newsn.net/say/centos-node-bin.html
• https://newsn.net/say/centos-node.html
• https://newsn.net/say/node-n.html
• https://newsn.net/say/node-nvm.html

官方原版代码

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

• https://graphql.org/code/#javascript

基于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正处在15和16的版本更替过程中，它们的函数并不一致，所以，您可能会碰到一些错误提示信息。不必着急，并不是你复制错代码了，也不是查询语句的问题。只不过是大版本更替，api函数不兼容导致的。这其中的道理，可以点击下面的链接了解：

• https://newsn.net/say/software-version.html

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

Error: Expected undefined to be a GraphQL schema.

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

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

npm ls graphql

相关的说明文章，请点击：

• https://newsn.net/say/npm-version.html

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

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

改良版代码

对于本文来说，graphql的15和16版本并不兼容，两者的差异在于最后的调用形式。苏南大叔改良版的代码如下：

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");
}

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

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@15中，graphql(schema, '{ hello }', root)中的{ hello }，就是模拟的输入数据。
• 在GraphQL@16中，这个{ hello }查询语句，就体现为source参数。

参考文献

• https://graphql.org/
• https://graphql.org/learn/
• https://graphql.org/code/

总结

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

更多graphql的文章，请参考苏南大叔的博客：

• https://newsn.net/tag/graphql/

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