Clear cache of useInfiniteQuery

[gabisanfilippo]

I have this request:

const getCandidatesEvasion = async (
  params: IRequiredParams,
  pageParam: number
) => {
  const endPoint = transformParamsIntoUrl(params);
  if (pageParam !== undefined) {
    let limit = params.limit ? params.limit : 60;
    const data = await API.get(
      `/candidates/getEvasion?${endPoint}&offSet=${
        pageParam * limit
      }&limit=${limit}`
    );
    return data;
  }
  return null;
};

export const useGetCandidatesEvasion = (params: IRequiredParams) => {
  const queryClient = useQueryClient();

  useEffect(() => {
    queryClient.refetchQueries("getCandidatesEvasion");
  }, [params]);

  const {
    data: candidatesEvasion,
    refetch,
    isLoading,
    isError,
    isSuccess,
    fetchNextPage,
    isRefetching,
  } = useInfiniteQuery(
    ["getCandidatesEvasion", params],
    async ({ pageParam = 0 }) => await getCandidatesEvasion(params, pageParam),
    {
      getNextPageParam: (lastPage, pages) => {
        if (lastPage?.data?.length < 60) return undefined;
        return pages?.length;
      },
    }
  );

  return {
    candidatesEvasion: candidatesEvasion as unknown as IGetCandidatesEvasion,
    refetch,
    isLoading,
    isError,
    isSuccess,
    fetchNextPage,
    isRefetching,
  };
};

It brings me all the students who are in the process of school dropout.
On my page, there's a Tab component with the values 'MT', 'TE', and 'RT'. Every time the tab the user is on changes, the request will change, because according to these values the students to be rendered change. Here is my page:

import { useEffect, useState } from "react";
import { Template } from "../../../../components/Template";
import { Tabs } from "../../components/Evasion/Tabs";
import { Filters } from "../../components/Evasion/Filters";
import * as S from "./styles";
import { Table } from "../../../../global/UI/tables/Table";
import { columnsTable } from "./data";
import { CardProcess } from "../../components/Evasion/CardProcess";
import {
  useGetAmountCandidatesEvasion,
  useGetCandidatesEvasion,
} from "../../../../services/http/Matricula/Evasion/GET/useGetCandidatesEvasion";
import InfiniteScroll from "../../../../shared/InfiniteScroll";
import moment from "moment";
import { sortObjectArray } from "../../../../utils/sortObjectArray";
import { ModalAllStudents } from "../../components/Evasion/ModalAllStudents";
import { useHistory } from "react-router-dom";
import { useAuthenticateUser } from "../../../../contexts/useAuthenticateUser";
import { useQueryClient } from "react-query";

const getStudentType = {
  "Casos Críticos": "MT",
  Transferidos: "TE",
  Revertidos: "RT",
};

export const Evasion = () => {
  const getType = (nameTab: string) => {
    if (nameTab === "Casos Críticos") return "MT";
    if (nameTab === "Transferidos") return "TE";
    if (nameTab === "Revertidos") return "RT";
    return "";
  };

  const [tabsTypes, setTabsTypes] = useState([
    {
      name: "Casos Críticos",
      number: 0,
      bg: "#DAE6FF",
      color: "#364663",
    },
    {
      name: "Transferidos",
      number: 0,
      bg: "#FFDADA",
      color: "#364663",
    },
    {
      name: "Revertidos",
      number: 0,
      bg: "#DAFFF2",
      color: "#49B08C",
    },
  ]);
  const [currentTab, setCurrentTab] = useState<{
    name: string;
    number?: number;
    bg?: string;
    color?: string;
  }>(tabsTypes[0]);

  const { userLogged } = useAuthenticateUser();

  const [filters, setFilters] = useState({
    search: "",
    unity: userLogged!.unity !== "CAE" ? userLogged!.unity : "",
    classes: "",
    years: "",
    type: getStudentType[currentTab.name as keyof typeof getStudentType],
    typeRequest: "",
    process: "",
  });

  const queryClient = useQueryClient();

  const [columnsValues, setColumnsValues] = useState(columnsTable);
  const [currentKey, setCurrentKey] = useState(columnsTable[0].keyName);

  const [modalIsOpen, setModalIsOpen] = useState(false);

  const { fetchNextPage, candidatesEvasion, isLoading, isError, isRefetching } =
    useGetCandidatesEvasion(filters);

  const { dataAmount: dataLengthMT } = useGetAmountCandidatesEvasion({
    type: "MT",
    length: true,
    unity: userLogged!.unity !== "CAE" ? userLogged!.unity : "",
  });
  const { dataAmount: dataLengthTE } = useGetAmountCandidatesEvasion({
    type: "TE",
    length: true,
    unity: userLogged!.unity !== "CAE" ? userLogged!.unity : "",
  });
  const { dataAmount: dataLengthRT } = useGetAmountCandidatesEvasion({
    type: "RT",
    length: true,
    unity: userLogged!.unity !== "CAE" ? userLogged!.unity : "",
  });

  const navigate = useHistory();

  useEffect(() => {
    let newArray = tabsTypes.map((element) => {
      if (getType(element.name) === "MT") {
        return {
          ...element,
          number: dataLengthMT ? dataLengthMT : 0,
        };
      }
      if (getType(element.name) === "TE") {
        return {
          ...element,
          number: dataLengthTE ? dataLengthTE : dataLengthTE,
        };
      }
      if (getType(element.name) === "RT") {
        return {
          ...element,
          number: dataLengthRT ? dataLengthRT : 0,
        };
      }
      return element;
    });
    setTabsTypes(newArray);
  }, [dataLengthMT, dataLengthTE, dataLengthRT]);

  useEffect(() => {
    setFilters({ ...filters, type: getType(currentTab.name) });
  }, [currentTab]);

  useEffect(() => {
    // queryClient.removeQueries("getCandidatesEvasion");
    queryClient.invalidateQueries({
      queryKey: "getCandidatesEvasion",
      exact: true,
    });
  }, [currentTab, currentKey, filters]);

  function checkTimeDifference(isoDateString?: string) {
    if (!isoDateString) return undefined;
    const providedDate = moment(isoDateString);
    const currentDate = moment();
    const diffHours = currentDate.diff(providedDate, "hours");
    if (diffHours >= 24 && diffHours < 48) {
      return 24;
    } else if (diffHours >= 48) {
      return 48;
    }
    return undefined;
  }

  return (
    <Template title="Evasão Zero">
      <S.Container>
        <Tabs
          tabs={tabsTypes}
          currentTab={currentTab}
          setCurrentTab={setCurrentTab}
          setModalIsOpen={setModalIsOpen}
        />
        <Filters filters={filters} onChangeTab={(value) => setFilters(value)} />
        <Table
          columnsStyle="2fr 0.7fr 0.7fr 1fr 2fr 0.5fr"
          columnsValues={columnsValues}
          setColumns={setColumnsValues}
          setCurrentKey={setCurrentKey}
          className="table"
        >
          <article>
            {isLoading && <>carregando...</>}
            {isError && <>Não há alunos.</>}
            {candidatesEvasion &&
              candidatesEvasion?.pages
                ?.flatMap((item) => item.data)
                .sort((prev: any, next: any) => {
                  return sortObjectArray(prev, next, columnsTable, currentKey);
                })
                .map((element, index) => {
                  return (
                    <CardProcess
                      onClick={() => {
                        navigate.push(`/evasion/record/${element.studentId}`);
                      }}
                      key={element.id + index + "CardProcess"}
                      id={element.id}
                      name={element.name || "-"}
                      photo={element.photo}
                      unity={element.unity || "-"}
                      classes={element.year || "-"}
                      date={moment(element.abandonmentDateRequest).format(
                        "DD/MM/YYYY"
                      )}
                      coordinatorContactStatus={element.abCoordinator}
                      directorContact={element.abDirector}
                      evasionRequestStatus={element.abandonmentDateRequest}
                      paymentStatus={element.abFinantial}
                      isEvasion={element.abRequest === "Evasao"}
                      lastInteraction={checkTimeDifference(
                        element.lastInteraction
                      )}
                    />
                  );
                })}
          </article>
          <InfiniteScroll loadMore={fetchNextPage} />
        </Table>
      </S.Container>
      {modalIsOpen && <ModalAllStudents setModalIsOpen={setModalIsOpen} />}
    </Template>
  );
};

As you can see, filters are the filters that I send in the request; changing currentTab updates the type key of filters to its respective value already mentioned.
I used a useEffect that was watching currentTab and would remove the query in question. In desperation, I created another one looking at several keys (currentTab, currentKey, filters), but that didn't work either.
I tried to put the useEffect inside the hook, as I already mentioned:

useEffect(() => {
    queryClient.refetchQueries("getCandidatesEvasion");
  }, [params]);

I also tested these things:

But nothing worked out.
In general, my problem is as follows:
If I just enter the page, don't scroll and keep changing tabs, the query is successfully removed. But if I trigger the InfiniteScroll component, some students appear in the wrong tab. Not all appear, it's like 8 to 15 students listed in the wrong tab. I already tested the request and it is bringing the students correctly, the problem is really with React-query.
In this application, we have used infinite requests many times in the same way. Only in this case is it causing problems.
I'll leave here the code for InfiniteScroll (in case the problem is with it):

import React, { FC, useEffect, useRef } from "react";
import styled from "styled-components";

interface Props {
  loadMore: any;
}
const InfiniteScroll: FC<Props> = ({ loadMore }: Props) => {
  const containerRef = useRef(null);

  useEffect(() => {
    const options = {
      root: null,
      rootMargin: "20px",
      threshold: 0.1,
    };

    const observer = new IntersectionObserver((entities) => {
      const target = entities[0];

      if (target.isIntersecting) {
        loadMore(false);
      }
    }, options);

    if (containerRef.current) {
      observer.observe(containerRef.current);
    }
  }, []); //eslint-disable-line

  return <EmptyDiv ref={containerRef}></EmptyDiv>;
};

export default InfiniteScroll;

const EmptyDiv = styled.div`
  opacity: 0;
`;

How can I solve this?