前端怎么调用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?的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

轶事：chrome小恐龙背后你不知道的故事

css3 cubic-bezier()实现链接悬停动画效果的方法介绍

javascript作用域和作用域链的解析（附示例）

web开发之转发和重定向区别

如何只使用1个css属性来创建响应式网站？

前端html5几种存储方式的总结

javascript高阶函数的详细介绍（附代码）

快速掌握前端开发技巧