React Hooks 上的 Apollo 突变

Posted 2023-03-08

【中文标题】React Hooks 上的 Apollo 突变

【英文标题】：Apollo Mutation on React Hooks

【发布时间】：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？

【参考方案1】：

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