correct-apricot

Inactive queries cause refetching

Hi! I have a thing that I don't clearly understand. I have a couple of queries with different keys. During actions in application some of them become inactive, but when I come back to component with them (they're still inactive, not stale) - react-query still makes requests. Why is it heppening?

10 Replies

correct-apricotOP•9mo ago

I little bit of details. I show list of elements with some of filters. I putted list of filters as a key, so if user uses filters he already used - I prevent double request to server. But react-query sends requests anyway

exotic-emerald•9mo ago

could be that the devtools get out of sync ? Have you tried closing & opening them?

correct-apricotOP•9mo ago

Tried this now. No, query is really inactive, but doesn't prevent requests

exotic-emerald•9mo ago

but when I come back to component with them

I don't fully understand how a query can be inactive when you go to a page that has a component that uses that query?

correct-apricotOP•9mo ago

  const [currentPage, setCurrentPage] = useState(1);
  const [selectedTab, setSelectedTab] = useState(0);
  const [status, setStatus] = useState<HistoryStatuses>(HistoryStatuses.Online);
  const [category, setCategory] = useState<HistoryCategories>(HistoryCategories.All);
  const [orderBy, setOrderBy] = useState<HistoryOrderTypes>(HistoryOrderTypes.Time);
  const [direction, setDirection] = useState<HistoryDirections>(HistoryDirections.Desc);

  const {
    data: history,
    refetch: fetchHistory,
    isLoading: isHistoryLoading,
  } = useQuery({
    queryFn: () =>
      PvpApi.GetPvpHistory({
        category,
        orderBy,
        status,
        direction,
        page: currentPage,
        perPage: HISTORY_ITEMS_PER_PAGE,
      }),
    queryKey: [PvpApi.GET_PVP_HISTORY, category, orderBy, status, direction, currentPage],
    enabled: false,
  });

  const [currentPage, setCurrentPage] = useState(1);
  const [selectedTab, setSelectedTab] = useState(0);
  const [status, setStatus] = useState<HistoryStatuses>(HistoryStatuses.Online);
  const [category, setCategory] = useState<HistoryCategories>(HistoryCategories.All);
  const [orderBy, setOrderBy] = useState<HistoryOrderTypes>(HistoryOrderTypes.Time);
  const [direction, setDirection] = useState<HistoryDirections>(HistoryDirections.Desc);

  const {
    data: history,
    refetch: fetchHistory,
    isLoading: isHistoryLoading,
  } = useQuery({
    queryFn: () =>
      PvpApi.GetPvpHistory({
        category,
        orderBy,
        status,
        direction,
        page: currentPage,
        perPage: HISTORY_ITEMS_PER_PAGE,
      }),
    queryKey: [PvpApi.GET_PVP_HISTORY, category, orderBy, status, direction, currentPage],
    enabled: false,
  });

Everytime any filter changes - query with previous filters combinations becomes inactive

exotic-emerald•9mo ago

yeah then I'd say inactive queries shouldn't fetch and what you see is likely an active query fetching that has a "similar" key.

correct-apricotOP•9mo ago

Could you please explain it? I'm not sure I clearly understood you 😁

exotic-emerald•9mo ago

maybe page is sometimes a number 1 and sometimes as string "1" or something similar. I can't really comment more without seeing a minimal reproduction. From what you're saying, it shouldn't happen

correct-apricotOP•9mo ago

No, page always is a number What could I show you for better understanding?

exotic-emerald•9mo ago

A minimal stackblitz reproduction that shows your issue

Gaming

Programming

Inactive queries cause refetching

Did you find this page helpful?