前端使用

在使用http请求graphql服务器时的载体仍然是json，所以即使不使用任何特殊的库也可以与graphql服务器通信。

使用axios方式获取

先用比较经典的axios来试一下，创建一个html文件

  1.   <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
  2.   <script>
  3.     const query = `query($color:String) {
  4.       getBox {
  5.         width
  6.         balls (color:$color){
  7.           size
  8.           color
  9.         }
  10.       }
  11.     }`;
  12.     const variables = {
  13.       color: "red"
  14.     };
  15.     axios
  16.       .post("http://localhost:4000/graphql", {
  17.         query,
  18.         variables
  19.       })
  20.       .then(res => {
  21.         console.log("res: ", res);
  22.       });
  23.   </script>

另外GET也是完全合法的

  1.  axios.get("http://localhost:4000/graphql", {
  2.         params: { query, variables }
  3.             })

或者直接访问

  1. http://localhost:4000/graphql?query=query($color:String){getBox{width,balls(color:$color){size,color}}}&variables={"color":"red"}

相比传统方式，graphql的特点就是返回值可预测，而且因为地址、请求方式和参数名固定，封装起来更简单。

现在看一下专业的客户端是这么做的，既然服务端使用了apollo-server，那客户端就看一下apollo-client怎么做的apollo-client官网。因为提供了错误处理，数据缓存，错误处理等等，配置项稍显复杂，官方提供了一个apollo-boost的东西简化了配置。我们可以自己对照官方实现一个简化版，深入学习一下。

作者：Type_Zer0
链接：https://juejin.im/post/5d9eef9151882520233f5b8c
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

typescript & type-graphql

迎合潮流，我们需要typescript的加持，否则怎么写都会被认为是玩具。

我们思考一个问题:
typescript的类型和graphql都是对模型的描述，基本一致，只在语法上有一些区别，能不能通用呢。官方提供了相关的API实现这个需求，但是语法并不简洁，type-graphql也许是更好的选择。

先导入typescript和type-graphql,还有之前用到的包的描述文件，另外type-graphql扫描注解用到了reflect-metadata这个还未进入标准的特性，所以需要引入这个包。

  1. yarn add typescript type-graphql reflect-metadata @types/mysql @types/express

typescript老规矩，先写tsconfig.json,大概有以下内容就差不多了

  1. {
  2.   "compilerOptions": {
  3.     "target": "es6",
  4.     "module": "commonjs",
  5.     "lib": ["es6", "es7", "esnext", "esnext.asynciterable"],
  6.     "noImplicitAny": false,
  7.     "moduleResolution": "node",
  8.     "baseUrl": ".",
  9.     "esModuleInterop": true,
  10.     "inlineSourceMap": true,
  11.     "experimentalDecorators": true,
  12.     "emitDecoratorMetadata": true,
  13.     "watch": true
  14.   }
  15. }

然后把所有require改成import，后缀名js改成ts就行了如果有报错就写个any

ts项目如何运行

运行项目我们使用ts-node，全局安装ts-node之后执行ts-node index.ts即可启动。

:::tips 正式项目我们可以使用pm2指定解释器或者将项目编译成js来运行。 :::

然后我们将type-graphql引入项目。
非常遗憾的是引入type-graphql后代码结构发生大改，除了数据库相关的内容基本可以重写了，graphql文件也不需要了。先建立一个models文件夹，新增两个文件Box.ts和Ball.ts

https://juejin.im/post/5d9eef9151882520233f5b8c#heading-17