redux-toolkit icon indicating copy to clipboard operation
redux-toolkit copied to clipboard

`skipToken` is passed into my `infiniteQuery` as a `queryArg`

Open markerikson opened this issue 5 months ago • 3 comments

Discussed in https://github.com/reduxjs/redux-toolkit/discussions/5027

Originally posted by soggybeef July 4, 2025 Language: Typescript Version: "@reduxjs/toolkit": "^2.3.0",

I was trying to conditionally run an infinite query to prevent the first request from being made upon mounting of the component. The args will be taken from router which is from next/router

I have the args for queryArg as shouldSkip ? skipToken : args. But when shouldSkip === true and skipToken is passed in, the first request is still being made, and this is what i got from my console logs when forming the query in the services page where the endpoint is defined:

image

Since the logic of forming my queryParams doesn't and shouldn't take into account the skipToken, the request is still being sent in to fetch data that i don't want to fetch. This data is returned, but not returned or populated to my parent component. But I see it under the Responses in my Network Requests.

image

Would love any tips and corrections on how I can better handle the skipToken in my infiniteQuery, thank you!

EDIT: I see similar behavior when using skip: shouldSkip as part of the second argument in my useInfiniteQuery; the original args that I had became the queryArgs and the request is sent and returned, but not poulated.

markerikson avatar Jul 04 '25 17:07 markerikson

@soggybeef that sounds very odd. Could you provide a CodeSandbox or repo that shows this happening?

markerikson avatar Jul 04 '25 17:07 markerikson

I'll try to set up the CodeSandbox soon but, basically now i have this code block in my frontend component. I keep getting the error in the below screenshot in my console logs in the Developer Tools. The isLoading boolean is dependent on router.isReady, so that will cause the child component to render a loading wheel conditionally, which works fine in accordance to my boolean.

const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useGetPeoplefiniteQuery(isLoading ? skipToken : filters, {
    pollingInterval: API_REFETCH_DELAY,
  });
Image

soggybeef avatar Jul 08 '25 10:07 soggybeef

@soggybeef I can't immediately reproduce this myself, so if you could provide that sandbox it would help me look into this.

markerikson avatar Aug 03 '25 16:08 markerikson