无法使用 GraphQL 和 Apollo 将文件上传到 Strapi

如何解决无法使用 GraphQL 和 Apollo 将文件上传到 Strapi

我有一个 React/Next.js 应用程序，它使用 GraphQL 和 Apollo 来连接无头 API 并与之交互。我使用 Strapi 作为我的无头 API/CMS，它运行良好，除了一个问题。我正在尝试使用 GraphQL 突变将文件从我的 React 应用程序上传到我的 Strapi CMS 中的内容类型，但它在上传部分一直失败。

当我使用 Altair（我的操场环境）将文件上传到 Strapi 并使用完全相同的突变时，一切正常，但是一旦我尝试从我的 React 应用程序运行相同的突变，我就会收到此错误： Variable \"$file\" got invalid value {}; Upload value invalid.。我在网上看到的所有内容都使用 apollo-upload-client 并在我的 Apollo 客户端启动中添加类似 link: createUploadLink({ uri: "http://localhost:4300/graphql" }), 的内容。我已经尝试过了，但是每当我使用它时，它都会破坏我的应用程序，并且我收到了这个 GraphQL 错误 Error: Cannot return null for non-nullable field UsersPermissionsMe.username.。

似乎我能找到的唯一答案是使用 apollo-upload-client 但当我使用它时，它似乎破坏了我的应用程序。我不知道是否需要以不同方式使用它，可能是因为我使用的是 Strapi、Next 或 @apollo/client。我对这个有点迷茫。

这就是我启动 Apollo 客户端的方式，并且除了上传文件外，一切正常。

import { ApolloClient,InMemoryCache,NormalizedCacheObject } from "@apollo/client";
import { parseCookies } from "nookies";
import { useMemo } from 'react'
import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();

let apolloClient: ApolloClient<NormalizedCacheObject>;

function createApolloClient(ctx) {
    return new ApolloClient({
        ssrMode: typeof window === "undefined",uri: publicRuntimeConfig.PUBLIC_GRAPHQL_API_URL,cache: new InMemoryCache(),headers: {
            Authorization: `Bearer ${ctx ? parseCookies(ctx).jwt : parseCookies().jwt}`,},});
}

我的应用程序使用此代码运行得非常完美，除了每次尝试上传文件时我都会收到 "message":"Variable \"$file\" got invalid value {}; Upload value invalid.", 的事实。所以当我尝试使用 apollo-upload-client 来解决这个问题时：

import { ApolloClient,NormalizedCacheObject } from "@apollo/client";
import { createUploadLink } from 'apollo-upload-client';
import { parseCookies } from "nookies";
import { useMemo } from 'react'
import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();

let apolloClient: ApolloClient<NormalizedCacheObject>;

function createApolloClient(ctx) {
    return new ApolloClient({
        ssrMode: typeof window === "undefined",// uri: publicRuntimeConfig.PUBLIC_GRAPHQL_API_URL,link: createUploadLink({ uri: publicRuntimeConfig.PUBLIC_GRAPHQL_API_URL }),});
}

我收到此错误：Error: Cannot return null for non-nullable field UsersPermissionsMe.username.。

我对 GraphQL 和 Strapi 还是个新手，所以也许我遗漏了一些明显的东西。除了上传，一切正常。我可以从我的游乐场上传，但不能从我的应用上传，这就是我所在的位置。

解决方法

所以在这个问题出现两天后，我在阅读 apollo-upload-client 文档 10 分钟后想通了。太羞耻了。我需要做的就是将我的标头请求从 ApolloClient 选项移动到 createUploadLink 选项。最终修复是

function createApolloClient(ctx) {
    return new ApolloClient({
        ssrMode: typeof window === "undefined",link: createUploadLink({
            uri: publicRuntimeConfig.PUBLIC_GRAPHQL_API_URL,headers: {
                Authorization: `Bearer ${ctx ? parseCookies(ctx).jwt : parseCookies().jwt}`,},}),cache: new InMemoryCache(),});
}