redux-toolkit: RTKQ: Mutation gets stuck in 'Pending' despite rejection from the server.

Hi,

On multiple places, since I’ve updated our package the mutation is stuck on ‘Pending’ even when an error is thrown.

See screenshot and code below. The server returns 422, but the mutation doesn’t get rejected.

It works with fulfilled mutation, but not rejected ones. I have the issue in multiple places in my codebase and had to revert back to handling the state manually.

Any clues? Thank you!

// Mutation
  verifyEmail: builder.mutation({
      query: ({ key, email }) => ({
        url: `membership/validate-email/${key}/${email}`,
        method: "PUT",
      }),
      
 // In my component

   const [
    verifyEmailMutation,
    { isLoading, isError, isSuccess, isUninitialized },
  ] = useVerifyEmailMutation();
  
  <button onClick={() => { isUninitialized && verifyEmailMutation({ key, email }); } > Button </button>

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 30 (11 by maintainers)

Most upvoted comments

Cool. Could someone at this point maybe even just try to create a reproduction of this instead of saying “I have this problem too”?

Because obviously we have never encountered this. We cannot help you otherwise.

phryneas on Oct 5, 2022

I encountered a similar problem, but it was probably just misusage from my side. For me the request kept hanging as pending because I had a request argument that depended on the current time, which of course changed with every execution.

Something like this:

  const since =
    listState === 'closed'
      ? subDays(new Date(), 90)
      : listState === 'new'
      ? subDays(new Date(), 7)
      : undefined;

  const {
    currentData,
    error,
    isFetching,
  } = useGetDataQuery({
    since: since?.toISOString(),
  });

I resolved this by using the current date without time as a reference point, so since stays constant. Since this was probably just my fault, I did not take the time to set up a repository. However I thought I should just quickly share my finding.

If it is helpful to you, I can set up a repository reproducing this behavior as soon as I have the time.

dominikberse on Oct 12, 2022

Hello everyone, I ran into this problem because I was doing a mutation call into a popup react component that is unmounted just after the mutation call :

const [doMutation, res] = useSomeMutation();
  /* some code...*/
() => {
 doMutation({...});
 //this method call close the popup so react unmount the component
 onValidate();
}

Adding ‘await’ before the mutation call helps resolve this because the “res” variable is updated before the component is unmounted:

async () => {
 await doMutation({...});
 //this method call close the popup so react unmount the component
 onValidate();
}

Hope it’ll help someone 😃

pmoradei on Jul 19, 2023

@azad-source as you can read here, they had manual code in a reducer that was erroring. You likely have a different problem. Please open a new issue and provide a reproduction or a replay recording of the problem.

phryneas on Jun 10, 2023

@Abolfazl2647 your code just makes a new request every time the component rerenders.

Every time the component rerenders, new Date().toISOString() will be a different value, so now RTK Query goes ahead and starts another request. That way, you will never finish loading.

phryneas on Dec 11, 2022