T
TanStack•2y ago
metropolitan-bronze

How to abort a useMutation ?

Hello, I have a use case where i have to do several mutations in a promise, but i want to cleanup the queries at unmount. Now : i am using a signal with an abortController, is there a simpler solution ? 
 useEffect(() => {
    const controller = new AbortController()

    const articlePromises = articles.map(({ article }) => {
      return processTask(article.id, controller.signal)
    })

    Promise.allSettled(articlePromises).catch((error) => {
      captureException(error)

      console.error(error)
    })

    return () => {
      controller.abort()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
 useEffect(() => {
    const controller = new AbortController()

    const articlePromises = articles.map(({ article }) => {
      return processTask(article.id, controller.signal)
    })

    Promise.allSettled(articlePromises).catch((error) => {
      captureException(error)

      console.error(error)
    })

    return () => {
      controller.abort()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
My mutation : 
    mutationKey: keysStore.retail.menu.generateBackground(),
    mutationFn: (body) =>
      internalFetcher<GenerateBackgroundRetailMenuOutput, GenerateBackgroundRetailMenuInput>({
        url: '/api/client/multiple',
        body,
        method: 'POST',
        signal: body.signal,
      }),
  })
    mutationKey: keysStore.retail.menu.generateBackground(),
    mutationFn: (body) =>
      internalFetcher<GenerateBackgroundRetailMenuOutput, GenerateBackgroundRetailMenuInput>({
        url: '/api/client/multiple',
        body,
        method: 'POST',
        signal: body.signal,
      }),
  })
3 Replies
harsh-harlequin
harsh-harlequin•2y ago
I saw Dominik talk about this somewhere. As far as I know there's no way to abort mutations because it's designed for server effects, so once it reaches the server the client can't stop it. You can cancel the request and ignore the response, which looks like what you're attempting, but that doesn't actually stop the effects it already started/made
harsh-harlequin
harsh-harlequin•2y ago
https://github.com/TanStack/query/discussions/1551
GitHub
How to cancel/abort a mutation query? · TanStack query · Discussion...
Is there a way to cancel/abort mutation requests, similar to how cancelqueries does it for queries? I can't seem to figure that out.
metropolitan-bronze
metropolitan-bronzeOP•2y ago
@troywoy Thank you for the answer

Did you find this page helpful?