为更新突变解构对象

Question

我仍然是新的Reactjs和Graphql。我一直试图将特定对象传递给变量对象进行更新操作。我希望能够将对象分离为ID和其他值，因为它位于由其他功能使用的组件内，因此使用相同的组件也可以很容易地对其他组件进行突变。

当我从下面的代码中单击编辑选项卡时，我检索了这个特定的对象:

const handleUpdate = () => {
const updateDetails = {}
Object.keys(formDetails).forEach(k => {
updateDetails[k] = formDetails[k]?.id ? formDetails[k]?.value : formDetails[k]
})
console.log('updated data is ', updateDetails)
onUpdate(updateDetails)
}

当我执行console.log时，上面的代码返回如下结果:

updated data is  {__typename: "NewsType", id: "c67ea940-298f-4d27-8661-57630f8812a5", name: "Gary"}

我的onUpdate函数在另一个文件中定义为prop，如下所示:

const onUpdate = async (items) => {
console.log('values to insert is ', items)
try {
const { data } = await update({ variables: { [inputKey]: items, [inputID]: items.id } })
if (Object.values(data)[0].ok) {
handleModal()
}
} catch (error) {
console.log(error)
}
}

其中[inputKey]和[inputID]作为prop传递，具体取决于我们正在使用的功能，但在本例中，值分别为news和id。

我的更新突变如下:

const [update] = useMutation(updateOperation)

我的updateOperation也作为一个道具传递进来，使它更通用，可以被其他功能使用。

传递给updateOperation的graphqhql查询如下所示:

export const UPDATE_NEWS = gql`
mutation updateNews($news: NewsUpdateGenericType!, $id: ID!){
updateNews(news: $news, id: $id) {
ok
}  
} `

我尝试了很多概念，比如使用

Object.keys(values).foreach((id, value) => {
....})

和Object.entries(values).

我真的发现很难使这个更新功能工作…如有任何意见，我将不胜感激

Answer 1

如果我没理解错的话，你是想让所有人都有一个突变函数。我曾试图在我的一个项目中实现类似的目标。然而，我只管理一个对象类型——User． 我在TypeScript中使用了Hasura，所以项目设置对你来说可能很困难，但希望它能给你一个想法。

突变gql

export const UPDATE_USER = gql`
${USER_FIELDS}
mutation update_user($id: String!, $changes: users_set_input) {
update_users_by_pk(
pk_columns: {id: $id}, 
_set: $changes
) {
...UserFields
# id
# name
# ...
}
}
`

users_set_input Type Definition

export type Users_Set_Input = {
id?: Maybe<Scalars['String']>;
name?: Maybe<Scalars['String']>;
...
};

useMutation钩

const [updateUser, { data: updateData }] = useMutation<
Update_UserMutation
>(UPDATE_USER)

export type Update_UserMutation = { __typename?: 'mutation_root', update_users_by_pk?: Maybe<{ __typename?: 'users', id: string, name?: Maybe<string>}> };

updateUser叫

targetField是作为prop传递的动态变量

updateUser({
variables: {
id: userId,
changes: { [targetField]: saveValue }
},
}

Answer 2

我已经能够找到方法将我的对象分为ID和其他值。

我使用了

这个概念

const {id, ...otherValues} = items

这对我来说很有用…谢谢你的努力@Ziwon