[英]How to refetch/fetch after a series of mutation in graphql/apollo/react
Right now I have a use case to use two useMutations to create/update database.现在我有一个使用两个 useMutations 来创建/更新数据库的用例。 So the second one is depends on the success of the first one.所以第二个是取决于第一个的成功。 And also the second mutation needs to be called in a loop, just think about that I have a array and I need loop through the array and apply the second mutation.而且第二个突变需要在循环中调用,想想我有一个数组,我需要遍历数组并应用第二个突变。
After all these mutation finished I have to refetch another api to update caches, because the cache would be impacted by the two mutations.在所有这些突变完成后,我必须重新获取另一个api 来更新缓存,因为缓存会受到这两个突变的影响。
I am really struggling with how to achieve this.我真的在为如何实现这一目标而苦苦挣扎。
From another post: Apollo Client - refetchQueries after multiple updates I can do probably like来自另一篇文章: Apollo Client - refetchQueries after multiple updates I can do probably like
const [creatEnrollment] = useMutation(mut1)
const [updateEnrollment] = useMutation(mut2)
const [toFetch, {loading, error, data}] = useLazyQuery(UsersDocument)
await Promise.all([creatEnrollment(), updateEnrollment()])
const result = () => toFetch({
variables: {name: 'i'}
})
but the problem is 1. I need to execute second mutations after the first one;但问题是 1. 我需要在第一个突变之后执行第二个突变; 2, I need to have an array that applied to second mutations one by one. 2,我需要一个数组,一个一个地应用于第二个突变。
I also saw here How can I wait for mutation execution in React Query?我也看到这里How can I wait for mutation execution in React Query?
we can use onSuccess我们可以使用onSuccess
const mutate1 = useMutation((data) => axios.post('/something', { data }))
const mutate2 = useMutation(somethingResult) => axios.put('/somethingElse', { somethingResult })
<button onClick={() => {
mutate1.mutate('data', {
onSuccess: mutate2.mutate
})
}} />
But still 1. how to loop thru mutate2.mutate?但仍然 1. 如何通过 mutate2.mutate 循环? and how to fetch after mutate2 finished do like this????:以及如何在 mutate2 完成后获取这样做????:
<button onClick={() => {
mutate1.mutate('data', {
onSuccess: mutate2.mutate
})
mutate2.mutate('data', {
onSuccess: query
})
}} />
Thank you for helping!!谢谢你的帮忙!!
You can have a function for useMutation and onSuccess the data which use get on success use other mutation你可以有一个 function 用于 useMutation 和 onSuccess 使用获取成功的数据使用其他突变
const mutationFuntion = (id) => {
// this is first mutation
return useMutation(
(newTitle) => axios
.patch(`/posts/${id}`, { title: newTitle })
.then(response => response.data),
{
// 💡 response of the mutation is passed to onSuccess
onSuccess: (data) => {
// call the api which will get all the latest update
},
}
)
}
Get the Data of first mutation获取第一个突变的数据
const [addTodo, { data, loading, error }] = mutationFuntion(//send data);
This is consecutive mutation I found it from this https://react-query-v3.tanstack.com/guides/mutations#consecutive-mutations doc这是我从这个https://react-query-v3.tanstack.com/guides/mutations#consecutive-mutations文档中找到的连续突变
useMutation(addTodo, {
onSuccess: (data, error, variables, context) => {
// Will be called 3 times
},
})
['Todo 1', 'Todo 2', 'Todo 3'].forEach((todo) => {
mutate(todo, {
onSuccess: (data, error, variables, context) => {
// Will execute only once, for the last mutation (Todo 3),
// regardless which mutation resolves first
},
})
})
For handle the promise of every mutation call用于处理每个突变调用的 promise
const mutation = useMutation(addTodo)
try {
const todo = await mutation.mutateAsync(todo)
console.log(todo)
} catch (error) {
console.error(error)
} finally {
console.log('done')
}
Please you need to verify on what kind of object you want to call mutation in loop it array or some thing alse.请您需要验证您想在循环数组或其他东西中调用哪种 object 突变。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.