React Query fetches data whenever parameters change even though enabled option is set to false

I am aware that if it was an ordinary react component or a custom hook it is supposed to return newly updated data if props change but since there is no specific details in the documentation I wanted to know if this is the main reason why data fetching ( refetchProducts) happens whenever query params change or I’m missing some configuration that could help prevent this issue.

What I’m trying to achieve is load all products initially since the 3 query params are all empty and then refetch only filtered products whenever filter button is clicked (NOT whenever the 3 Search Pararams are changed). RefetchProducts is invoked on button click. I thought enabled = false would do the job, but apparently I’m mistaken. Each time any of the 3 Search params ( classification, vendor, searchText ) is changed the request to fetch products is sent. This is not happening in any of my event handlers, which means the query does it itself. What am i missing and what is the best approach in such situations?

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>import { useQuery } from "react-query";
import http from "../http";
// have to filter data
const useGetFilteredProductsQuery = (
classification,
vendor,
searchText,
options = {}
) => {
return useQuery({
...options,
queryKey: ["customer/products", classification, vendor, searchText],
queryFn: () => {
const params = new URLSearchParams();
if (classification) params.append("classification", classification);
if (vendor) params.append("vendor", vendor);
if (searchText) params.append("searchText", searchText);
return http.get("/products?" + params.toString(), {
withCredentials: true, // This ensures cookies are sent with requests
xsrfCookieName: "token",
});
},
select: (data) => {
return data.data;
},
});
};
export default useGetFilteredProductsQuery;
// component in which the query is used
const { classification, vendor, searchText } = SearchParams; // Zustand store
const {
data: classifications = [],
error: classificationError,
isLoading: classificationLoading,
} = useGetClassificationQuery();
const {
data: products = [],
error: productsError,
isLoading: productsLoading,
refetch: refetchProducts,
} = useGetFilteredProductsQuery(classification, vendor, searchText, {
enabled: false,
});
const INITIAL_ENTRIES_PER_PAGE = 3;
const { page, setPage, displayEntries, pages } = usePagination(
products,
INITIAL_ENTRIES_PER_PAGE
);
// refetchProducts should work only on page load and button click
useEffect(() => {
refetchProducts();
}, []);
...
</code>
<code>import { useQuery } from "react-query"; import http from "../http"; // have to filter data const useGetFilteredProductsQuery = ( classification, vendor, searchText, options = {} ) => { return useQuery({ ...options, queryKey: ["customer/products", classification, vendor, searchText], queryFn: () => { const params = new URLSearchParams(); if (classification) params.append("classification", classification); if (vendor) params.append("vendor", vendor); if (searchText) params.append("searchText", searchText); return http.get("/products?" + params.toString(), { withCredentials: true, // This ensures cookies are sent with requests xsrfCookieName: "token", }); }, select: (data) => { return data.data; }, }); }; export default useGetFilteredProductsQuery; // component in which the query is used const { classification, vendor, searchText } = SearchParams; // Zustand store const { data: classifications = [], error: classificationError, isLoading: classificationLoading, } = useGetClassificationQuery(); const { data: products = [], error: productsError, isLoading: productsLoading, refetch: refetchProducts, } = useGetFilteredProductsQuery(classification, vendor, searchText, { enabled: false, }); const INITIAL_ENTRIES_PER_PAGE = 3; const { page, setPage, displayEntries, pages } = usePagination( products, INITIAL_ENTRIES_PER_PAGE ); // refetchProducts should work only on page load and button click useEffect(() => { refetchProducts(); }, []); ... </code>
import { useQuery } from "react-query";
import http from "../http";

//  have to filter data
const useGetFilteredProductsQuery = (
  classification,
  vendor,
  searchText,
  options = {}
) => {
  return useQuery({
    ...options,
    queryKey: ["customer/products", classification, vendor, searchText],
    queryFn: () => {
      const params = new URLSearchParams();
      if (classification) params.append("classification", classification);
      if (vendor) params.append("vendor", vendor);
      if (searchText) params.append("searchText", searchText);
      return http.get("/products?" + params.toString(), {
        withCredentials: true, // This ensures cookies are sent with requests
        xsrfCookieName: "token",
      });
    },
    select: (data) => {
      return data.data;
    },
  });
};

export default useGetFilteredProductsQuery;


// component in which the query is used
const { classification, vendor, searchText } = SearchParams; // Zustand store

  const {
    data: classifications = [],
    error: classificationError,
    isLoading: classificationLoading,
  } = useGetClassificationQuery();

  const {
    data: products = [],
    error: productsError,
    isLoading: productsLoading,
    refetch: refetchProducts,
  } = useGetFilteredProductsQuery(classification, vendor, searchText, {
    enabled: false,
  });
  const INITIAL_ENTRIES_PER_PAGE = 3;
  const { page, setPage, displayEntries, pages } = usePagination(
    products,
    INITIAL_ENTRIES_PER_PAGE
  );

// refetchProducts should work only on page load and button click
  useEffect(() => {
    refetchProducts();
  }, []);
...

I tried removing the params from the key array of the query, I tried checking out whether this happens after initial refetchProducts in the useEffect ( removed the useEffect because I know it invalidates the query so I thought something might be going on with the params that I pass)

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa Dịch vụ tổ chức sự kiện 5 sao Thông tin về chúng tôi Dịch vụ sinh nhật bé trai Dịch vụ sinh nhật bé gái Sự kiện trọn gói Các tiết mục giải trí Dịch vụ bổ trợ Tiệc cưới sang trọng Dịch vụ khai trương Tư vấn tổ chức sự kiện Hình ảnh sự kiện Cập nhật tin tức Liên hệ ngay Thuê chú hề chuyên nghiệp Tiệc tất niên cho công ty Trang trí tiệc cuối năm Tiệc tất niên độc đáo Sinh nhật bé Hải Đăng Sinh nhật đáng yêu bé Khánh Vân Sinh nhật sang trọng Bích Ngân Tiệc sinh nhật bé Thanh Trang Dịch vụ ông già Noel Xiếc thú vui nhộn Biểu diễn xiếc quay đĩa Dịch vụ tổ chức tiệc uy tín Khám phá dịch vụ của chúng tôi Tiệc sinh nhật cho bé trai Trang trí tiệc cho bé gái Gói sự kiện chuyên nghiệp Chương trình giải trí hấp dẫn Dịch vụ hỗ trợ sự kiện Trang trí tiệc cưới đẹp Khởi đầu thành công với khai trương Chuyên gia tư vấn sự kiện Xem ảnh các sự kiện đẹp Tin mới về sự kiện Kết nối với đội ngũ chuyên gia Chú hề vui nhộn cho tiệc sinh nhật Ý tưởng tiệc cuối năm Tất niên độc đáo Trang trí tiệc hiện đại Tổ chức sinh nhật cho Hải Đăng Sinh nhật độc quyền Khánh Vân Phong cách tiệc Bích Ngân Trang trí tiệc bé Thanh Trang Thuê dịch vụ ông già Noel chuyên nghiệp Xem xiếc khỉ đặc sắc Xiếc quay đĩa thú vị
Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa
Thiết kế website Thiết kế website Thiết kế website Cách kháng tài khoản quảng cáo Mua bán Fanpage Facebook Dịch vụ SEO Tổ chức sinh nhật