pwuexec•12mo ago

Tanstack query with usePaginatedQuery is not working

I'm having trouble using TanStack Query's usePaginatedQuery. It doesn’t seem to behave as expected, and TypeScript is throwing errors. Here’s the code and the error I’m encountering: Working Example This works fine:

usePaginatedQuery(
  api.tutors.list, // Query function
  {},              // Query arguments
  { initialNumItems: 6 } // Options
);

usePaginatedQuery(
  api.tutors.list, // Query function
  {},              // Query arguments
  { initialNumItems: 6 } // Options
);

Problematic Code However, in this usage:

await opts.context.queryClient.ensureQueryData(
  convexQuery(
    usePaginatedQuery(api.tutors.list, {}, { initialNumItems: 6 })
  )
);

await opts.context.queryClient.ensureQueryData(
  convexQuery(
    usePaginatedQuery(api.tutors.list, {}, { initialNumItems: 6 })
  )
);

I get the following TypeScript error:

Expected 2 arguments, but got 1.ts(2554)
index.d.ts(101, 182): An argument for 'queryArgs' was not provided.

Expected 2 arguments, but got 1.ts(2554)
index.d.ts(101, 182): An argument for 'queryArgs' was not provided.

Observations - usePaginatedQuery seems to expect two required arguments: - A query function. - Query arguments (e.g., an object representing the filters, pagination params, etc.). - In the problematic code, it seems like TypeScript isn’t recognizing the query arguments or options properly, even though they’re provided. Questions 1. Am I misunderstanding the correct way to use usePaginatedQuery within convexQuery or ensureQueryData? 2. Is this related to how ensureQueryData works or some conflict with convexQuery? 3. Could this be a TypeScript inference issue, and if so, how can I resolve it? 4. Is usePaginatedQuery still supported in the latest version of TanStack Query? Any help or clarification would be greatly appreciated! If there’s a better pattern for combining usePaginatedQuery with ensureQueryData, I’d love to know!

4 Replies

Convex Bot•12mo ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

ballingt•12mo ago

Cool, the convex usePaginatedQuery hook works like you're using it. But then you're trying to use it as a query options factory in your Problematic Code section. It's not a query options factory like convexQuery, it's a React hook. 1. yes 2. convexQuery is a query options factory, it can be used wiht TanStack Query methods. usePaginatedQuery is not, it's a Convex React hook. 3. TypeScript is correct here saying this is not how it's used 4. usePaginatedQuery imported from convex/react works in any React app. It has nothing to do with TanStack Query.

ballingt•12mo ago

If there’s a better pattern for combining usePaginatedQuery with ensureQueryData, I’d love to know!

There's no pattern for combining these currently, but there's an issue open on the repo for suggestions https://github.com/get-convex/convex-react-query/issues/1

GitHub

react-query useInfiniteQuery and paginated queries · Issue #1 · get...

Is it possible to use convexQuery with tanstack useInfiniteQuery and a paginated convex query? I have infinite scroll working with the following react-query / convex integration, but it does not su...

pwuexecOP•12mo ago

Thanks @ballingt

Tanstack query with usePaginatedQuery is not working

Did you find this page helpful?