T
TanStack•3y ago
broad-brown

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}
                />
              );
            })}
  {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>
    );
  };
  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.
No description
4 Replies
ambitious-aqua
ambitious-aqua•3y ago
have you customized staleTime?
broad-brown
broad-brownOP•3y ago
@TkDodo 🔮 i was expecting it by defults cache it but I did the follwing 
{
        enabled: Boolean(anchorEl),
        staleTime: 6000,
      }
{
        enabled: Boolean(anchorEl),
        staleTime: 6000,
      }
looks like it cache for 6 seconds but what am i supposed to do here ? react query should catch the data until there is new data on the server. It has to be like that.
ambitious-aqua
ambitious-aqua•3y ago
react query does cache the data, you will see that data is instantly and synchronously delivered to you when you call useQuery for a key that has already requested data upfront. You should also see this in the devtools. Please familiarise yourself with the concept of stale-while-revalidate (swr) that react-query is built upon. React Query uses smart triggers to do background refetches to synchronize your UI with the backend, and the default settings are to treat everything as instantly stale. I have a lot of content about this in my blog, specifically: - https://tkdodo.eu/blog/practical-react-query#the-defaults-explained - https://tkdodo.eu/blog/react-query-as-a-state-manager - https://tkdodo.eu/blog/thinking-in-react-query
React Query as a State Manager
Everything you need to know to make React Query your single source of truth state manager for your async state
Thinking in React Query
In this talk, we will learn how a different mindset can help us understand React Query and work with it efficiently.
Practical React Query
Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful...
broad-brown
broad-brownOP•3y ago
@TkDodo 🔮 thanks will go through.

Did you find this page helpful?