React Hooks 上的 Apollo 突变答案

【问题标题】：Apollo Mutation on React HooksReact Hooks 上的 Apollo 突变
【发布时间】：2021-05-01 02:46:46
【问题描述】：

大家好， 我开始在 graphql 和 apollo 上工作，我可以声明但只是得到请求，我不能进行突变。我的 handleChange 函数正在工作，我可以取值。但我无法发布请求。我的问题是如何在我的工作上发布带有突变的请求。 这是我的错误：

createHttpLink.ts:146 POST http://localhost:3000/graphql 400 (Bad Request)
Uncaught (in promise) Error: Response not successful: Received status code 400
   at new ApolloError (index.ts:49)
   at Object.error (QueryManager.ts:236)
   at notifySubscription (Observable.js:140)
   at onNotify (Observable.js:179)
   at SubscriptionObserver.error (Observable.js:240)
   at iteration.ts:13
   at Array.forEach (<anonymous>)
   at iterateObserversSafely (iteration.ts:13)
   at Object.error (Concast.ts:177)
   at notifySubscription (Observable.js:140)
   at onNotify (Observable.js:179)
   at SubscriptionObserver.error (Observable.js:240)
   at createHttpLink.ts:196

这是我的 Apollo.js

import { gql } from '@apollo/client';
export const getMovieQuery = gql`
   {
       movies {
           title
           description
           year
           directorId {
               name
               birth
               movies {
                   title
                   description
               }
           }
       }
   }
`;

export const getDirectorQuery =gql`
{
   directors{
       id,
       name
   }
}
`
export const ADD_MOVIE = gql`
   mutation($title: String!,$description: String,$year: Int!,$directorId: ID!){
       addMovie(title:$title,description:$description,year:$year,directorId:$directorId){
           title,
           year,
           director{
               name,
               birth
           }
       }
   }
`;

这是我的主页

import {useState} from 'react'
import {useQuery,useMutation} from '@apollo/client';
import {ADD_MOVIE,getDirectorQuery} from '../apollo/apolloContext'
function AddMovie() {
    const [addMovie] = useMutation(ADD_MOVIE);
    const {error,data,loading} = useQuery(getDirectorQuery)
    const [addedMovie, setAddedMovie] = useState({
        title:"",
        description:"",
        year:"",
        directorId:""
    });
    const handleSubmit = e => {
        e.preventDefault();
        console.log(addedMovie);
        addMovie({variables:{
            title:addedMovie.title,
            description:addedMovie.description,
            year:parseInt(addedMovie.year,10),
            directorId:addedMovie.directorId
        }});
        setAddedMovie({title:"",
        description:"",
        year:"",
        directorId:""})
    }
    const handleChange = e =>{
        setAddedMovie({
            ...addedMovie,[e.target.name]:e.target.value
        })
    }

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input type="text" name="title" onChange={handleChange} />
                <input type="text" name="description" onChange={handleChange}/>
                <input type="text" name="year" onChange={handleChange}/>
                <select type="text" name="directorId" onChange={handleChange}>
                    <option>Deneme</option>
                    {loading===true?<option>Loading..</option>:
                     data.directors.map(director=><option key={director.id} value={director.id}>{director.name}</option>)
                    }
                </select>
                <button type="submit">kaydet</button>
            </form>
        </div>
    )
}

export default AddMovie

在我的后端，一切都很好，我测试了我的突变，它正在工作。但如果你想看看它是我的后端代码：

const Mutation = new GraphQLObjectType({
    name:'Mutation',
    fields:{
        addMovie:{
            type:MovieType,
            args:{
                title:{type:GraphQLNonNull(GraphQLString)},
                description:{type:GraphQLNonNull(GraphQLString)},
                directorId:{type:GraphQLNonNull(GraphQLString)},
                year:{type:GraphQLNonNull(GraphQLInt)}
            },
            resolve(parent,args){
                const movie = new Movie({
                    title:args.title,
                    description:args.description,
                    directorId:args.directorId,
                    year:args.year
                });
                return movie.save()
            }
        },
        addDirector:{
            type:DirectorType,
            args:{
                name:{type:GraphQLNonNull(GraphQLString)},
                birth:{type:GraphQLNonNull(GraphQLInt)},
            },
            resolve(parent,args){
                const director = new Director({
                    name:args.name,
                    birth:args.birth,
                });
                return director.save()
            }
        }
    }})

我的 graphql 界面


  mutation{
    addMovie(title:"Harry Potter 3"description:"lorem ipsum",year:2004,directorId:"60105d20fe4a70310c0b8c4a")
    {
        title,
      description
    } 
  }

这是我的数据：

{
  "data": {
    "addMovie": {
      "title": "Harry Potter 3",
      "description": "lorem ipsum"
    }
  }
}

【问题讨论】：

你的字体结束码在哪里？
我现在添加，我实际上添加了图像，但它的抛出错误：D
您是否通过 Postman 或 GraphQL 界面检查过您的后端？
我检查了我的 GraphQL 界面并添加了我的问题
我在这里看到的一切看起来都很好。您可以更精确地调试您的 BE，以找出它为什么返回 400 Bad Request？

标签： node.js reactjs mongodb graphql react-apollo

【解决方案1】：

确保在服务器上的突变中声明的变量数据类型与查询中的相同，并且您传递的值是正确的类型..我有同样的错误结果是我声明的 id 变量类型在突变处理程序中声明为字符串，服务器上的声明是 ID.Changing 为我修复了它。

【讨论】：