更新 graphQL 阿波罗突变中的多个值

Question

我正在尝试从我的前端(React + apollo graphql(更新我的后端用户(typeorm 后端(

我正在定义一个更新用户的突变，它调用UserUpdateInput类

@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;
}

我的突变(从我的服务器端(工作并更新我的数据库

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

我尝试过通过我的前端进行更新，但我不确定如何将多个值传递到我的输入对象中

更新用户.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>
)
}

任何帮助/指导将不胜感激。谢谢！

Answer 1

以下是使用突变钩子的方法 -

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

使用组件从任何地方调用updateUser并像这样传递变量-

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

现在在突变查询中传递这样的变量 -

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

}
) {
id
firstName
lastName

}
}
`;