React Query: Trigger API Calls Only on Manual Search or Pagination Changes

You have two distinct triggers for fetching data:

1. A manual search triggered by user action.
2. Automatic refetch when pagination (page or results per page) changes.

One common pattern is to disable automatic query execution (using enabled: false) so that the query isn’t fired on mount, and then manually call refetch when needed. However, simply disabling the query prevents it from automatically refetching when dependencies change. To combine both, you can:

• Use the disabled query mode (enabled: false) so it doesn't run on mount.
• Add a useEffect that monitors changes to selectedPage and resultsPerPage and calls refetch.
• Also call refetch when the user clicks on search.

Here's an example implementation:

TYPESCRIPTCopied
import { useState, useEffect } from 'react';
import { useQuery } from 'react-query';

const YourComponent = () => {
  const [selectedPage, setSelectedPage] = useState<number>(1);
  const [resultsPerPage, setResultsPerPage] = useState<number>(2);
  const [advancedFilter, setAdvancedFilter] = useState<any>({}); // your form state

  const { data, isFetching, refetch } = useQuery<any[], Error>({
    queryKey: ['advancedSearch', selectedPage, resultsPerPage, advancedFilter],
    queryFn: () => fetchAdvancedSearch(advancedFilter, selectedPage, resultsPerPage),
    enabled: false // don't run automatically on mount
  });

  // When pagination parameters change, trigger a refetch
  useEffect(() => {
    refetch();
  }, [selectedPage, resultsPerPage]); // Note: optionally include advancedFilter if needed

  // Called when the user explicitly clicks search
  const handleSearch = () => {
    refetch();
  };

  return (
    <div>
      {/* Your form with inputs bound to advancedFilter */}
      <button onClick={handleSearch}>Search</button>
      {/* Render your data */}
      {isFetching ? <p>Loading...</p> : <DisplayData data={data} />}
    </div>
  );
};

export default YourComponent;

Explanation

• Disabled Query Execution:
  By setting enabled: false, the query does not run on mount automatically.

• useEffect for Dependency Changes:
  The useEffect listens for changes in selectedPage or resultsPerPage. When either changes, refetch() is called, triggering the API call.

• handleSearch:
  This function also calls refetch(), allowing the user to trigger a search manually after changing other form fields.

This approach ensures that:

• The API is not called on mount.
• The API is called when pagination parameters change.
• The API is also called when the user explicitly searches.