Django-Graphql mutation works in Playground but Returns null in ReactJS-Apollo

Viewed 76

I making a simple update mutation from Graphql Playground, and I believe that if the mutation is working from playground, Hence there is no issue in backend.

mutation{
  emwCustomMessageToCustomerUpdate(
    id:"RU1XQ3VzdG9tSW5mb3JtYXRpb25Gb3JDdXN0b21lcjoxNQ==", 
    input:{
      isActive:false,
      allowClose:false,
      message:"asdfssdf",
      displayLocation:"S1",
      messageHeader:"Dsfsdf"
    }){
    eMWInformationForCheckout{
      message
    }
    errors{
      message
    }
  }
}

Which returns this response indicating call is success, I could verify that.

{
  "data": {
    "emwCustomMessageToCustomerUpdate": {
      "eMWInformationForCheckout": {
        "message": "asdfssdf"
      },
      "errors": []
    }
  }
}

But when I call this mutation from reactjs-apollo, It is not mutating the data, I am mutating a single key, But it makes other keys to null. The mutation i am using from react is :

export const UpdateMessageForCustomer = gql`
  mutation UpdateMessageForCustomer(
    $id: ID!
    $message: String
    $startDate: DateTime
    $endDate: DateTime
    $allowClose: Boolean 
    $displayLocation : String
    $buttonText : String
    $screenPlacement : String
    $messageHeader : String
    $isActive : Boolean
    ){
      emwCustomMessageToCustomerUpdate(id: $id, 
        input:{
        message: $message
        startDate: $startDate,
        endDate: $endDate,
        allowClose: $allowClose,
        displayLocation : $displayLocation
        buttonText : $buttonText
        screenPlacement : $screenPlacement
        messageHeader : $messageHeader
        isActive : $isActive
    }){
      eMWInformationForCheckout{
        message
      }
      errors{
        message
      }
    }
  }
`

function used to mutate in react component

const [UpdateMessageForCustomerMutation] = useMutation(UpdateMessageForCustomer, {
    onCompleted({ emwCustomMessageToCustomerUpdate }) {
        if (emwCustomMessageToCustomerUpdate.errors.length) {
            notify({
                text: intl.formatMessage({
                    defaultMessage: "Message added successfully"
                })
            });
            refetch()
        }
    },
    onError(error) {
        console.log('error', error)

    }
});

and the trigger mutation is as following

const changeMessageStatus = (e, id) => {
    UpdateMessageForCustomerMutation({
        variables: {
            id : id,
            input : {
                [e.target.name]:e.target.value
            }
        }
    })
}

Request Pay Load is this

And this is the response

1 Answers

This was very easy, I just had to send all the variables in the "variables" object directly, Nesting them inside the "input" variable was making the inputs as null because graphql was expecting them in variables. I'm not sure how but in backend they certainly come in "input" object, That is why i was pushing them like that.

Thanks.

Related