是否有与 Apollo 的 ReactNativeFile 等效的 URQL（来自 apollo-upload-client）？

Posted 2023-03-10

【中文标题】是否有与 Apollo 的 ReactNativeFile 等效的 URQL（来自 apollo-upload-client）？

【英文标题】：Is there an URQL equivalent of Apollo's ReactNativeFile (from apollo-upload-client)?

【发布时间】：2021-12-14 21:47:48

【问题描述】：

我使用 URQL 作为我的 react native graphql 客户端。我喜欢使用该库，但似乎没有一种简单的方法可以将从 expo 图像选择器中选择的文件上传到我的节点服务器。

我做了一些谷歌搜索，找到了一个Ben Awad video，他在其中使用 ReactNativeFile 将结果转换为文件。 问题在于，这似乎是适合 apollo 客户的唯一方式。 urql 有类似的东西吗？将 uri & base64 转换为 JS 文件的代码是什么样的？

...
if (!imageResult.cancelled) 
  const file = new ReactNativeFile(
    uri: imageResult.uri,
    type: imageResult.type,
    name: "picture"
  );

图像选择 fn

const result = await ImagePicker.launchImageLibraryAsync(
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
  allowsEditing: true,
  base64: true,
  aspect: [1, 1],
  quality: 1,
);
if (result.cancelled || !result.uri || !onSuccessful) return;
await onSuccessful(result);

【参考方案1】：

根据 ReactNativeFile 类 (extract-files/public/ReactNativeFile.js) 的源代码，它只返回您输入的相同值。我认为使用具有相同数据的普通对象没有问题。如果你想使用这个，你可以，apollo-upload-client 只从 extract-files 库中导出 ReactNativeFile (apollo-upload-client/public/ReactNativeFile.js)

可能 apollo-client 会检查它是否是 ReactNativeFile 类的 instanceof，但我认为 URQL 不会检查它。

文件上传应遵循官方 URQL 文档，不要使用 apollo https://formidable.com/open-source/urql/docs/advanced/persistence-and-uploads/#file-uploads

【讨论】：

我没有注意到它只是返回一个普通对象。这很有帮助。我已经用 mutlipartfetchexchange 替换了我的 fetchExchange。我只需要一种方法将 expo-image-picker 结果转换为我的 URQL graphql 客户端将接受的文件。看起来 Ben 在这里为 apollo 使用了以下代码，但这对我的 urql 客户端没有帮助。 github.com/benawad/fullstack-graphql-airbnb-clone/blob/…

@jmecs URQL 文档说您可以使用 extract-files 包，并且由于 apollo-upload-client 仅从 extract-files 导出它，您可以关注该 youtube 视频并仅更改从 @ 导入 ReactNativeFile 987654325@ 而不是 apollo-upload-client