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

時間 2020-05-07

標籤 asp.net asp core 使用 graphql 第四 graphiql 欄目 ASP 简体版

原文原文鏈接

ASP.NET Core中使用GraphQLjavascript

<code>GraphiQL</code>是一款內置在瀏覽器中的<code>GraphQL</code>探索工具，這個是開發<code>GraphQL</code>的一個必備工具。它就至關於WebApi中的Swagger, 使用這個工具就能夠看到你的<code>GraphQL中</code>全部配置的結構，並能夠在瀏覽器中測試你的<code>query</code>, <code>mutation</code>css

如今除了<code>GraphiQL</code>, <code>graphql-dotnet</code>還提供了另一個[GraphQL.Server](GraphQL for .NET - Subscription Transport WebSockets)的類庫, 它也能夠生成一個界面更優雅的探索工具，可是因爲做者聲明瞭還未在重型生產環境中測試過，因此這裏先不作介紹，後續我會單獨寫一篇博文來介紹一下。html

要想使用<code>GraphiQL</code>, 咱們須要藉助NodeJs中的npm和webpack.java

首先咱們在當前Hello World項目中建立一個package.json文件, 內容以下node

{
  "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中全部預約義的庫react

npm install

下一步，咱們須要在當前項目目錄中建立一個新的文件夾<code>ClientApp</code>, 並在其中添加2個文件<code>app.js</code>和<code>app.css</code>, 其文件內容以下。webpack

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
}

<code>GraphiQL</code>是一個客戶端庫，它提供了一個<code>React</code>組件<code><GraphiQL /></code>, 這個組件用來呈現整個用戶界面。這個組件有一個<code>fetcher</code>屬性，這個屬性能夠附加一個<code>function</code>。附加的<code>function</code>返回了一個HTTP promise對象，它僅僅是模仿了咱們在Postman中測試的POST請求。因此這些設置都寫在<code>app.js</code>文件中。git

下一步咱們須要在<code>wwwroot</code>目錄中添加一個<code>index.html</code>, 這裏咱們會將<code><GraphiQL /></code>組件的內容呈如今<code>id="app"</code>的<code>div</code>中.github

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>

在<code>index.html</code>文件中，咱們引入了一個<code>bundle.js</code>和一個<code>style.css</code>文件。這2個文件是經過腳本編譯出來的，因此這裏咱們須要添加一個<code>webpack.config.js</code>web

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"]
}

以上文件添加完成以後，咱們能夠在在命令行使用<code>webpack</code>命令編譯生成這2個文件。

C:\chapter4>webpack
Hash: e8082714ec56e818e1f4
Version: webpack 3.12.0
Child
    Hash: e8082714ec56e818e1f4
    Time: 6645ms
        Asset     Size  Chunks                    Chunk Names
    bundle.js  2.76 MB       0  [emitted]  [big]  bundle
    style.css  39.7 kB       0  [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>

在服務器端，咱們須要修改<code>Startup.cs</code>文件，在<code>Configure</code>方法中添加靜態文件中間件和默認頁中間件，修改後最終的<code>Configure</code>方法代碼以下

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

    app.UseMiddleware<GraphQLMiddleware>();
}

如今咱們啓動項目，你將會看到以下圖所示的用戶界面。

在右側的Documentation Explorer面板中，你能夠看到定義的全部<code>query</code>, 而且能夠了解到哪些字段是可用的，以及它們是幹什麼用的。

<code>GraphiQL</code>提供了許多很棒的功能