前端調(diào)用GraphQL API的方法

這篇文章將為大家詳細(xì)講解有關(guān)前端調(diào)用GraphQL API的方法，文章內(nèi)容質(zhì)量較高，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

GraphQL是一個(gè)開(kāi)源的API數(shù)據(jù)查詢和操作語(yǔ)言及實(shí)現(xiàn)為了實(shí)現(xiàn)上述操作的相應(yīng)運(yùn)行環(huán)境。GraphQL相較于REST以及其他web service架構(gòu)提供了一種高效、強(qiáng)大和靈活的開(kāi)發(fā)web APIs的方式。它通過(guò)由客戶端根據(jù)所需定義數(shù)據(jù)結(jié)構(gòu)，同時(shí)由服務(wù)端負(fù)責(zé)返回相同數(shù)據(jù)結(jié)構(gòu)的對(duì)應(yīng)數(shù)據(jù)的方式避免了服務(wù)端大量冗余數(shù)據(jù)的返回，但與此同時(shí)也意味著這種方式不能有效利用起查詢結(jié)果的web緩存。GraphQL這種查詢語(yǔ)言所帶來(lái)的靈活性和豐富性的同時(shí)也增加了復(fù)雜性，使得這項(xiàng)技術(shù)對(duì)于簡(jiǎn)單APIs并不是好的選擇。 

而 gq-loader 是一個(gè) webpack 插件，你可以認(rèn)為它一針對(duì)前端項(xiàng)目的一種 client 端實(shí)現(xiàn)，它的目的是幫助前端開(kāi)發(fā)同學(xué)更簡(jiǎn)便的調(diào)用 GraphQL API，它讓前端開(kāi)發(fā)人員在使用 GraphQL 時(shí)更加方便，像普通 js 模塊一樣輕松自如，使前端開(kāi)發(fā)人員能在 js 文件中通過(guò) import 或 require 導(dǎo)入 .gql 和 .graphql 文件，然后直接調(diào)用。

并且它還支持通過(guò) #import 語(yǔ)法導(dǎo)入其它 .gql 文件，比如 fragments。

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

安裝

npm install gq-loader --save-dev

或者

yarn add gq-loader

基本使用

如同其它 loader 一樣，首先，我們?cè)?webpack.config.js 中添加 gq-loader 的配置

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

然后，我們就可以在 js 文件中通過(guò) import 來(lái)導(dǎo)入 .gql 文件使用它了，我們來(lái)一個(gè)簡(jiǎn)單的示例，假設(shè)已經(jīng)有一個(gè)可以工作的 Graphql Server，那么，我們先創(chuàng)建一個(gè)可以查詢用戶的 getUser.gql

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

可以看到，我們通過(guò) #import 引用了另外一個(gè) .gql 文件 fragment.gql，在這個(gè)文件中我們描術(shù)了要返回的 user 的字段信息，這樣我們就能在不同的地方「重用」它了，我們也創(chuàng)建一下這個(gè)文件

fragment userFields on User {
  name
  age
}

好了，我們可以在 js 文件中直接導(dǎo)入 getUser.gql，并且使用它查詢用戶了，從未如此簡(jiǎn)便，我們來(lái)看看

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'));

在調(diào)用 getUser 時(shí)，我們可以給函數(shù)參數(shù)向 GraphQL 傳遞變量，這些變量就是我們的查詢參數(shù)。

自定義請(qǐng)求

默認(rèn) gq-loader 就會(huì)幫你完成 graphql 請(qǐng)求，但某些場(chǎng)景下或許你想自已控制所有請(qǐng)求，如果有這樣需要，我們還可以通過(guò) request 屬性來(lái)「自定義」請(qǐng)求，看一下示例，需要先稍微改動(dòng)一下 loader 配置

{
  test: /\.(graphql|gql)$/,
  exclude: /node_modules/,
  use: {
    loader: 'gq-loader'
    options: {
      url: 'Graphql Server URL',
      //指定自動(dòng)請(qǐng)求模塊路徑
      request: require.resolve('your_request_module_path');
    }
  }
}

在 your_request_module_path 填寫(xiě)自定義請(qǐng)求模塊路徑，gq-loader 將自動(dòng)加載并使用對(duì)應(yīng)請(qǐng)求模塊，模塊只需要改出一個(gè)「請(qǐng)求函數(shù)即可」，看如下自定義示例

onst $ = require('jquery');
//url 是要請(qǐng)求的 GraphQL 服務(wù)地址
//data 是待發(fā)送的數(shù)據(jù)
//options 是自定義選項(xiàng)
module.exports = function(url, data, options){
  //如果有需要還可以處理 options
  return $.post(url, data);
};

其中，options 是導(dǎo)入 .gql 文件后「函數(shù)的第二個(gè)參數(shù)」，比如，可以這樣傳遞 options 參數(shù)

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

注意，gq-loader 的 extensions 無(wú)論配置何值，在 js 中 import 時(shí)都不能省略擴(kuò)展名，此選項(xiàng)僅作用于 .gql 文件 import 其它 .gql 文件

以上就是前端調(diào)用GraphQL API的方法，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊，感謝各位的閱讀。