React query calls the api twice on click

Question

I am facing a problem when clicking onClick to conditionally call API. I want when the user selects all the fields and then clicks the submit button, the API will be called only once, but I don't understand why this code calls the API twice: 1 time params: {} 1 time params with data.

const [filter, setFilter] = useState(null);
const [typeReport, setTypeReport] = useState("");
const { data: reportBusiness, isFetching } = useGetReportBusiness(
  {
    ...filter,
  },
  typeReport
);
const {
  page,
  pageSize,
  handleChangePage,
  handleChangePageSize,
  clientData,
  clientTotal,
} = usePagination(reportBusiness);

const handleSubmit = (values) => {
  const from = moment(values.dateRange[0]).toISOString();
  const to = moment(values.dateRange[1]).toISOString();
  setTypeReport(values.typeReport);

  setFilter({
    from,
    to,
  });
  handleChangePage(1);
};

function query

export const useGetReportBusiness = (params, typeReport) => {
  return useQuery({
    queryKey: [QUERY_KEYS.REPORT_BUSINESS, params, typeReport],
    queryFn: async () => {
      console.log("11");
      let res;
      if (typeReport === BUSINESS_CSKH_VALUE) {
        res = await ReportBusinessApi.getReportBusinessCSKH(params);
      } else {
        res = await ReportBusinessApi.getReportBusinessBCP(params);
      }

      return res.data?.data;
    },
  });
};

version

"react": "^18.2.0",
"@tanstack/react-query": "^5.0.0-alpha.71",

Answer 1

The first call is when the component loads, on the initial render filter is null, hence {...filter} will evaluate to {}

The second calls is when the user clicks the button, filter and typeReport are updated so the new state of filter is

{from:"..", to: ".."}

This will trigger a rerender because the state changed, which will do another api call (which is the second api call) but this time the arguments are populated

It seems like you don't want to make the first api call and only the second one, you can do this by using dependent queries

Dependent (or serial) queries depend on previous ones to finish before they can execute. To achieve this, it's as easy as using the enabled option to tell a query when it is ready to run:

Which basically makes the query runs based on a condition, that is the query will run only when enabled is true, in this case you can use the filter not null as a condition

export const useGetReportBusiness = (params, typeReport, enabed=true) => {
  return useQuery({
    enabled,
    queryKey: [QUERY_KEYS.REPORT_BUSINESS, params, typeReport],
    queryFn: async () => {
      console.log("11");
      let res;
      if (typeReport === BUSINESS_CSKH_VALUE) {
        res = await ReportBusinessApi.getReportBusinessCSKH(params);
      } else {
        res = await ReportBusinessApi.getReportBusinessBCP(params);
      }

      return res.data?.data;
    },
  });
};

and call it like this

  const { data: reportBusiness, isFetching } = useGetReportBusiness(
    enabled: filter !== null,
    {
      ...filter,
    },
    typeReport
  );

otherwise you can introduce a new state enabled with a default value of false and update it to true when the button is clicked