sensitive-blue

How to type pageParam in useInfiniteQuery hook?

I was wondering what's the suggested way to type pageParam in useInfiniteQuery hook? I'm doing it currently this way, but maybe there's a better way:

useInfiniteQuery<FetchStuffResponse>(
  ['stuff', params],
  ({ pageParam = 0, signal }) =>
    fetchStuff(
      {
        ...params,
        offset: pageParam as number,
      },
      signal
    ),
  { getNextPageParam: ... }
)

useInfiniteQuery<FetchStuffResponse>(
  ['stuff', params],
  ({ pageParam = 0, signal }) =>
    fetchStuff(
      {
        ...params,
        offset: pageParam as number,
      },
      signal
    ),
  { getNextPageParam: ... }
)

3 Replies

quickest-silver•4y ago

you can use the type QueryFunctionContext. First generic is the queryKey, second one is pageParam

({ pageParam = 0, signal }: QueryFunctionContext<QueryKey, number>) =>

({ pageParam = 0, signal }: QueryFunctionContext<QueryKey, number>) =>

quickest-silver•4y ago

https://github.com/TanStack/query/blob/07c96311a50a2aa45f516fa2c153ce68ca8f1a9b/packages/query-core/src/types.ts#L18-L26

GitHub

query/types.ts at 07c96311a50a2aa45f516fa2c153ce68ca8f1a9b · TanSta...

🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. - query/types.ts at 07c96311a50a2aa45f516fa2c153ce68ca8f1a9b · TanStack/q...

sensitive-blueOP•4y ago

Thank you so much!

Gaming

Programming

How to type pageParam in useInfiniteQuery hook?

Did you find this page helpful?