React Query v5: Trigger API only when form submitted and on pagination change without extra state or effect

[sathvikc]

I'm working on a use case using React Query (v5)

Here's what I'm trying to achieve: The API query should execute only after a form is submitted and when table pagination value is changed

The query should not trigger while the user is typing into the form.
After submitting the form, the results are displayed in a table with pagination, When pagination is clicked, the currentPage value in the form state updates, and the API is re-fetched for the new page.

I'm looking for a clean solution that avoids introducing extra state variables like isSubmitted or adding a useEffect. The goal is to rely on React Query's built-in mechanisms like enabled, queryKey, or other features to manage the query execution flow.

How can I achieve this? Is it possible to do it?

Just a sample code on what i am trying to acheive, not properly implemented though https://stackblitz.com/edit/tanstack-query-tcgcmavz?file=src%2Fpages%2Findex.tsx
If this code is not good enough, will update it.