The best GraphQL Loader for Webpack
GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余。
想更多的了解或使用 GraphQL,请访问 https://github.com/facebook/graphql
GraphQL 有针对不同语言的服务端实现,以帮助开发人员搭建 GraphQL Server
。
而 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 {nameage
}
好了,我们可以在 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
将自动加载并使用对应请求模块,模块只需要改出一个「请求函数即可」,看如下自定义示例
const $ = require('jquery');//url 是要请求的 GraphQL 服务地址
//data 是待发送的数据
//options 是自定义选项
module.exports = function(url, data, options){//如果有需要还可以处理 optionsreturn $.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);
}
完整选项
名称 | 说明 | 默认值 |
---|---|---|
URL | 指定 graphql 服务 URL | /graphql |
request | 自定义请求函数 | 使用内建模块 |
extensions | 默认扩展名,在导入时省略扩展名时将按配置依次查找 | .gql/.graphql |
string | 指定导入模式,当为 true 时导入为字符串,而不是可执行的函数 | false |
注意,gq-loader
的 extensions
无论配置何值,在 js
中 import
时都不能省略扩展名,此选项仅作用于 .gql
文件 import
其它 .gql
文件
The best GraphQL Loader for Webpack相关推荐
- html loader 路径,Webpack html-loader提取链接和脚本
我正在尝试使用Webpack从多个EJS文件条目中提取所有资产和脚本 . 我成功提取了所有的CSS链接(我花了几天时间),但是自从1周以来我一直坚持提取脚本 . 这是我到目前为止所做的: 嗨, 我正在 ...
- webpack loader的套路
学习webpack loader,最后模拟style-loader.less-loader 什么是loader loader是一个函数,用来把文件转换成webpack识别的模块. loader API ...
- 六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
- vue ---- webpack中loader
loader 概述 在实际开发中,webpack默认只能打包处理以 .js 后缀名结尾的模块. 其他非 .js 后缀名结尾的模块,需要调用loader加载器才可以正常打包,否则会报错! lodaer ...
- webpack加载css样式 ----css相关loader
一.什么是loader? webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力. loader 让 webpack 能够去处理其他类型的文件,并 ...
- 【Webpack】999- 手把手教你写一个 loader / plugin
焦传锴,微医前端技术部平台支撑组.学习也要有呼有吸. 一.Loader 1.1 loader 干啥的? webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可 ...
- Webpack: Loader 开发分享
Webpack: Loader 开发分享 文章目录 Webpack: Loader 开发分享 正文 1. Concept 概念 2. Configuration 配置实例 3. Custom 自定义 ...
- 什么是loader? (webpack学习篇4)
什么是loader ? 官方把它定义为:用来将一段代码转换成另一段代码的webpack插件. 同时也给出了解释:虽然本质上说,loader也是插件,但因为webpack的体系中还有一个专门的名词就叫插 ...
- webpack中的 loader
文章目录 1. loader 概述 2. loader 的调用过程 3. 打包处理 css 文件 4. loader 调用过程图解 5. 打包处理 less 文件 6. 打包处理样式表中与 url 路 ...
最新文章
- python3教程-Python3 教程
- 记录 Git命令速查表
- 学而思的python课怎么样_有在用学而思网校的同学觉得孙墨漪老师怎么样?报她的课值得吗?...
- 【渝粤教育】电大中专电商运营实操12作业 题库
- linux 定时传送文件,Windows与Linux之间定时文件传输
- 【数据结构笔记36】C实现:基于Median3的快速排序
- atxserver运行没有反应_关于厌氧反应器的酸化现象与恢复措施!
- google黑客命令搜集
- 密码学专题 非对称加密算法指令概述 DH算法指令
- 聊聊Linux2038年问题
- 【windows10】CMD命令行隐藏窗口运行
- 如何用OpenCV给图片加上文字?
- animejs走马灯_Javript动画特效插件anime.js
- 河南省周口市安吉软件测试培训中心第一次软件测试课程-计算机基础理论论篇
- 《UNIX网络编程》第一步:编写自己的daytime客户端,并从daytime服务器获取时间
- 如何通过mac微信版把文件传到手机上?
- vue项目微信端清理缓存问题解决
- matlab怎么加采样开关,开关量采集模块怎么使用?
- c语言上交源代码怎么交啊,C语言问题在线等啊作业提交上交的的内容必须由以下两个部分组成,缺 爱问知识人...
- bjui框架中用icheck实现单选全选效果
热门文章
- How to make your 100k to 10k (5)
- JavaScript运行机制:event-loop
- centOS6.4部署svn
- Codeforces Round #168 (Div. 2)
- 关键字: datagridview 属性 说明
- 读书:海明威的《老人与海》
- 问题三十三:怎么用ray tracing画特殊长方体(box)
- mongodb 字符串转bson_大数据存储技术选型(六)--Mongodb专题介绍
- PyTorch学习笔记(三):PyTorch主要组成模块
- 负载均衡和故障转移的使用案例