Невозможно загрузить файл с помощью Reactjs, apollo, django

Здравствуйте, я пытаюсь загрузить файл, используя django для back и reactjs для front и graphql с apollo для reactjs, graphene для django.

Вот часть моего кода :

Начнем с передних файлов :

index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloClient, InMemoryCache } from '@apollo/client';
import { ApolloProvider } from '@apollo/client/react';
import { createUploadLink } from 'apollo-upload-client';
import App from './App';

const cache = new InMemoryCache();
const uri = 'http://localhost:8000/graphql/';
const link = createUploadLink({ uri });
const client = new ApolloClient({ cache, link });
ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')

);

App.js

import React from 'react';
import { gql, useMutation } from '@apollo/client';

const MUTATION = gql`
  mutation ($file: Upload!) {
    imageUpload(file: $file) {
      success
    }
  }
`;

function App() {
  const [mutate] = useMutation(MUTATION);

  function onChange({
    target: {
      validity, value } }){
    if (validity.valid) {
      const file = new Blob([value], { type: "text/plain" });
file.name = "text.txt";
mutate({ variables: { file: file } });

    }
  }

  return <input type="file" onChange={onChange} />;

}

export default App;

А теперь о спине :

import graphene
from .models import Todo
from graphene_django import DjangoObjectType, DjangoListField
from graphql_jwt.decorators import login_required
from django.contrib.auth import get_user_model
from graphene_file_upload.scalars import Upload


def upload_file(file):
    success = True
    return success

class ImageUpload(graphene.Mutation):
    class Arguments:
        file = Upload(required=True)

    success = graphene.Boolean()

    def mutate(self, info, file, **kwargs):
        success = upload_file(file)
        return ImageUpload(success=success)

class Mutation(graphene.ObjectType):
    image_upload = ImageUpload.Field()

Но проблема заключается в следующем: когда я пытаюсь загрузить, например, изображение, у меня возникает такая ошибка :

Unhandled Rejection (Error): Response not successful: Received status code 400

Если я посмотрю на детали ошибки, то получу следующее :

Object { message: "Must provide query string." }

Я попытался заменить эту строку mutate({ variables: { file: file } }); на эту :

mutate({ variables: { file: "" } });

и он работает ... Я вообще не понимаю, почему он не работает. Я следую всей документации, но безуспешно.

Можете ли вы мне помочь?

Большое спасибо!

Вернуться на верх