0

I'm currently working on implementing file uploads in GraphQL, but I'm encountering an issue. Whenever I try to upload a file, I receive the following error message: "POST body missing, invalid Content-Type, or JSON object has no keys."

Here's an overview of my setup:

I have followed the documentation and examples provided for file uploads with GraphQL, but I can't seem to identify the cause of the error. I suspect it might be related to the request configuration or headers.

Here's an example of the GraphQL mutation I'm using on the frontend:

csharp

require("dotenv").config();
import { ApolloServer } from "apollo-server";
import { typeDefs, resolvers } from "./schema";
import { getUser } from "./schema/User/User.Utils";

async function startApolloServer() {
  const server = new ApolloServer({
    typeDefs,
    resolvers,
    context: async ({ req }) => {
      return {
        loggedInUser: await getUser(req.headers.token as string),
      };
    },
  });
  const PORT = process.env.PORT;

  server
    .listen(PORT)
    .then(() => console.log(`Server is running on http://localhost:${PORT}/ `));
}

startApolloServer();


import { gql } from "apollo-server";

export default gql`
  scalar Upload
  type editProfileResult {
    ok: Boolean!
    error: String
  }
  type Mutation {
    editProfile(
      firstName: String
      lastName: String
      userName: String
      email: String
      password: String
      token: String
      avatar: Upload
      bio: String
    ): editProfileResult
  }
`;

import client from "../../../client";
import bcrypt from "bcrypt";
import { IAccount, IContext } from "../User.interface";
import { protectResolver } from "../User.Utils";

export default {
  Mutation: {
    editProfile: protectResolver(
      async (
        _: unknown,
        {
          firstName,
          lastName,
          userName,
          email,
          bio,
          avatar,
          password: newPassword,
        }: IAccount,
        { loggedInUser }: IContext
      ) => {
        console.log(avatar);
        let uglyPassword = null;
        if (newPassword) {
          uglyPassword = await bcrypt.hash(newPassword, 10);
        }
        const updateUser = await client.user.update({
          where: {
            id: loggedInUser?.id,
          },
          data: {
            firstName,
            lastName,
            userName,
            email,
            bio,
            ...(uglyPassword && { password: uglyPassword }),
          },
        });
        if (updateUser.id) {
          return {
            ok: true,
          };
        } else {
          return {
            ok: false,
            error: "업데이트가 불가능합니다",
          };
        }
      }
    ),
  },
};

On the backend, I have the necessary resolver and configuration to handle file uploads. However, when I send the request, I receive the mentioned error message.

I have double-checked the Content-Type header, and it is set to "multipart/form-data" as recommended for file uploads. I also made sure that the request body includes the necessary fields for the file upload.

I would appreciate any insights or guidance on what might be causing this error. Have any of you encountered a similar issue with file uploads in GraphQL? If so, how did you resolve it? Any help or suggestions would be greatly appreciated.

Thank you in advance for your assistance!

I have tried the following steps to resolve the file upload issue in GraphQL:

Configured the GraphQL server to support file uploads by implementing the necessary resolvers and configuring the middleware. Verified that the frontend code is correctly sending the GraphQL mutation with the file data included. Checked the Content-Type header in the request, ensuring that it is set to "multipart/form-data" to handle file uploads. Verified that the request body contains the required fields for the file upload, including the file itself. Based on my understanding and the examples I found, I expected the file upload to work without any issues, allowing me to receive the uploaded file on the server side and process it accordingly. However, instead, I encountered the error message "POST body missing, invalid Content-Type, or JSON object has no keys."

user22127283
  • 1

0 Answers0