CODEWITHSUNDEEP
reactjsgraphqlapolloapollo-clientstrapi
Brady Edgar
Brady Edgar

Reputation: 543

Can't upload a file to Strapi using GraphQL and Apollo

I have a React/Next.js app which is using GraphQL and Apollo to connect and interact with a headless API. I am using Strapi as my headless API/CMS which is working great, except for one issue. I am trying to upload a file from my React app to a content type in my Strapi CMS using a GraphQL mutation and it keeps failing on the upload part.

When I upload a file using Altair(my playground environment) to Strapi with the exact same mutation everything works fine, but once I try to run the same mutation from my React app I get this error: Variable \"$file\" got invalid value {}; Upload value invalid.. Everything I see online brings up using apollo-upload-client and adding something like link: createUploadLink({ uri: "http://localhost:4300/graphql" }), to my Apollo client initiation. I have tried that but whenever I use it, it breaks my app and I get this GraphQL error Error: Cannot return null for non-nullable field UsersPermissionsMe.username..

It seems like the only answer I can find is using apollo-upload-client but when I use it, it seems to break my app. I don't know if I need to use it differently maybe because I am using Strapi, or Next, or @apollo/client. I am a little lost on this one.

This is how I initiate my Apollo client and when everything works except uploading a file.

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}`,
        },
    });
}

My app runs perfect with this code except for the fact that I get "message":"Variable \"$file\" got invalid value {}; Upload value invalid.", whenever I try to upload a file. So when I try to use apollo-upload-client to fix that like this:

import { ApolloClient, InMemoryCache, 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 }),
        cache: new InMemoryCache(),
        headers: {
            Authorization: `Bearer ${ctx ? parseCookies(ctx).jwt : parseCookies().jwt}`,
        },
    });
}

I get this error: Error: Cannot return null for non-nullable field UsersPermissionsMe.username..

I am still new to GraphQL and Strapi so maybe I am missing something obvious. Everything works except uploads. I can upload from my playground, just not from my app, that is where I am at.

Upvotes: 0

Views: 1327

Answers (1)

Brady Edgar
Brady Edgar

Reputation: 543

So after two days of this issue, I figured it out after 10 minutes of reading the apollo-upload-client documentation. So much shame. All I needed to do was move my header request from the ApolloClient options to the createUploadLink options. Final fix was

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(),
    });
}

Upvotes: 2

Related Questions