正文

了解事物幕后的運(yùn)作方式往往有好處，但并非總是如此。 因?yàn)椴槐厥故虑檫^(guò)于復(fù)雜。而可視化圖形界面在處理這么一個(gè)場(chǎng)景中，是首當(dāng)其沖的。

在本文中，我將帶你了解如何使用 GraphiQL 來(lái)輔助 GraphQL 的開(kāi)發(fā)。

什么是 GraphQL？

在我們談?wù)?GraphiQL 之前，讓我們先談?wù)?GraphQL。

GraphQL 是一種用于應(yīng)用程序編程接口 (API) 的開(kāi)源數(shù)據(jù)查詢(xún)和操作語(yǔ)言，也是一種使用現(xiàn)有數(shù)據(jù)完成查詢(xún)的運(yùn)行時(shí)。

GraphQL 于 2012 年由 Facebook 內(nèi)部開(kāi)發(fā)，然后于 2015 年向公眾發(fā)布。

與 REST方法相比，開(kāi)發(fā)人員更喜歡它，但本篇文章我們不會(huì)關(guān)注關(guān)于 RESTful 方法和 GraphQL 的優(yōu)缺點(diǎn)的比較。

什么是 GraphiQL？

現(xiàn)在，如果你熟悉 RESTful API，你可能會(huì)知道 Postman 和 Insomnia 之類(lèi)的工具，因?yàn)樗鼈儾粌H可以幫助我們快速可視化 API 開(kāi)發(fā)，還可以幫助我們更快地完成工作。

同樣，你可以將 GraphiQL 視為 Postman 或 Insomnia。 因?yàn)?GraphiQL 是 GraphQL 集成開(kāi)發(fā)環(huán)境 (IDE)。

它這是一個(gè)強(qiáng)大的工具，可以幫助你直觀(guān)地構(gòu)建 GraphQL 查詢(xún)的工具。

在我們開(kāi)始學(xué)習(xí)之前，希望你具備以下知識(shí)：

• 對(duì) Node.js, npm 有基本了解；
• 了解基本的 express.js 搭建服務(wù)器的設(shè)置；

開(kāi)始

我們正在構(gòu)建一個(gè) express.js 服務(wù)器，它是一個(gè) Node.js 函數(shù)并將其放入變量的地方；應(yīng)用程序。

現(xiàn)在，我們將創(chuàng)建一個(gè)文件夾來(lái)存放我們的項(xiàng)目文件。

進(jìn)入新創(chuàng)建或所需的文件夾后，在命令行界面 (CLI) 上運(yùn)行它：

npm init -y

這將在你所在的文件夾中創(chuàng)建一個(gè) package.json 文件。

接下來(lái)要做的是安裝我們項(xiàng)目所需的依賴(lài)包。 運(yùn)行：

npm install graphql express-graphql express。

你應(yīng)該將 "dev": "node app.js" 添加到 package.json 文件中的 script 對(duì)象中:

script: {
  "dev": "node app.js"
}

安裝完成后，你的 package.json 文件應(yīng)如下所示：

因?yàn)?express.js 不知道 如何與 graphql 進(jìn)行通信，所以我們安裝了 express-graphql 依賴(lài)包。

接著，在你的文件夾中，創(chuàng)建一個(gè)名為 app.js 的文件并填入以下代碼：

//app.js 
const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const schema = require('./schema/schema');
const app = express();
// bind express with graphql
app.use('/graphql', graphqlHTTP({
    schema,
    graphiql: true
}));
app.listen(2020, () => {
    console.log('now listening at port 2020');
});

這段代碼是我們工作的切入點(diǎn)。

在第 4 行，我們引入了一個(gè)自定義路徑 schema.js。后面我會(huì)提到它。

然后第 5 行是我們實(shí)例化 express 函數(shù)并將其賦值給 app 這個(gè)常量。

從第 7 行到第 10 行，我們首先調(diào)用 app.use()，它允許我們?cè)?express.js 中注冊(cè)中間件。

每當(dāng)我們點(diǎn)擊路由 /graphql 時(shí)，它始終會(huì)調(diào)用 graphqlHTTP() ，并添加對(duì)象。

我們希望能夠以圖形方式看到正在發(fā)生的事情，因?yàn)槲覀兘o graphiql 一個(gè)“true”值。

現(xiàn)在，在項(xiàng)目的文件夾中創(chuàng)建一個(gè)文件夾。然后在剛剛創(chuàng)建的文件夾中，創(chuàng)建一個(gè)名為 “schema.js” 的文件。

將以下代碼填入到 schema.js 文件中：

// schema.js
const graphql = require("graphql");
const _ = require("lodash");
const { countries } = require("./country");
const { GraphQLObjectType, GraphQLString, GraphQLSchema, GraphQLID } = graphql;
const CountryType = new GraphQLObjectType({
  name: "Country",
  fields: () => ({
    id: { type: GraphQLID },
    name: { type: GraphQLString },
    capital: { type: GraphQLString },
  }),
});
const RootQuery = new GraphQLObjectType({
  name: "RootQueryType",
  fields: {
    country: {
      type: CountryType,
      args: { id: { type: GraphQLID } },
      resolve(parent, args) {
        return _.find(countries, { id: args.id });
      },
    },
  },
});
module.exports = new GraphQLSchema({
  query: RootQuery,
});

代碼中我們使用到了 lodash 這個(gè)包，所以請(qǐng)?jiān)诿钚兄羞\(yùn)行：npm intsall loadash 以安裝它。

在 schema 文件夾中，我們需要?jiǎng)?chuàng)建一個(gè)名為 country.js 的文件并填入以下代碼：

const countries = [
    { name: 'Portugal', capital: 'Libson', id: '1' },
    { name: 'Canada', capital: 'Ontario', id: '2' },
    { name: 'Nigeria', capital: 'Abuja', id: '3' },
];
module.exports = {countries};

最后，你的項(xiàng)目文件夾應(yīng)如下所示：

現(xiàn)在，回到 schema/schema.js。

從第 2 行到第 5 行，我們導(dǎo)入 schema/country.js 的內(nèi)容，該內(nèi)容的結(jié)構(gòu)與 GraphQL 服務(wù)器所需的內(nèi)容結(jié)構(gòu)是保持一致的。

從第 6 行到第 13 行，變量 CountryType 由來(lái)自 graphql 的 GraphQLObjectType() 方法實(shí)例化。 其中有兩個(gè)屬性：name 和 fields。

name 的值為 “Country”，其中作為屬性的字段也是一種隱式返回對(duì)象（id; name capital）的方法。

從第 14 行到第 25 行，我們有一個(gè)新的 GraphQLObjectType() 實(shí)例，它被放在變量 RootQuery 中。 我們看到我們正在使用 Loadash 通過(guò) id 返回 countries。

如果一切都正確完成，你應(yīng)該能夠在 GraphiQL 界面中運(yùn)行你的 GraphQL。

運(yùn)行 npm run dev：

然后，在你的瀏覽器中，轉(zhuǎn)到 http://localhost:2020/graphql，你應(yīng)該會(huì)看到：

是的，現(xiàn)在你可以使用 GraphiQL 界面測(cè)試你的 API。 你可以嘗試通過(guò)在瀏覽器中粘貼以下內(nèi)容來(lái)獲取我們 country.js 中 id 為 1 的 name 和 capital：

{
  country(id: 1) {
    name
    capital
  }
}

完成此操作后，點(diǎn)擊“Play”圖標(biāo)，你應(yīng)該會(huì)在屏幕的另一側(cè)看到如下響應(yīng)：

結(jié)尾

現(xiàn)在，我們已經(jīng)完成了關(guān)于如何使用 GraghQL 的默認(rèn)可視化工具 GraphiQL 可視化你的 GraphQL 模式的教程。

我們也已經(jīng)看到 GraphQL 提供了一種很好的方法來(lái)查詢(xún) API 中的某些內(nèi)容。

以上就是JS前端可視化GraphQL使用詳解的詳細(xì)內(nèi)容，更多關(guān)于JS前端可視化GraphQL的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論