Cancel the queries when navigating to another page

[lokeshwarobuli]

Hi I have the following setup and trying to cancel the query when navigating away from the page, But I am not able to do so. Kindly help please

Query

const getCostVsOutputChartDataQuery = useQuery(
    ['getCostVsOutputChartData', startDate, endDate, portfolio, team],
    () =>
      portfolio &&
      startDate &&
      endDate &&
      getCostVsOutputChartData(portfolio.id, startDate, endDate, team && team.id != 'aggregate' ? team.id : undefined),
    {
      enabled:
        !!(portfolio && startDate && endDate && team) && !getSpendingQueryIsLoading && (spendingData || []).length > 0,
      onSuccess: (data: CostVsBudgetChartResponse) => {
        setCurrentSummary(data.current);
        setAverageSummary(data.average);
        setChartData(data.chart_data);
      },
      onError: (error: any) => {
        const errorState = { errorMessage: error?.statusText, errorStatus: error?.status };
        navigate(`/application/fail-whale`, { state: errorState });
      },
    }
  );

getCostVsOutputChartData method

async function getCostVsOutputChartData(
  portfolioId: string,
  startDate: Date,
  endDate: Date,
  projectId?: string
): Promise<CostVsBudgetChartResponse> {
  const start_date = formatDate(startDate);
  const end_date = formatDate(endDate);
  let apiURL =
    baseURL +
    `/api/financials/spending/cost-vs-output/?portfolio_id=${portfolioId}&start_date=${start_date}&end_date=${end_date}`;
  if (projectId !== undefined) {
    apiURL += `&project_id=${projectId}`;
  }
  return await axiosInstance
    .get<CostVsBudgetChartResponse>(apiURL)
    .then((response) => response.data)
    .catch((error) => Promise.reject({ error: error.response }));
}

What are the changes that I should make to above to achieve the functionality, I tried going through docs(https://tanstack.com/query/v3/docs/react/guides/query-cancellation#manual-cancellation) and implementing but I am unsuccessful

Thanks in advance

[lokeshwarobuli]

I tried to implement this one https://codesandbox.io/s/falling-snowflake-hl9cj?file=/src/query.js too, but I was unsuccessful again

[lokeshwarobuli]

Any answer to this @TkDodo ??

[lokeshwarobuli]

@TkDodo any hints here please ??