npm 包 rollup-plugin-graphql 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

在前端开发过程中，我们常常需要使用 GraphQL 查询 API，而 Rollup 是一款常用的 JavaScript 模块打包器。npm 包 rollup-plugin-graphql 可以将 GraphQL 查询语句打包到 JavaScript 代码中，方便在浏览器端使用。本文将详细介绍这个 npm 包的使用教程，帮助你轻松使用 rollup-plugin-graphql。

安装

打开终端，执行以下命令：

--- ------- --------------------- ----------

使用

在 rollup 的配置文件中添加 rollup-plugin-graphql 插件:

------ ------- ---- ------------------------

------ ------- -
  ------ ---------------
  -------- -
    ----------
    -- --- ----
  --
  -- --- ----
-

然后，在 JavaScript 代码中创建 GraphQL 字符串变量：

-- ------------

------ --- ---- --------------

----- ------------- - ----
  ----- -------- -
    ----- -
      --
      -----
      -------
    -
  -
--

rollup-plugin-graphql 将未在项目中被导入的 Graphql 查询语句转化为 JS 模块。在上面的例子中，rollup-plugin-graphql 将把 GET_POST_LIST 转换为导出对象：

-- ------------ ------ ----------------------

------ ----- ------------- - -
  ----- -----------
  ------------ -
    -
      ----- ----------------------
      ---------- --------
      ----- - ----- ------- ------ ---------- --
      ------------- -
        ----- ---------------
        ----------- -
          -
            ----- --------
            ----- - ----- ------- ------ ------- --
            ------------- -
              ----- ---------------
              ----------- -
                - ----- -------- ----- - ----- ------- ------ ---- - --
                - ----- -------- ----- - ----- ------- ------ ------- - --
                - ----- -------- ----- - ----- ------- ------ --------- - -
              -
            --
            ----------- --
          -
        -
      --
      -------------------- ---
      ----------- --
    -
  --
  ---- - ------ -- ---- -- -
--

我们可以使用导出的 GET_POST_LIST 变量来执行查询：

-- ------------

----------------- -
  ------- -------
  -------- - --------------- ------------------ --
  ----- ---------------- ------ ------------- --
--
  --------- -- -----------
  ---------- -- -------------------

配置项

rollup-plugin-graphql 提供以下配置项：

include / exclude

  • 类型：字符串 / 正则表达式 / 字符串数组 / 正则表达式数组
  • 默认值：undefined

指定需要/排除转化的文件路径。

---------
  -------- -------------------
  -------- -----------------
--

options

  • 类型：对象
  • 默认值：
-
  -------- ---------------
  -------- ----------
  ----------- ----------
  -------- --
-

使用 rollup-plugin-graphql 的选项。默认情况下，使用 graphql-js 包作为解析器和执行器，以便能够处理查询和突变。options 对象默认传递给 graphql-js。有关可用选项的完整列表，请参阅 graphql-js 文档。

---------
  -------- -
    --------- ----- ----- - ------ ------ ---
    ---------- - ------ - ------ -- -- ------ ------- - -
  -
--

示例代码

下面是完整的示例代码，包含前面提到的所有步骤：

-- ------------

------ --- ---- --------------

----- ------------- - ----
  ----- -------- -
    ----- -
      --
      -----
      -------
    -
  -
--

----------------- -
  ------- -------
  -------- -
    --------------- ------------------
  --
  ----- ---------------- ------ ------------- ---
--
  --------- -- -----------
  ---------- -- -------------------
- ------

------ --

总结

本文介绍了如何使用 rollup-plugin-graphql 插件将 GraphQL 查询语句打包到 JavaScript 代码中，并使用这些查询计算。希望这篇文章能够帮助到你更好地使用这个 npm 包。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055bda81e8991b448d97f3

阅读全文

猜你喜欢

  • npm 包 nw-swfobject 使用教程

    前言 在前端开发中，我们常常需要嵌入 Flash 文件。而如果直接使用 <object> 或 <embed> 标签嵌入 Flash，会有一些兼容性问题。

    2 年前
  • npm 包 r03ertmodal 使用教程

    在前端开发中，模态框是一个常用的组件。r03ertmodal 是一个简单易用的模态框组件，可以快速实现常规的模态框需求。本文将介绍 r03ertmodal 的基本用法，并提供示例代码说明。

    2 年前
  • npm 包 react-datepicker-inlinefix 使用教程

    React 是一个非常流行的前端框架之一，它提供了一种简单、高效的方式来开发响应式的前端应用程序。而其中一个核心的技术之一就是组件化。在 React 中，一个高度可复用和可组合的组件能够使我们的代码更...

    2 年前
  • npm 包 string-manipulator 使用教程

    什么是 string-manipulator string-manipulator 是一个用于 JavaScript 的 npm 包，主要用于方便地对字符串进行各种操作。

    2 年前
  • npm 包 string-manipulator-library 使用教程

    在前端开发中，我们经常需要对字符串进行处理，例如去掉空格、替换指定字符等等。这时候 string-manipulator-library 就可以派上用场了。它是一个基于 Node.js 的 npm 包...

    2 年前
  • npm 包 @houshuang/react-flip-move 使用教程

    简介 @houshuang/react-flip-move 是一个 React 核心库，它提供了一种简便的方式来实现 CSS 动画。它可以创建一个随时间变化的序列帧，这个序列帧可以很容易地应用于 Re...

    2 年前
  • npm 包 buildo-lodash-ts 使用教程

    简介 buildo-lodash-ts 是一个基于 lodash 的 TypeScript 高阶函数库。它可以大幅度提高代码开发效率，减少冗余代码，同时提供了多种便利函数供开发人员使用。

    2 年前
  • npm 包 dk-socket-ipc 使用教程

    dk-socket-ipc 是一个基于 Node.js 平台的轻量级进程间通讯 (IPC) 解决方案。通过使用 dk-socket-ipc，您可以轻松地在您的 Node.js 项目中实现进程间通讯，以...

    2 年前
  • npm 包 unhandled-rejection-proxy 使用教程

    在前端开发过程中，经常会遇到一个问题：Promise 执行过程中如果出现了未处理的错误，会导致整个页面崩溃，从而影响用户体验。为了解决这个问题，我们可以使用 npm 包 unhandled-rejec...

    2 年前
  • npm 包 pure_player 使用教程

    在前端开发中，视频播放器是一个非常重要的组件，而 npm 包 pure_player 就是一个简单易用的视频播放器解决方案，具有良好的可扩展性和自定义能力。本文将详细介绍该 npm 包的使用方法。

    2 年前
  • npm 包 once-document-is-ready 使用教程

    简介 once-document-is-ready 是一个在 document 加载完成后执行回调函数的 npm 包。在前端开发中，我们有时需要在 document 加载完成后再进行一些操作，如：初...

    2 年前
  • npm包higg-cache使用教程

    前言 现今的web应用程序已不再是简单的静态网页，相反地，它们呈现出了复杂的动态性。这种动态性通常来自于前端框架和库的使用。然而，这种使用也导致了一个问题，就是页面性能的下降。

    2 年前
  • npm 包 vue-port-graph 使用教程

    介绍 vue-port-graph 是一个使用 Vue.js 编写的端口图表组件，能够帮助前端开发者快速构建端口图表并进行数据展示。该组件提供了可定制的样式和交互功能，让开发者能够根据自己的需求进行快...

    2 年前
  • npm 包 memoize-last-for-key 使用教程

    在前端开发中，我们常常需要处理大量的数据来提高页面的性能。在这个过程中，我们可能需要对一些重复执行的函数进行缓存，以避免重复计算浪费时间。memoize-last-for-key 就是一款 npm 包...

    2 年前
  • npm 包 rn-pingpp 使用教程

    在移动支付领域，Ping++ 是一个非常流行的跨境支付解决方案。对于 React Native 开发者来说，如果想要接入 Ping++ 的支付功能，可以使用 npm 包 rn-pingpp 来实现。

    2 年前
  • npm 包 php-express-wlfe 使用教程

    当我们使用 PHP 作为后端语言时，经常会碰到需要将前端代码嵌入到 PHP 代码中的情况。为了方便实现这一功能，我们可以使用 npm 包 php-express-wlfe。

    2 年前
  • npm 包 pisco-callback-to-promise 使用教程

    什么是 pisco-callback-to-promise? pisco-callback-to-promise 是一个可以将 Node.js 中回调函数转为 Promise 的 npm 包。

    2 年前
  • NPM 包 cloud-control-ng-lib 使用教程

    在 Web 前端开发中，使用第三方库能够大大提高开发效率和代码质量。本文将介绍一个基于 Angular 的云控平台前端组件库，即 cloud-control-ng-lib。

    2 年前
  • npm 包 trowel-breadcrumbs 使用教程

    介绍 Trowel Breadcrumbs 是一个基于 Vue.js 的面包屑组件。它提供了灵活的配置和样式，可以轻松实现自定义面包屑的各种样式和效果。npm 包 trowel-breadcru...

    2 年前
  • npm 包 cordova-plugin-ms-adal-b2c-patch 使用教程

    随着移动互联网的广泛普及和企业数字化的加速推进，移动应用的安全性成为越来越重要的问题。为了保证移动应用的身份认证和授权安全可靠，微软开发了一套 Azure Active Directory (Azu...

    2 年前

相关推荐

    暂无文章