前言
@novistore/apollo-upload-client 是一个简洁易用的 GraphQL 客户端上传插件，适用于前端程序员利用 GraphQL 所开发的文件上传功能。本文将详细介绍该包的使用方法，并提供示例代码。
安装
使用该包需要在项目中安装 apollo-client 和 graphql，若未安装这两个依赖，需要先安装。
npm install apollo-client graphql --save npm install @novistore/apollo-upload-client --save
使用
- 首先需要在前端项目的入口文件中导入 apolloClient：
import { ApolloClient } from 'apollo-client';- 创建一个实例化的 apolloClient，并定义一个与服务器交互的链接：
-- -------------------- ---- ------- ------ - ---------- - ---- -------------- ------ - -------- - ---- ------------------- -- ---- ---- ---- -- ------- -------- ----- -------- - --- ---------- ---- ---------- -- -- ------ ------ ---- -------- ----- ---------- - ------------------ ---- ---------- -- ----- ------ - --- -------------- ----- ---------------------------- ----------- ------ --- --------------- ---
- 添加一条 mutation 查询，并把文件变量传入 upload 包裹器：
-- -------------------- ---- -------
------ - ---------------- - ---- ----------------------------------
------ --- ---- --------------
----- -------------------- - ----
-------- ------------------------- -------- -
------------------ ------ -
--------
--------
--------
---
-
-
--
----- ---------------- - ----- --- ---- -- -
----- ---- - ------------------------
-- --- ------------- -- ---- -------- -------
----- --- - ----- ---------------
--------- ---------------------
---------- -
----- ----- -- --- ---- ---- --------
--
---
---------------------- -- ----
--------------------- ---- ---- -- --------------------------
--其中 UPLOAD_FILE_MUTATION 是一条上传文件的 GraphQL mutation 查询，具体内容需要根据后端数据的具体要求进行调整。handleFileChange 函数接收文件变量，并将文件变量传入 UPLOAD_FILE_MUTATION 中，并使用 apollo-client 将请求发送到后端。
至此，@novistore/apollo-upload-client 的使用方法就介绍完成了。该包使用起来简单明了，代码易于维护，适合快速实现文件上传功能。
总结
该包兼容 apollo-client， 使用了现代浏览器中的新技术，优化了上传体验，提供了进度和取消等多种功能，是实现文件上传的好帮手。
以上内容仅供参考，在使用过程中需要注意前后端数据的具体要求，遵守规范，使得代码更健壮。希望本文对于初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbb81e8991b448e62e3