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

[aloysb]

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>

[phryneas]

Could you try to create a reproduction for this?

[rana944]

@phryneas ,

Thank you so much for such awesome package. I have used it inside my current app and I am literally enjoying this .

One thing, I have been struggling with is the Pending state of mutation.

I have a scenario where I have been using RTK mutation to fetch data from server on demand. However, when ever I get a 500 error, it gets logged to my middleware

export const rtkQueryErrorLogger: Middleware = (api: MiddlewareAPI) => (next) => (action) => {
   console.log(isRejected(action));
   if (isRejectedWithValue(action)) {
        console.warn('We got a rejected action!')
        console.log({ ...action?.payload, data: '', })
        ShowCustomError(action.payload);
    }
    return next(action);
}

but, the mutation is always in Pending state, not even giving any error state.

As for now, I can see, that I will have to switch to the asyncThunk logic, and managing the state manually.

Can you please provide me some reference to manually trigger the rejection of mutation. So, I can get through it.

Thanks

[phryneas]

@rana944

Could you try to create a reproduction for this?

this applies here as well. without any code showing this in a reproducable way I have no idea what is going on.

[rana944]

@phryneas ,

Thank you so much for such quick response.

I have managed to resolve this issue by using custom base query (Axios Base query).

This is how, I have achieved this,

export const testApi = createApi({
    reducerPath: 'testApi',
    baseQuery: axiosBaseQuery(),
    endpoints: (builder) => ({
        getTopTestItems: builder.mutation<TopTestItem[], TopTestParams>({
            query: (data) => getInterceptor(URLS.TEST1, data, data.token),
        }),
        getTestItems: builder.mutation<TestItem[], TestParams>({
            query: (data) => getInterceptor(URLS.TEST2, data, data.token),
            transformResponse: (response: { data: TestItem[] }) => response.data
        }),
    }),
});

This is the code my GET request interceptor

const getInterceptor = (url: string, params: any, token?: string | undefined) => {
    return {
        url,
        method: 'GET',
        params,
        headers: {
            'Content-Type': 'application/json;charset=UTF-8',
            'Authorization': `JWT ${token}`,
        },
    }
}

This is the code for my custom base query

const axiosInstance = axios.create({
    baseURL: BASE_URL,
});

const axiosBaseQuery = (): BaseQueryFn<any> => async (
    requestOptions,
) => {
    try {

        const result = await axiossInstance({
            ...requestOptions,
        });
    
        return { data: result.data };
    } catch (e: any) {
        return { error: e?.message }
    }
}

This is how I am calling the above mutation,

const [
    getTopTestItems,
    {
        isLoading,
        data,
    }
] = useGetTopTestItemsQuery();

useEffect(() => {
    const testParams = { };
    getTopTestItems({ ...testParams });
}, [])

Thank you

[phryneas]

@rana944 I need a CodeSandbox, git repository or something else that shows me the problem, not the workaround.
If there is a problem, we need to find and fix it in RTK-Query, so that not everyone has to go for the workarounds you have here.

But without a reproduction I have no idea what to look for.

[polaroidkidd]

Hi, I'm currently facing the similar issue and have a reproducible repo here: https://github.com/polaroidkidd/librephotos-frontend/tree/feat/migrate-ts--auth-state

I defined the request here and I'm using it on the signup page here.

The successful query goes through as advertised, but when I try to sign up with the same user name twice, the api correctly returns 400 correctly and the rejected response is logged out here, but the status remains pending

To get talking to the api you'd have to clone https://github.com/LibrePhotos/librephotos-docker, rename librephotos.env to .env and run docker-compose up -d.

I'm fairly sure I've misconfigured something here somehwere since RTK-Query is still new to me, but seeing as there's already a ticket for it and you mention needing a reproducible example, I thought I'd throw my hat in the ring.

[polaroidkidd]

I did some further digging and found a bug in my zod declarations, which stopped the mutation from entering the fulfilled state.

It wasn't related to this after all.

[nofear144]

Got the same issue when i use GET request with Lazy Query and got 500 error from server, status stacked in "Pending" position...

[phryneas]

@nofear144 I can only quote myself from this issue:

without a reproduction I have no idea what to look for.

[amandeep-qasource]

Got the same issue when I use POST request and got success status from the server but the status was stuck in the "Pending" position.

[phryneas]

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.

[amandeep-qasource]

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.

Thank you so much for your quick response!

I am calling a POST API twice in a component using mutation
For first-time mutation call on button click, it is working fine, getting response perfectly fine, but when the same API is called again from button click event it is pausing at the pending status and no output is coming.

[phryneas]

I need a reproduction with code that I can run on my machine and see it for myself.

That could be a GitHub repo, a CodeSandbix or a Replay recording.

[v-x2]

Same problem. I know that you're looking for a snippet to reproduce the error. But actually it seems to be random (I tried to create a code sandbox for you but the error disappeared there..)

Till now, I've tried to change the API endpoint name and the tag and the issues seems to disappear for a while, but after some time it appears again. Could be something related to the cache?