Что вызывает 400 Bad Request в Django Graphene и NextJs при использовании крючка useMutation?

Я пытаюсь создать простое приложение todo, используя Django, Graphene и NextJs. Я смог создать todos в graphiQL и postman, однако когда я пытаюсь создать todo в NextJs, я получаю 400 Bad Request от сервера. Я попытался сделать то же самое с помощью обычного ReactJs, но все равно получаю ту же ошибку. Ниже приведена ошибка

Это мой файл models.py

from django.db import models

class Todo(models.Model):
   title = models.CharField(max_length=255)
   completed = models.BooleanField(default=False)
   created_at = models.DateTimeField(auto_now_add=True)
   updated_at = models.DateTimeField(auto_now=True)

   def __str__(self):
       return self.title

Это мой файл todos/schema.py

import graphene
from graphql import GraphQLError
from .models import Todo
from graphene_django import DjangoObjectType

class TodoType(DjangoObjectType):
    class Meta:
       model = Todo


class Query(graphene.ObjectType):
    todos = graphene.List(TodoType)

    def resolve_todos(self, info):
       return Todo.objects.all()


class CreateTodo(graphene.Mutation):
    todo = graphene.Field(TodoType)

    class Arguments:
       title = graphene.String()

    def mutate(self, info, title):
        user = info.context.user

        if user.is_anonymous:
            raise GraphQLError('Login to add a todo!')

        todo = Todo(title=title)
        todo.save()

    return CreateTodo(todo=todo)

class Mutation(graphene.ObjectType):
    create_todo = CreateTodo.Field()

вот мой файл apollo-client.js

import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";

const httpLink = createHttpLink({
uri: "http://localhost:8000/graphql",
});

const client = new ApolloClient({
link: httpLink,
credentials: "include",
cache: new InMemoryCache(),
});

export default client;

Это мой файл addtodo.js

import { useMutation } from "@apollo/client";
import { CreateTodoMutation } from "graphql/mutations";
import { useState } from "react";
import { Button, Container, Form } from "react-bootstrap";

const AddTodo = () => {
const [title, setTitle] = useState("");

const [createTodo] = useMutation(CreateTodoMutation);

const handleSubmit = (e) => {
  e.preventDefault();
  createTodo({ variables: { title } });
};

return (
  <Container>
    <h3>Add Todo</h3>
    <Form onSubmit={handleSubmit}>
      <Form.Group className="mb-3">
        <Form.Label>Project Title</Form.Label>
        <Form.Control
        type="text"
        placeholder="Project Title"
        onChange={(e) => setTitle(e.target.value)}
        />
      </Form.Group>
      <Button variant="primary" type="submit">
      Add
      </Button>
    </Form>
  </Container>
);
};

export default AddTodo;

Прошу помочь мне разобраться в том, что я делаю неправильно. Спасибо в ожидании

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