skipToken passed to serializeQueryArgs

[SebastienGllmt]

It looks like when you specify and endpoint-specific serializeQueryArgs, it's possible for queryArgs to equal skipToken

This is unexpected since it's not reflected in the typescript type. Either the typescript type should be updated, or skipToken should be filtered out

[markerikson]

Can you give an example of this happening?

[szszoke]

I am also affected by this. In my case this is triggered by just calling the auto-generated lazy query hook in a component.

const MyComponent = () => {
  useLazyGetQuery();
  
  return null;
}

[ninesunsabiu]

I am also affected by this

[markerikson]

Out in https://github.com/reduxjs/redux-toolkit/releases/tag/v2.4.0 !

[jshih7]

Hi there. I just upgraded @reduxjs-toolkit to 2.4.0 but am still seeing that serializeQueryArgs gets called with skipToken being passed as the queryArgs. I would expect serializeQueryArgs to be skipped altogether. Here's some example code:

Calling query in React component:

import { skipToken } from '@reduxjs/toolkit/query/react';

// inside component
const [userId, setUserId] = useState('');
const { data, error, isFetching, isLoading } = useGetUserQuery(userId || skipToken );

API slice:

const apiSlice = createApi({ 
  ...
  endpoints: (build) => ({
    getUser: build.query<...>({
      queryFn: (userId) => { ... }
      serializeQueryArgs: ({ queryArgs: userId }) => {
        console.log({userId}); // this returns { userId: Symbol(RTKQ/skipToken) }
        return userId;
      };
    }),
 })
});

I realize that in this example, serializeQueryArgs is not necessary because it would be caching on userId by default anyway, but I just wanted to demonstrate that it's still getting called when I want to skip the query.

[markerikson]

@jshih7 hmm. out of curiosity, if you change that to a console.trace(), what's the stack trace that's calling serializeQueryArgs?

[jshih7]

@jshih7 hmm. out of curiosity, if you change that to a console.trace(), what's the stack trace that's calling serializeQueryArgs?

Sorry, I'm debugging this within an application for work so it'll be difficult for me to share exact details. However, the stack trace looks something like this:

serializeQueryArgs @ apiSlice.ts
ChildComponent @ ChildComponent.tsx (this is the useGetUserQuery call)
...
dispatch @ page.bundle.js
(anonymous) @ ParentComponent.tsx (this is a dispatch)

In the ParentComponent, I'm calling a dispatch to the Redux store to modify state, which re-renders the ChildComponent and triggers the query fetch in the child, which then calls serializeQueryArgs.

[markerikson]

Ah. I bet it's because we also call it at the hook level, in a useStableQueryArgs hook, and we didn't adjust that to check for skipToken:

redux-toolkit/packages/toolkit/src/query/react/useSerializedStableValue.ts

Line 16 in e848a55

? serialize({ queryArgs, endpointDefinition, endpointName })

that needs to be addressed as well.

[jshih7]

Thanks - if you're able to address and create a new build (could be a beta build), I can install and confirm that it's working on my end.

[jshih7]

Ah. I bet it's because we also call it at the hook level, in a useStableQueryArgs hook, and we didn't adjust that to check for skipToken:

redux-toolkit/packages/toolkit/src/query/react/useSerializedStableValue.ts

Line 16 in e848a55

? serialize({ queryArgs, endpointDefinition, endpointName })
that needs to be addressed as well.

I took a look at the code you sent, it looks like useStableQueryArgs is called here with the possibility of args being a skipToken. Since useStableQueryArgs checks if typeof queryArgs == 'object' before calling serialize in the code snippet you sent me, I don't think that's where the issue lies.

I went back to the console.trace you asked me to add and realized that some information was hidden the first time around that I overlooked - sorry about that!

Here is the more complete stack trace, with code snippets at the line number:

serializeQueryArgs @ apiSlice.ts (console.trace)

finalSerializeQueryArgs @ createApi.ts:244 (`const initialResult = endpointSQA(queryArgsApi);`)

serializeQueryArgs @ createApi.ts:260 (`return finalSerializeQueryArgs(queryArgsApi);`)

queryStatePreSelector @ buildHooks.ts:627 (`if (serializeQueryArgs(...) === serializeQueryArgs(...)`)

recomputationWrapper @ createSelectorCreator.ts:392 (`return (resultFunc as Combiner<inputSelectors, Result>).apply(...)`)

memoized @ weakMapMomoize.ts:228 (`result = func.apply(...)`)

dependenciesChecker @ createSelectorCreator.ts:412 (`lastResult = memoizedResultFunc.apply(...)`)

memoized @ weakMapMemoize.ts:228 (`result = func.apply(...)`)

(anonymous) @ buildHooks.ts:864 (`const currentState = useSelector(...)`)

useSelectorWithStoreAndSubscription @  useSelector.js:29 (`var newSelectedState = selector(storeState)`)

useSelector @  useSelector.js:129 

useQueryState @  buildHooks.ts:864

useQuery @  buildHooks.ts:894

Based on this, I think the issue is that we shouldn't need to perform the serializeQueryArgs equality check here.