在 Gatsby 中使用带有 Apollo 客户端和 apollo-upload-client 的 axios-fetch 文件上传失败答案

【问题标题】：File uploads fail using axios-fetch with Apollo client and apollo-upload-client in Gatsby在 Gatsby 中使用带有 Apollo 客户端和 apollo-upload-client 的 axios-fetch 文件上传失败
【发布时间】：2022-01-14 01:28:11
【问题描述】：

我正在使用 axios-fetch 作为 Gatsby 中 Apollo 客户端的获取实现。我想将文件上传到服务器，所以我使用的是包：apollo-upload-client。但是在检查发送的有效负载时，它会说：

[object FormData]，而不是序列化所有内容。

关于如何解决此问题的任何建议？

PD：我尝试使用cross-fetch，效果很好。

更新：

这是我用 axios-fetch 创建的 Apollo 客户端：

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { createUploadLink } from 'apollo-upload-client';
import { buildAxiosFetch } from 'axios-fetch'; // This doesn't work
import Axios from 'axios';

import { GRAPHQL_ENDPOINT } from '../settings';

const axios = Axios.create({ timeout: 10000 });
const fetch = buildAxiosFetch(axios);

const client = new ApolloClient({
  cache: new InMemoryCache(),
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  link: new (createUploadLink as any)({
    uri: GRAPHQL_ENDPOINT,
    fetch,
  }),
});

export default client;

【问题讨论】：

可以分享对应的sn-p吗？

标签： file-upload gatsby apollo-client axios-fetch

【解决方案1】：

您是否尝试过使用JSON.stringify 序列化数据？

const client = new ApolloClient({
  cache: new InMemoryCache(),
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  link: new (createUploadLink as any)({
    uri: GRAPHQL_ENDPOINT,
    JSON.stringify(fetch),
  }),
});

【讨论】：