JS前端視覺化GraphQL使用詳解

正文

瞭解事物幕後的運作方式往往有好處，但並非總是如此。 因為不必使事情過於複雜。而視覺化圖形介面在處理這麼一個場景中，是首當其衝的。

在本文中，我將帶你瞭解如何使用 GraphiQL 來輔助 GraphQL 的開發。

什麼是 GraphQL？

在我們談論 GraphiQL 之前，讓我們先談談 GraphQL。

GraphQL 是一種用於應用程式程式設計介面 (API) 的開源資料查詢和操作語言，也是一種使用現有資料完成查詢的執行時。

GraphQL 於 2012 年由 Facebook 內部開發，然後於 2015 年向公眾釋出。

與 REST方法相比，開發人員更喜歡它，但本篇文章我們不會關注關於 RESTful 方法和 GraphQL 的優缺點的比較。

什麼是 GraphiQL？

現在，如果你熟悉 RESTful API，你可能會知道 Postman 和 Insomnia 之類的工具，因為它們不僅可以幫助我們快速視覺化 API 開發，還可以幫助我們更快地完成工作。

同樣，你可以將 GraphiQL 視為 Postman 或 Insomnia。 因為 GraphiQL 是 GraphQL 整合式開發環境 (IDE)。

它這是一個強大的工具，可以幫助你直觀地構建 GraphQL 查詢的工具。

在我們開始學習之前，希望你具備以下知識：

• 對 Node.js, npm 有基本瞭解；
• 瞭解基本的 express.js 搭建伺服器的設定；

開始

我們正在構建一個 express.js 伺服器，它是一個 Node.js 函數並將其放入變數的地方；應用程式。

現在，我們將建立一個資料夾來存放我們的專案檔案。

進入新建立或所需的資料夾後，在命令列介面 (CLI) 上執行它：

npm init -y

這將在你所在的資料夾中建立一個 package.json 檔案。

接下來要做的是安裝我們專案所需的依賴包。 執行：

npm install graphql express-graphql express。

你應該將 "dev": "node app.js" 新增到 package.json 檔案中的 script 物件中:

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

安裝完成後，你的 package.json 檔案應如下所示：

因為 express.js 不知道 如何與 graphql 進行通訊，所以我們安裝了 express-graphql 依賴包。

接著，在你的資料夾中，建立一個名為 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');
});

這段程式碼是我們工作的切入點。

在第 4 行，我們引入了一個自定義路徑 schema.js。後面我會提到它。

然後第 5 行是我們範例化 express 函數並將其賦值給 app 這個常數。

從第 7 行到第 10 行，我們首先呼叫 app.use()，它允許我們在 express.js 中註冊中介軟體。

每當我們點選路由 /graphql 時，它始終會呼叫 graphqlHTTP() ，並新增物件。

我們希望能夠以圖形方式看到正在發生的事情，因為我們給 graphiql 一個“true”值。

現在，在專案的資料夾中建立一個資料夾。然後在剛剛建立的資料夾中，建立一個名為 “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 這個包，所以請在命令列中執行：npm intsall loadash 以安裝它。

在 schema 資料夾中，我們需要建立一個名為 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};

最後，你的專案資料夾應如下所示：

現在，回到 schema/schema.js。

從第 2 行到第 5 行，我們匯入 schema/country.js 的內容，該內容的結構與 GraphQL 伺服器所需的內容結構是保持一致的。

從第 6 行到第 13 行，變數 CountryType 由來自 graphql 的 GraphQLObjectType() 方法範例化。 其中有兩個屬性：name 和 fields。

name 的值為 “Country”，其中作為屬性的欄位也是一種隱式返回物件（id; name capital）的方法。

從第 14 行到第 25 行，我們有一個新的 GraphQLObjectType() 範例，它被放在變數 RootQuery 中。 我們看到我們正在使用 Loadash 通過 id 返回 countries。

如果一切都正確完成，你應該能夠在 GraphiQL 介面中執行你的 GraphQL。

執行 npm run dev：

然後，在你的瀏覽器中，轉到 http://localhost:2020/graphql，你應該會看到：

是的，現在你可以使用 GraphiQL 介面測試你的 API。 你可以嘗試通過在瀏覽器中貼上以下內容來獲取我們 country.js 中 id 為 1 的 name 和 capital：

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

完成此操作後，點選“Play”圖示，你應該會在螢幕的另一側看到如下響應：

結尾

現在，我們已經完成了關於如何使用 GraghQL 的預設視覺化工具 GraphiQL 視覺化你的 GraphQL 模式的教學。

我們也已經看到 GraphQL 提供了一種很好的方法來查詢 API 中的某些內容。

以上就是JS前端視覺化GraphQL使用詳解的詳細內容，更多關於JS前端視覺化GraphQL的資料請關注it145.com其它相關文章！