這篇文章將為大家詳細(xì)講解有關(guān)前端調(diào)用GraphQL API的方法,文章內(nèi)容質(zhì)量較高,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
為新晃等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及新晃網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站建設(shè)、新晃網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
GraphQL是一個開源的API數(shù)據(jù)查詢和操作語言及實(shí)現(xiàn)為了實(shí)現(xiàn)上述操作的相應(yīng)運(yùn)行環(huán)境。GraphQL相較于REST以及其他web service架構(gòu)提供了一種高效、強(qiáng)大和靈活的開發(fā)web APIs的方式。它通過由客戶端根據(jù)所需定義數(shù)據(jù)結(jié)構(gòu),同時由服務(wù)端負(fù)責(zé)返回相同數(shù)據(jù)結(jié)構(gòu)的對應(yīng)數(shù)據(jù)的方式避免了服務(wù)端大量冗余數(shù)據(jù)的返回,但與此同時也意味著這種方式不能有效利用起查詢結(jié)果的web緩存。GraphQL這種查詢語言所帶來的靈活性和豐富性的同時也增加了復(fù)雜性,使得這項技術(shù)對于簡單APIs并不是好的選擇。
而 gq-loader 是一個 webpack 插件,你可以認(rèn)為它一針對前端項目的一種 client 端實(shí)現(xiàn),它的目的是幫助前端開發(fā)同學(xué)更簡便的調(diào)用 GraphQL API,它讓前端開發(fā)人員在使用 GraphQL 時更加方便,像普通 js 模塊一樣輕松自如,使前端開發(fā)人員能在 js 文件中通過 import 或 require 導(dǎo)入 .gql 和 .graphql 文件,然后直接調(diào)用。
并且它還支持通過 #import 語法導(dǎo)入其它 .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 來導(dǎo)入 .gql 文件使用它了,我們來一個簡單的示例,假設(shè)已經(jīng)有一個可以工作的 Graphql Server,那么,我們先創(chuàng)建一個可以查詢用戶的 getUser.gql
#import './fragment.gql' query MyQuery($name: String) { getUser(name: $name) ...userFields } }
可以看到,我們通過 #import 引用了另外一個 .gql 文件 fragment.gql,在這個文件中我們描術(shù)了要返回的 user 的字段信息,這樣我們就能在不同的地方「重用」它了,我們也創(chuàng)建一下這個文件
fragment userFields on User { name age }
好了,我們可以在 js 文件中直接導(dǎo)入 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 ; } ReactDOM.render(, document.getElementById('root'));
在調(diào)用 getUser 時,我們可以給函數(shù)參數(shù)向 GraphQL 傳遞變量,這些變量就是我們的查詢參數(shù)。
自定義請求
默認(rèn) 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 將自動加載并使用對應(yīng)請求模塊,模塊只需要改出一個「請求函數(shù)即可」,看如下自定義示例
onst $ = require('jquery'); //url 是要請求的 GraphQL 服務(wù)地址 //data 是待發(fā)送的數(shù)據(jù) //options 是自定義選項 module.exports = function(url, data, options){ //如果有需要還可以處理 options return $.post(url, data); };
其中,options 是導(dǎo)入 .gql 文件后「函數(shù)的第二個參數(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 無論配置何值,在 js 中 import 時都不能省略擴(kuò)展名,此選項僅作用于 .gql 文件 import 其它 .gql 文件
以上就是前端調(diào)用GraphQL API的方法,看完之后是否有所收獲呢?如果想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊,感謝各位的閱讀。