前言
在 Web 应用开发中，前后端通信以及数据处理是必不可少的一部分，而 GraphQL 技术的出现，使我们的工作变得更加便捷。GitHut 上有不少的 GraphQL 相关项目，其中就有一款名为 vue-oriql 的 npm 包，它是一个针对 Vue.js 的开源 GraphQL 客户端，提供了强大的功能和丰富的更新模式，今天本文将介绍 vue-oriql 的使用方法。
安装
首先，我们需要在项目中引入 vue-oriql 包，可以通过 npm 进行安装：
npm install vue-oriql
安装完成后，需要在 main.js 文件中进行引入：
import Oriql from 'vue-oriql' import Vue from 'vue' Vue.use(Oriql)
以上代码中，我们引入了 vue-oriql，然后通过 Vue.use() 方法将其注册为 Vue.js 的插件。
基本使用
1. 组件使用
在组件中，我们可以通过 <ori-ql> 标签来进行 GraphQL 查询：
-- -------------------- ---- -------
----------
------- -------------- -----------------------
--------- ------------- -------- ------ ---- ---
---- -------------------------------
---- ------------------------ -- ------------- --------
---- --------- ---- --------
-----------
---------
-----------
--------
------ ------- -
------ -
------ -
------ -
----- -
-------- -
--
-----
-
-
--
---------- --
-
-
-
---------在以上代码中，我们传递了 query 和 variables 两个参数给 <ori-ql> 组件。query 为 GraphQL 查询语句，variables 为变量对象。在 <template> 标签中，我们使用 JavaScript 的解构赋值语法（slot-scope="{ loading, error, data }"）将 <ori-ql> 组件的 loading, error, data 属性传递给了自定义的组件。
2. API 使用
除了 <ori-ql> 组件之外，我们还可以通过 vue-oriql 提供的 API 来进行 GraphQL 查询，在 main.js 文件中，我们需要对 oriql 对象进行设置：
import Oriql from 'vue-oriql'
import Vue from 'vue'
Vue.use(Oriql)
Vue.prototype.$oriql = new Oriql({
link: 'http://localhost:3000/graphql'
})在以上代码中，我们设置了 link 属性值为我们的 GraphQL 服务器地址，然后将 Oriql 实例挂载到 Vue.prototype 上使其全局可用。
然后，我们在组件中使用 $oriql 对象进行 GraphQL 查询：
-- -------------------- ---- -------
----------
-----
---- -------------------------------
---- ------------------------ -- ------------- --------
--- -------
--- ------------- ------ -- -------------- ---------------
-------- ----- - - ---------
------ ---------- -------
-----
-----
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------
------ -----
----- ----
-
--
--------- -
---------------
--
-------- -
----- ---------- -
------------ - ----
--- -
--------- - ----- -------------------
----- -
-------- -
--
-----
-
-
--
- ----- ------- -
---------- - -----
- ------- -
------------ - -----
-
-
-
-
---------在以上代码中，我们使用 $oriql 对象的 query() 方法进行 GraphQL 查询，然后通过 await 关键字将返回值赋给了 data 变量。同时，我们也设置了 loading, error, data 三个属性，用于在页面中进行展示。
高级使用
1. Mutations 和 Subscriptions
除了查询以外，我们还可以通过 vue-oriql 进行 Mutations 和 Subscriptions 操作：
-- -------------------- ---- -------
--------
------ ------- -
------ -
------ -
-------- ------
------ -----
----- -----
------ --
-
--
-------- -
----- ------------ -
------------ - ----
--- -
----- --------- - -
------ ----------
-
--------- - ----- --------------------
-------- ------------------ -------- -
----------------- ------- -
--
-----
-
-
-- ----------
- ----- ------- -
---------- - -----
- ------- -
------------ - -----
-
--
--------------------- -
----- ------------ - -----------------------
------------ --------- -
--------- -
--
-----
-
-
--
------------------------
----- -------- -- -
--------------------- ------------ ------- -- -------
--
------ ------- -- -
--------------------- ------------ ------ -- ------
-
--
-
-
-
---------在以上代码中，我们通过 $oriql 对象的 mutate() 方法进行 Mutations 操作，同时还设置了变量对象 variables 用于传递参数。在 subscribeToNewPosts() 方法中，我们使用 $oriql 对象的 subscribe() 方法进行 Subscriptions 操作，然后通过 subscription 对象设置 next, error 方法来处理返回结果。
2. 预编译和编译缓存
vue-oriql 支持预编译和编译缓存两个功能，可以在开发和生产环境中提升查询速度。我们可以在 main.js 文件中设置 cache 和 options 属性：
-- -------------------- ---- -------
-------------------- - --- -------
----- --------------------------------
------ -
---------- --- -- ------------
---- ----- -- ------
--
-------- -
------- ----- -- ------
-- ---------- ------- -
-
--在以上代码中，我们设置了 cacheSize 和 ttl 两个属性启用缓存功能，并设置了 prefix 属性用于缓存前缀。然后，在组件中，我们可以使用 compiled 和 cached 编译器选项：
-- -------------------- ---- -------
----------
------- -------------- ------------ --------- --------------- -- --------------
--------- ------------- ---- ---
----
--- ---------------- ------ -- -------------- ------------------
-------- ----- - - ---------
------ ------------ -------
-----
-----
-----------
---------
-----------
--------
------ ------- -
------ -
------ -
------ -
---------- ---- -
---------------- ---- -
--
----
-
-
--
---------- -
--- --------
-
-
-
-
---------在以上代码中，我们设置了 compiled 和 cached 两个属性。compiled 属性用于定义预编译的选项，cached 属性用于启用缓存功能。
小结
在本文中，我们介绍了 npm 包 vue-oriql 的安装和使用以及如何在 vue-oriql 中进行基本的 GraphQL 查询、Mutations 操作和 Subscriptions 操作，同时也介绍了 vue-oriql 的高级功能——预编译和编译缓存。希望本文能够对大家学习和使用 vue-oriql 有所指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006737a890c4f72775840f6