Unhandled Runtime Error Error: Response not successful: Received status code 400

Help
,
1

I’m trying to upload media files using graphql with apollo upload client
getting this error

{“errors”:[{“message”:“Unknown argument "input" on field "Mutation.createUploadFile".”,“locations”:[{“line”:2,“column”:20}],“extensions”:{“code”:“GRAPHQL_VALIDATION_FAILED”{“message”:“Field "createUploadFile" argument "data" of type "UploadFileInput!" is required, but it was not provided.”,“locations”:[{“line”:2,“column”:3}],“extensions”:{“code”:“GRAPHQL_VALIDATION_FAILED”,

My code

import { useState } from "react";
import { gql, useMutation } from "@apollo/client";

const UPLOAD = gql`
  mutation ($file: UploadFileInput!) {
    createUploadFile(input: { data: { file: $file } }) {
      name
    }
  }
`;

export default function App() {
  const [image, setImage] = useState();

  const onImageChange = (event) => {
    console.log(event.target.files);

    setImage(event.target.files[0]);
  };

  const [addImage] = useMutation(UPLOAD, {
    variables: {
      file: image,
    },
  });
  console.log("image", image);

  const onSubmit = (e) => {
    e.preventDefault();
    addImage();
  };

  return (
    <>
      <form onSubmit={onSubmit}>
        <input type="file" name="files" onChange={onImageChange} alt="image" />
        <br />
        <button type="submit">Send</button>
      </form>
    </>
  );
}

my app.js

import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
import { createUploadLink } from "apollo-upload-client";
import "../styles/globals.css";

const client = new ApolloClient({
  link: createUploadLink({
    uri: "http://localhost:1337/graphql/",
  }),
  cache: new InMemoryCache(),
});

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp;

my packege.json

{
  "name": "apollo_mutations",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@apollo/client": "^3.7.1",
    "apollo-upload-client": "^17.0.0",
    "graphql": "^16.6.0",
    "next": "13.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "8.26.0",
    "eslint-config-next": "13.0.0"
  }
}

Tip:: I’m Using strapi v4 API

2

Hi @pratik_bankar, thanks for posting! I haven’t personally used apollo-upload-client but I’ll try to help interpret the error message.

{“errors”:[{“message”:“Unknown argument "input" on field "Mutation.createUploadFile".”,“locations”:[{“line”:2,“column”:20}],“extensions”:{“code”:“GRAPHQL_VALIDATION_FAILED”{“message”:“Field "createUploadFile" argument "data" of type "UploadFileInput!" is required, but it was not provided.”,“locations”:[{“line”:2,“column”:3}],“extensions”:{“code”:“GRAPHQL_VALIDATION_FAILED”,

This passage: “Unknown argument "input" on field "Mutation.createUploadFile" makes me suspect that there is no named parameter input in your schema. This passage: Field "createUploadFile" argument "data" of type "UploadFileInput!" is required, but it was not provided makes me wonder whether your code should be as follows:

const UPLOAD = gql`
  mutation ($file: UploadFileInput!) {
    createUploadFile(data: { file: $file }) {
      name
    }
  }
`;

I’m not sure, though. If you have the type annotation for UploadFileInput from your GraphQL schema that would probably help narrow things down.