Updating multiple values in graphQL apollo mutation

Question

I'm trying to update my backend user (typeorm backend) from my frontend (React + apollo graphql)

I'm defining a mutation that updates a user, Which calls UserUpdateInput class

  @Mutation(() => Boolean)
  async updateUser(
    @Arg("user_id", () => Int) user_id: number,
    @Arg("input", () => UserUpdateInput) input: UserUpdateInput
  ) {
    await User.update({ user_id }, input);
    return true;
  }

@InputType()
class UserUpdateInput {
  @Field(() => String, { nullable: true })
  firstName?: string;

  @Field(() => String, { nullable: true })
  lastName?: string;
}

My mutation (From my server side) works and updates my database

mutation {
  updateUser(user_id: 5
  input: {
    firstName: "joe",
    lastName: "Flink"
  })
}

I've tried updating via my frontend like so, but I'm not sure how to pass multiple values into my input object

UpdateUser.tsx

const UPDATE_USER = gql`
    mutation UpdateUser($user_id: Int!, $input: Array!) {
        updateUser(user_id: $user_id, input: $input)
    }
`

export const UpdateUser: React.FC = () => {
    const [firstName, setfirstName] = useState('');
    const [lastName, setlastName] = useState('');

    const [updateUser, { data }] = useMutation(UPDATE_USER)

    console.log(data)
    console.log(firstName, lastName)

    return (
        <form onSubmit={async event => {
            event.preventDefault();
        }}>

            <div>
                <input
                    value={firstName}
                    type="text"
                    placeholder="First Name"
                    onChange={event => {
                        setfirstName(event.target.value)
                    }}
                />
            </div>

            <div>
                <input
                    value={lastName}
                    type="text"
                    placeholder="Last Name"
                    onChange={event => {
                        setlastName(event.target.value)
                    }}
                />
            </div>
            <button onClick={async () => {
                await updateUser({
                    variables: {
                        user_id: 5,
                        input: {
                            firstName,
                            lastName
                        }
                    }
                })
            } 
        } type="submit">Update</button>
        </form>
    )
}

Any help/guidance would be much appreciated. Thanks!

what do mean pass multiple values into my input object. you mean make more than one update. — masonCherry

Dlucidone Dlucidone · Accepted Answer · 2020-07-02T13:32:30

Here's how you can use the mutation hook -

const [updateUser, { data }] = useMutation(UPDATE_USER)l;

Call the updateUser from anywhere with the component and pass variable like this-

updateUser({ variables: { firstName:firstName, lastName:lastName, user_id:userId } });

now in the mutation query pass variables like this -

const UPDATE_USER = gql`
    mutation updateUser(
        $id: ID!
        $firstName: String!
        $lastName: String!
    ) {
        updateUser(
            user: {
                id: $id
                firstName: $firstName
                lastName: $lastName
               
            }
        ) {
            id
            firstName
            lastName
            
        }
    }
`;

Updating multiple values in graphQL apollo mutation

1 Answers