TanStackT
TanStack•3y ago•
5 replies
endless-jade

React query calling api each time and not caching

Hi ! I don't understand why react query not caching the data . I am trying to loop though array inside filter component.
to show select fields and to fetch those selectiing items data for different fields I am using react-query.

  {filterableColumn
            .filter((item) => item.fetchData)
            .map((item) => {
              return (
                <FilterColumnComponent
                  key={item.key}
                  title={item.title}
                  queryKey={item.key}
                  fetchData={item.fetchData}
                />
              );
            })}


  const FilterColumnComponent = (column: FilterColumnProps) => {
    const { queryKey, title, fetchData } = column;

    const { data } = useQuery(
      `${queryKey}filter_dropdown`,
      () =>
        fetch("https://restcountries.com/v3.1/all").then(
          (res: any) => res.data
        ),
      {
        enabled: Boolean(anchorEl),
      }
    );

    return (
      <Box gridColumn={{ xs: "span 12", sm: "span 6" }}>
        <FormControl>
          <InputLabel
            id="demo-multiple-name-label"
            sx={{ fontSize: "0.75rem" }}
          >
            {title}
          </InputLabel>
        </FormControl>
      </Box>
    );
  };


each time i open the filter it refech the data.

thanks.
image.png
Was this page helpful?