Values turn up undefined in resolver (Graphql, Apollo, React) - reactjs

Question

The resolver works fine when i use it from the Playground. But when i send values from the client to the resolver, values somehow show up "undefined" in the resolver.
Client:
import React, { useState } from 'react';
import { useQuery, useMutation } from '#apollo/react-hooks';
import { Form, Grid } from 'semantic-ui-react';
import gql from 'graphql-tag';
function TestPage() {
const userId = "5fa2c177382ce83660b3911b";
const { loading, data: { getUser } = {} } = useQuery( FETCH_USER_QUERY, {
variables: {
userId
}
});
const [values, setValues] = useState({
countryInput: '',
descriptionInput: ''
})
const onChange = (event) => {
setValues({ ...values, [event.target.name]: event.target.value});
}
const [updateCountry] = useMutation(UPDATE_COUNTRY_MUTATION, {
variables: {
userId,
values
}
})
const submit = (event) => {
event.preventDefault();
updateCountry()
}
console.log(values)
let TestPage;
if(loading){
TestPage = (<p>Page Loading...</p>)
} else {
const {
username,
country,
description
} = getUser;
TestPage = (
<Grid columns={1}>
<Grid.Row className="profile-name">
<h1>Test Page</h1>
<h4>This page is for testing code</h4>
<h4>User: {username}</h4>
</Grid.Row>
<Grid.Row className="profile-name">
<h1>Country: {country}</h1>
<h1>Desc: {description}</h1>
</Grid.Row>
<Grid.Row>
<Form>
<input
style={{ marginBottom: 10 }}
placeholder="Country"
type="text"
name="countryInput"
value={values.countryInput}
onChange={onChange}
/>
<input
style={{ marginBottom: 10 }}
placeholder="Description"
type="text"
name="descriptionInput"
value={values.descriptionInput}
onChange={onChange}
/>
<button
onClick={submit}
className="ui button red"
color="red"
>
Save
</button>
</Form>
</Grid.Row>
</Grid>
)
}
return TestPage;
}
Mutation (in the same file as client):
const UPDATE_COUNTRY_MUTATION = gql `
mutation UpdateCountry(
$userId: ID!,
$countryInput: String,
$descriptionInput: String ){
updateCountry(
userId: $userId,
countryInput: $countryInput
descriptionInput: $descriptionInput
){
username
country
description
}
}
`;
I got "Unhandled Rejection (Error): Network error: Response not successful: Received status code 400" before, but now it just returns nulls in the db.
I assume the issue was the mutation, i changed it from using "input" to just typing out the variables, but doesent work.
I googled around and tried different kind of doing callbacks and hooks, but i get the unhandled rejection error and when i get it working the values show up undefined.
How can the value be defined when sent in the client but show up undefined in the resolver? What am i doing wrong?

Answer 1

"...values" instead of "values" in the useMutation:
const [updateCountry] = useMutation(UPDATE_COUNTRY_MUTATION, {
variables: {
userId,
...values
}
})