前端怎么调用GraphQL API?(2)-木庄网络博客

自定义请求

默认 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?的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

10个开发者经常问的javascript面试题（附答案解析）

dom节点和元素之间有什么区别

前端好学还是后端好学？

一次前端面试的经历

介绍 javascript 代码加不加分号有什么区别

如何使用canvas画一个微笑的表情（代码示例）

七个你可能不知道的惊人开发工具（分享推荐）

学习web前端都要学习什么技术