#How to abort a useMutation ?

3 messages · Page 1 of 1 (latest)

shut wedge
#

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
  }, [])

My mutation :

    mutationKey: keysStore.retail.menu.generateBackground(),
    mutationFn: (body) =>
      internalFetcher<GenerateBackgroundRetailMenuOutput, GenerateBackgroundRetailMenuInput>({
        url: '/api/client/multiple',
        body,
        method: 'POST',
        signal: body.signal,
      }),
  })
strange hatch
#

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