這篇文章將為大家詳細講解有關前端調用GraphQL API的方法，文章內容質量較高，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創新互聯公司專注于企業營銷型網站、網站重做改版、開江網站定制設計、自適應品牌網站建設、H5高端網站建設、商城網站開發、集團公司官網建設、外貿營銷網站建設、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為開江等各大城市提供網站開發制作服務。

GraphQL是一個開源的API數據查詢和操作語言及實現為了實現上述操作的相應運行環境。GraphQL相較于REST以及其他web service架構提供了一種高效、強大和靈活的開發web APIs的方式。它通過由客戶端根據所需定義數據結構，同時由服務端負責返回相同數據結構的對應數據的方式避免了服務端大量冗余數據的返回，但與此同時也意味著這種方式不能有效利用起查詢結果的web緩存。GraphQL這種查詢語言所帶來的靈活性和豐富性的同時也增加了復雜性，使得這項技術對于簡單APIs并不是好的選擇。

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

并且它還支持通過 #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('root'));

在調用 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的方法，看完之后是否有所收獲呢？如果想了解更多相關內容，歡迎關注創新互聯網站制作公司行業資訊，感謝各位的閱讀。

網站欄目：前端調用GraphQLAPI的方法-創新互聯
網頁地址：http://www.yijiale78.com/article22/ccdjcc.html

成都網站建設公司_創新互聯，為您提供網站策劃、外貿建站、虛擬主機、網站排名、網站導航、關鍵詞優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯