前端怎么调用GraphQL API?


本文摘自PHP中文网,作者(*-*)浩,侵删。

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够准确地获得它需要的数据,而且没有任何冗余。

GraphQL 有针对不同语言的服务端实现,以帮助开发人员搭建 GraphQL Server。 (推荐学习:前端视频)

而 gq-loader 是一个 webpack 插件,你可以认为它一针对前端项目的一种 client 端实现,它的目的是帮助前端开发同学更简便的调用 GraphQL API,它让前端开发人员在使用 GraphQL 时更加方便,像普通 js 模块一样轻松自如,使前端开发人员能在 js 文件中通过 import 或 require 导入 .gql 和 .graphql 文件,然后直接调用。

并且它还支持通过 #import 语法导入其它 .gql 文件,比如 fragments。

#import 还提供了两个别名,分别是 #require 和 #include,这两个别名和 #import 的用法及行为完全一致。

安装

1

npm install gq-loader --save-dev

或者

1

yarn add gq-loader

基本使用

如同其它 loader 一样,首先,我们在 webpack.config.js 中添加 gq-loader 的配置

1

2

3

4

5

6

7

8

9

10

{

  test: /\.(graphql|gql)$/,

  exclude: /node_modules/,

  use: {

    loader: 'gq-loader'

    options: {

      url: 'Graphql Server URL'

    }

  }

}

然后,我们就可以在 js 文件中通过 import 来导入 .gql 文件使用它了,我们来一个简单的示例,假设已经有一个可以工作的 Graphql Server,那么,我们先创建一个可以查询用户的 getUser.gql

1

2

3

4

5

6

#import './fragment.gql'

query MyQuery($name: String) {

  getUser(name: $name)

    ...userFields

  }

}

可以看到,我们通过 #import 引用了另外一个 .gql 文件 fragment.gql,在这个文件中我们描术了要返回的 user 的字段信息,这样我们就能在不同的地方「重用」它了,我们也创建一下这个文件

1

2

3

4

fragment userFields on User {

  name

  age

}

好了,我们可以在 js 文件中直接导入 getUser.gql,并且使用它查询用户了,从未如此简便,我们来看看

1

2

3

4

5

6

7

8

9

10

11

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 传递变量,这些变量就是我们的查询参数。

阅读剩余部分

相关阅读 >>

利用前端基础制作html开关图标

你值得了解的一种css获取图片主题色的小技巧(分享)

前端是干什么的

如何利用nvm工具来管理node版本?方法介绍

vue.js方法与事件的介绍

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

解决angular中的浏览器兼容性问题的方法介绍

4个使用将html转换为pdf的方法介绍

web前端规范命名的介绍

10个你可能不知道的很棒的js字符串技巧

更多相关阅读请进入《前端》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...