在前端开发中，处理文件上传是一项必做的任务。随着技术的发展，现在大部分前端开发者更喜欢使用GraphQL作为API。那么在GraphQL中实现文件上传该怎么做呢？这时候，我们就需要使用一个非常好用的npm包，它就是Apollo-Upload-Client-Fork-Mxstbr。
什么是Apollo-Upload-Client-Fork-Mxstbr？
Apollo-Upload-Client-Fork-Mxstbr是一个为Apollo GraphQL提供优化的上传功能的包，它是 Apollo-Upload-Client的一个fork版本。它通过重写上传流、执行多部分请求、缓存并重回错误状态等方式支持文件上传功能，同时提高了上传性能。
安装
你可以通过npm来进行安装，执行以下命令：
npm install apollo-upload-client-fork-mxstbr
如何使用？
下面是使用Apollo-Upload-Client-Fork-Mxstbr上传文件的基本步骤：
引入模块
import { createUploadLink } from 'apollo-upload-client-fork-mxstbr';创建Apollo链接
const uploadLink = createUploadLink({
uri: '<graphql_service_url>',
});可选步骤
你可以通过添加一个 ApolloLink 将上传头添加到所有的请求中，如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------------
----- -------- - -------------- - ------- -- -- -
----- ----- - -------------------------------------
------ -
-------- -
-----------
-------------- ----- - ------- --------- - ---
--
--
---
----- ------ - --- --------------
----- ----------------------------
------ --- ----------------
---发起Mutation请求
下面是一个上传文件的例子：
-- -------------------- ---- -------
------ --- ---- --------------
------ - -------- - ---- ---------------
----- ----------- - ----
--------------- -------- -
------------ ------ -
--
---
-
-
--
----- ------ - -- -- -
----- ------ -------- - ---------------
----- ------------ - ------- -- -
-------------------------------
--
----- ------------ - ------------ -- -
------------ ---------- - ---- - ---
--
------ -
--
------ ----------- ----------------------- --
--------- -----------------------
------------- - -------- ----- -- -- -
--
------- ----------- -- -----------------------------------------
-------- -- --------------------
------ -- -------- --------- ------------
---
--
-----------
---
--
--总结
在这篇文章中，我们介绍了npm包Apollo-Upload-Client-Fork-Mxstbr，它可以轻松实现文件上传功能，同时提高上传性能。通过阅读这篇文章，你已经了解了如何在GraphQL中使用它，现在你可以随意上传你的文件了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab181e8991b448d8451