一步一步在AspNetCore中使用GraphQL（三）----GraphiQL搭建

1. GraphiQL基于React构建。新建一个Package.json文件。内容如下：
   

2.通过npm（cnpm）下载这些包，npm安装过程就不细说了。
首先将cmd的目录切换到package.json的目录，然后运行，注意使用管理员打开cmd

npm install

安装完之后再安装React和React-dom

npm install react –save
npm install react-dom save-dev

安装GraphQL和GraphiQL，GraphQL版本不宜过高，过高会导致GraphiQL不支持。

npm install [email protected] –save
npm install graphiql –save

安装webpack和webpack-cli打包工具。

npm install --save-dev webpack
npm install --global webpack
npm install --global webpack-cli

3.添加ClientApp文件夹，里面新建app.js和app.css内容如下：

4.添加压缩配置文件webpack，内容如下：

5.在根目录下添加打包配置文件.babelrc，内容如下:

6.在wwwroot文件夹下添加index.html文件。内容如下：

7.运行webpack打包js文件

webpack –mode development

打包时可能会报错Module not fount:Error:Can’t
resove ‘XXXXX’ in ‘XXXXXXXXXXx’，是由于npm下载的graphql包缺少东西，可以先到其他文件夹下面安装最新版的graphql包，然后将提示的文件复制到当前目录。

上图错误就是缺少下面的文件：

复制到项目对应的位置即可。后面还有一个/language/predicates文件也是一样的。
解决完如上错误再执行

webpack –mode development

就可以成功打包了。会有警告，但是没有错误。

8.由于创建的是webapi的项目。还需要在startup的管道配置中app.UseStaticFiles();

9.运行项目，在浏览器中输入http://localhost:5000/index.html

至此为止，GraphQL在AspNetCore中的基础工作就做完了，一个简单的服务端和文档查看界面GraphiQL就搭建好了。下面几节将讨论GraphQL的开发规范和类型系统。
Demo的Github地址是：LiveviL.GraphQL
GraphiQL我也在我的服务器上搭建了一套，感兴趣的可以访问一下：GraphiQL