ASP.NET Core中使用GraphQL - 第四章 GraphiQL

GraphQL ASP.NETCore · 發表 2018-11-07 20:47:00

摘要： ASP.NET Core中使用GraphQL ASP.NET Core中使用GraphQL - 第一章 Hello World ASP.NET Core中使用GraphQL - 第二章中介軟體 ASP.NET Core中使用GraphQL - 第三...

ASP.NET Core中使用GraphQL

ofollow,noindex" target="_blank">ASP.NET Core中使用GraphQL - 第一章 Hello World
ASP.NET Core中使用GraphQL - 第二章中介軟體
ASP.NET Core中使用GraphQL - 第三章依賴注入

GraphiQL 是一款內建在瀏覽器中的 GraphQL 探索工具，這個是開發 GraphQL 的一個必備工具。它就相當於WebApi中的Swagger, 使用這個工具就可以看到你的 GraphQL中 所有配置的結構，並可以在瀏覽器中測試你的 query , mutation

現在除了 GraphiQL , graphql-dotnet 還提供了另外一個GraphQL.Server的類庫, 它也可以生成一個介面更優雅的探索工具，但是由於作者聲明瞭還未在重型生產環境中測試過，所以這裡先不做介紹，後續我會單獨寫一篇博文來介紹一下。

要想使用 GraphiQL , 我們需要藉助NodeJs中的npm和webpack.

首先我們在當前Hello World專案中建立一個package.json檔案, 內容如下

{
"name": "GraphQLAPI",
"version": "1.0.0",
"main": "index.js",
"author": "Fiyaz Hasan",
"license": "MIT",
"dependencies": {
"graphiql": "^0.11.11",
"graphql": "^0.13.2",
"isomorphic-fetch": "^2.2.1",
"react": "^16.3.1",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"ignore-loader": "^0.1.2",
"style-loader": "^0.20.3",
"webpack": "^3.11.0"
}
}

然後可以使用一下命令，安裝package.json中所有預定義的庫

npm install

下一步，我們需要在當前專案目錄中建立一個新的資料夾 ClientApp , 並在其中新增2個檔案 app.js 和 app.css , 其檔案內容如下。

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import GraphiQL from 'graphiql';
import fetch from 'isomorphic-fetch';
import 'graphiql/graphiql.css';
import './app.css';

function graphQLFetcher(graphQLParams) {
return fetch(window.location.origin + '/api/graphql', {
method: 'post',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(graphQLParams)
}).then(response => response.json());
}

ReactDOM.render(
<GraphiQL fetcher={graphQLFetcher} />,
document.getElementById('app')
);

app.css

html, body {
height: 100%;
margin: 0;
overflow: hidden;
width: 100%
}

#app {
height: 100vh
}

GraphiQL 是一個客戶端庫，它提供了一個 React 元件 <GraphiQL /> , 這個元件用來呈現整個使用者介面。這個元件有一個 fetcher 屬性，這個屬性可以附加一個 function 。附加的 function 返回了一個HTTP promise物件，它僅僅是模仿了我們在Postman中測試的POST請求。所以這些設定都寫在 app.js 檔案中。

下一步我們需要在 wwwroot 目錄中新增一個 index.html , 這裡我們會將 <GraphiQL /> 元件的內容呈現在 id="app" 的 div 中.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>GraphiQL</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div id="app"></div>
<script src="/bundle.js" type="text/javascript"></script>
</body>
</html>

在 index.html 檔案中，我們引入了一個 bundle.js 和一個 style.css 檔案。這2個檔案是通過指令碼編譯出來的，所以這裡我們需要新增一個 webpack.config.js

webpack.config.js

const webpack = require('webpack');
var path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = [
{
entry: {
'bundle': './ClientApp/app.js',
},

output: {
path: path.resolve('./wwwroot'),
filename: '[name].js'
},

resolve: {
extensions: ['.js', '.json']
},

module: {
rules: [
{ test: /\.js/, use: [{
loader: 'babel-loader'
}], exclude: /node_modules/ },
{
test: /\.css$/, use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{ test: /\.flow/, use: [{
loader: 'ignore-loader'
}] }
]
},

plugins: [
new ExtractTextPlugin('style.css', { allChunks: true })
]
}
];

最後我們還需要新增一個.babelrc檔案，其內容如下

.babelrc

{
"presets": ["env", "react"]
}

以上檔案新增完成之後，我們可以在在命令列使用 webpack 命令編譯生成這2個檔案。

C:\chapter4>webpack
Hash: e8082714ec56e818e1f4
Version: webpack 3.12.0
Child
Hash: e8082714ec56e818e1f4
Time: 6645ms
AssetSizeChunksChunk Names
bundle.js2.76 MB0[emitted][big]bundle
style.css39.7 kB0[emitted]bundle
[33] (webpack)/buildin/global.js 509 bytes {0} [built]
[128] ./node_modules/graphql-language-service-interface/dist ^.*$ 807 bytes {0} [built]
[137] ./ClientApp/app.js 996 bytes {0} [built]
[234] (webpack)/buildin/module.js 517 bytes {0} [built]
[292] ./ClientApp/app.css 41 bytes {0} [built]
[297] ./node_modules/css-loader!./ClientApp/app.css 301 bytes [built]
+ 292 hidden modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/graphiql/graphiql.css:
2 modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!ClientApp/app.css:
[0] ./node_modules/css-loader!./ClientApp/app.css 301 bytes {0} [built]
+ 1 hidden module

C:\chapter4>

在伺服器端，我們需要修改 Startup.cs 檔案，在 Configure 方法中新增靜態檔案中介軟體和預設頁中介軟體，修改後最終的 Configure 方法程式碼如下

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseDefaultFiles();
app.UseStaticFiles();

app.UseMiddleware<GraphQLMiddleware>();
}

現在我們啟動專案，你將會看到如下圖所示的使用者介面。

在右側的Documentation Explorer面板中，你可以看到定義的所有 query , 並且可以瞭解到哪些欄位是可用的，以及它們是幹什麼用的。

GraphiQL 提供了許多很棒的功能

GraphQL

本文原始碼：https://github.com/lamondlu/GraphQL_Blogs/tree/master/Part%20IV