Getting access to state inside of queryFn

[MightyMoud]

Hi guys,

At work we have an old codebase using Sagas. We need to move that across to new Redux methods. After some research, I like the way Redux Query works. It will make our code much shorter.
The problem is that our current code, sagas, is accessing the store in the actions all the time. Something I'm unable to do properly at the moment using queryFn.
Two examples are:

• Accessing the refferr object in router state to redirect the user after login (can be done in other ways atm)
• Acessing the user/customer object to use some data from that object when triggering other mutations.
  I understand that Redux Query is a different approach to the problem. So I'm willing to accept that this pattern is incorrect or not recommended. Some clarification would be great.

Here is what I have tried so far:

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://base.url' }),
  endpoints: (builder) => ({
    loginUser: builder.mutation({
      queryFn: (args, queryAPI) => {
        try {
          const [ , { data } ] = customerAPI.useCheckCustomerMutation(); // invalid hook call error
        } catch (error) {
          console.log(error);
        }
        return { data: '' };
      },
    }),
  }),
});

And I have also tried:

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://base.url' }),
  endpoints: (builder) => ({
    loginUser: builder.mutation({
      queryFn: (args, queryAPI) => {
        try {
          const state = queryAPI.getState(); // this gets all the state and we need requestID to get the associated data
        } catch (error) {
          console.log(error);
        }
        return { data: '' };
      },
    }),
  }),
});

This second way seems closer to what I want to get. The issue is that it returns the whole state. Then I need to know what's the requestID to get the data of that mutation. How can I get access to that requestID? or is there an easier way?

Thanks for the help

[MightyMoud]

I figured out a way needs more work on the types but it works for now. I have to see if it works consistently or not for the time being. I'm not sure how it would act if we trigger many of that checkCustomer mutation:

export function getEndpointData<T>(state: any, reducerPath: string, endpointName: string) {
    const mutations = Object.values(state[reducerPath].mutations)
    const selectedMutation: any = mutations.find((m: any)=> (m.status === 'fulfilled' && m.endpointName === endpointName));
    return (selectedMutation ? selectedMutation.data : []) as T;
}

Keen to know what do you guys think?

[phryneas]

What are you actually trying to do? I'm quite sure you have a XY Problem here - you found out queryFn exists and now you're building a lot of logic in there - but from what you are writing here I am not sure if you are even using the right tool.

So:
Can you please explain what your actual goal is, not what you need after applying some different approaches to your initial goal already?

[MightyMoud]

Sure thing.
What I need is to grab the some data from store cus I need that data in each request. So I need to get the customer locale that is currently active and send it to backend with each request. "I don't want to add it to every single argument in every mutation/query."

So that is my actual problem I believe.

[phryneas]

There is a reason you cannot easily get that data in query and that is that it should be in arg.

If that data is not in arg, there is no way for RTK Query to know if that data changed - and subsequently it will not do a re-fetch, leaving you with data for the "wrong locale" whenever your locale changes, instead of updating your UI.

That said, there is data where users might want to choose to omit that "automatic refetch" (on your own risk). Usually, data like that is passed to the server in the request headers, so prepareHeaders has access to the store. Also, if you want to add that data to every request, wrapping your baseQuery in a custom function.

All that does not explain to me why you want to access a mutation result though. You should probably save that data to the side into a custom Redux slice, just like we show it in the "authentication" examples.

[MightyMoud]

Gotcha. Thanks for the help.
Cheers!