前端怎麼呼叫GraphQL API?

GraphQL 既是 API 的查詢語言也是滿足你資料查詢的執行時間。 GraphQL 對你的 API 中的數據提供了一套易於理解的完整描述，使得客戶端能夠準確地獲得它需要的數據，而且沒有任何冗餘。

GraphQL 有針對不同語言的服務端實現，以協助開發人員建構 GraphQL Server。 （建議學習：前端影片）

而 gq-loader 是一個 webpack 插件，你可以認為它一針對前端專案的一種 client 端實現，它的目的是幫助前端開發同學們更簡單的呼叫GraphQL API，它讓前端開發人員在使用GraphQL 時更加方便，像普通 js 模組一樣輕鬆自如，使前端開發人員能在 js 文件中通過 import 或 require 導入 .gql 和 .graphyl 文件，然後直接調用。 

且它也支援透過 #import 語法匯入其它 .gql 文件，例如 fragments。

#import 也提供了兩個別名，分別是 #require 和 #include，這兩個別名和 #import 的用法及行為完全一致。

安裝

npm install gq-loader --save-dev

或

yarn add gq-loader

#基本上使用

如同它loader 一樣，首先，我們在webpack.config.js 中添加gq-loader 的配置

{
  test: /\.(graphql|gql)$/,
  exclude: /node_modules/,
  use: {
    loader: 'gq-loader'
    options: {
      url: 'Graphql Server URL'
    }
  }
}

然後，我們就可以在js 文件中通過import 來導入.gql 文件使用它了，我們來一個簡單的範例，假設已經有一個可以工作的Graphql Server，那麼，我們先建立一個可以查詢使用者的getUser.gql

#import './fragment.gql' 
query MyQuery($name: String) {
  getUser(name: $name)
    ...userFields
  }
}

可以看到，我們透過#import 引用了另外一個.gql 檔案fragment. gql，在這個文件中我們描術了要返回的user 的字段信息，這樣我們就能在不同的地方“重用”它了，我們也創建一下這個文件

fragment userFields on User {
  name
  age
}

好了，我們可以在js 檔案中直接導入getUser.gql，並且使用它查詢用戶了，從未如此簡便，我們來看看

import getUser from './getUser.gql';
import React from 'react';
import ReactDOM from 'react-dom';
async function query() {
  const user = await getUser({ name: 'bob' });
  console.log('user', user);
}
function App() {
  return <button onClick={query}>click</button>;
}
ReactDOM.render(<App />, document.getElementById(&#39;root&#39;));

在調用getUser 時，我們可以給函數參數向GraphQL 傳遞變量，這些變量就是我們的查詢參數。

自訂請求

預設gq-loader 就會幫你完成graphql 請求，但某些場景下或許你想自已控制所有請求，如果有這樣需要，我們也可以透過request 屬性來「自訂」請求，看看範例，需要先稍微改動一下loader 配置

{
  test: /\.(graphql|gql)$/,
  exclude: /node_modules/,
  use: {
    loader: 'gq-loader'
    options: {
      url: 'Graphql Server URL',
      //指定自动请求模块路径
      request: require.resolve('your_request_module_path');
    }
  }
}

在your_request_module_path 填寫自訂請求模組路徑，gq-loader 將自動載入並使用對應請求模組，模組只需要改出一個“請求函數即可”，看如下自定義示例

onst $ = require('jquery');
//url 是要请求的 GraphQL 服务地址
//data 是待发送的数据
//options 是自定义选项
module.exports = function(url, data, options){
  //如果有需要还可以处理 options
  return $.post(url, data);
};

其中，options 是導入.gql 文件後“函數的第二個參數”，比如，可以這樣傳遞options 參數

import getUser from './getUser.gql';
async function query() {
  const options = {...};
  const user = await getUser({ name: 'bob' }, options);
  console.log('user', user);
}

注意，gq-loader 的extensions 無論配置何值，在js 中import 時都不能省略擴展名，此選項僅作用於.gql 文件import 其它.gql 文件

以上是前端怎麼呼叫GraphQL API?的詳細內容。更多資訊請關注PHP中文網其他相關文章！