BAD_USER_INPUT on addPaymentToOrder mutation.

[agoransson]

Hello, I've been having some issues trying to understand why my addPaymentToOrder mutation is failing. I created a stackoverflow question as well - but unsure if I'll get any replies there so I'll ask the community here as well.

I'm trying to add a payment to my order, but I'm getting BAD_USER_INPUT which seems to be an Apollo error.

I'm running latest Vendure (1.5.0) on server and client side.

My very simple mutation looks like this:

export const AddPaymentToOrderQuery = gql`
mutation AddPaymentToOrder($input: PaymentInput!) {
    addPaymentToOrder(input: $input) {
        ... on Order {
            id
        }
    }
}
`;

My variables looks like this:

type PaymentMethodVars = {
    method: string
}

type Variables = {
    input: PaymentMethodVars
};

And the hook declaration looks like this:

const [addPaymentMutation, { client }] = useMutation<Result, Variables>(AddPaymentToOrderQuery);

The error I get looks like this:

{
	"errors": [{
		"extensions": {
			"code": "BAD_USER_INPUT"
		},
		"locations": [{
			"line": 1,
			"column": 28
		}]
	}]
}

The error points to the $input arg, but doesn't explain why the argument is bad:

query: "mutation AddPaymentToOrder($input: PaymentInput!) {\n  addPaymentToOrder(input: $input) {\ ... "

I'd appreciate any help understanding this - I know it's not really Vendure, since it's an Apollo issue. But I'd appreciate any help the community can lend me. Thanks!

[michaelbromley]

Hi,
Can you show the code where you actually execute the addPaymentMutation function in your code? I think the error relates to the fact that the actual variables object being passed at that point does not conform to the expected type as defined by the PaymentInput type.

[agoransson]

Sure!

    const addMethod = (method: string, metadata?: Object): Promise<FetchResult<Result>> => {

        console.log(`PaymentMethodAction.addMethod(${method})`)

        return addPaymentMutation({
            variables: {
                input: {
                    method: "mycode"
                }
            },
            onCompleted: (data) => {
                console.log(data);
                onCompleted(data.addPaymentToOrder)
            }
        })
    }

[michaelbromley]

I'm not very familiar with Apollo Client hooks, but in these docs it looks like you are supposed to pass the variables in as the second argument to useMutation(). Could that be the issue?

[agoransson]

I've followed same pattern as in other mutations. Login for example:

    const login = (username: string, password: string, rememberMe?: Boolean): Promise<FetchResult<Result>> => (
        mutate({
            variables: { 
                username,
                password,
                rememberMe
            }
        })
    );

[michaelbromley]

ok, maybe it would be helpful to share what is happening in the network tab of your browser - what does the actual request look like?

[agoransson]

Definitely! I really appreciate the help! =)

Headers

Request URL: http://localhost:3000/shop-api
Request Method: POST
Status Code: 400 Bad Request
Remote Address: [::1]:3000
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3001
Connection: keep-alive
Content-Language: sv-SE
Content-Length: 91
Content-Type: application/json; charset=utf-8
Date: Tue, 29 Mar 2022 08:19:32 GMT
ETag: W/"5b-GRNoJC+bzWKXExFjJQ6tyWknvQg"
Keep-Alive: timeout=5
Vary: Origin
X-Powered-By: Express
accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: sv-SE,sv;q=0.9,en-US;q=0.8,en;q=0.7
Connection: keep-alive
Content-Length: 258
content-type: application/json
Cookie: session=eyJ0b2tlbiI6IjgwZDZiMjc1ZGE0MGUxOTRlNDM5MWE4ZmEyOTkyZWRjYTU4N2ZjZThlM2I1NDM5NWIxNTNmZTAzMmU1YTE5OTYifQ==; session.sig=vIF_K_vGr16Q08Hr4WrtR71GnX4
DNT: 1
Host: localhost:3000
Origin: http://localhost:3001
Referer: http://localhost:3001/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="99", "Google Chrome";v="99"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.83 Safari/537.36

Payload

{operationName: "AddPaymentToOrder", variables: {input: {method: "mycode"}},…}
operationName: "AddPaymentToOrder"
query: "mutation AddPaymentToOrder($input: PaymentInput!) {\n  addPaymentToOrder(input: $input) {\n    ... on Order {\n      id\n      __typename\n    }\n    __typename\n  }\n}"
variables: {input: {method: "mycode"}}
input: {method: "mycode"}
method: "mycode"

Preview

{errors: [{extensions: {code: "BAD_USER_INPUT"}, locations: [{line: 1, column: 28}]}]}
errors: [{extensions: {code: "BAD_USER_INPUT"}, locations: [{line: 1, column: 28}]}]
0: {extensions: {code: "BAD_USER_INPUT"}, locations: [{line: 1, column: 28}]}
extensions: {code: "BAD_USER_INPUT"}
code: "BAD_USER_INPUT"
locations: [{line: 1, column: 28}]
0: {line: 1, column: 28}
column: 28
line: 1

Response

{"errors":[{"extensions":{"code":"BAD_USER_INPUT"},"locations":[{"line":1,"column":28}]}]}

[michaelbromley]

OK I think it might be because the metadata input field is required. If you don't need it, set it as an empty object.

 return addPaymentMutation({
            variables: {
                input: {
                    method: "mycode",
                    metadata: {},
                }
            },
            onCompleted: (data) => {
                console.log(data);
                onCompleted(data.addPaymentToOrder)
            }
        })

[agoransson]

Yes! that's it thank you very much Michael.