How to cache data when using useList hook?

Currently calling the hook like this:

const { data: componentsData, isLoading } = useList({
  resource: 'components',
  meta: { variables: { customerCode, environmentCode } },
  queryKey: ["components", customerCode, environmentCode], // Unique key for caching
  cacheTime: 5 * 60 * 1000, // Cache for 5 minutes
  staleTime: 1 * 60 * 1000, // Keep data fresh for 1 minute
});

const { data: componentsData, isLoading } = useList({
  resource: 'components',
  meta: { variables: { customerCode, environmentCode } },
  queryKey: ["components", customerCode, environmentCode], // Unique key for caching
  cacheTime: 5 * 60 * 1000, // Cache for 5 minutes
  staleTime: 1 * 60 * 1000, // Keep data fresh for 1 minute
});

2 Replies

kapa.ai•3d ago

Hi @Czar1212. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your current implementation of the useList hook is already set up to utilize caching effectively. Let's break down how caching works with useList and how your configuration affects it: 1. Default Caching Behavior: By default, refine uses React Query under the hood for data fetching and caching. The useList hook automatically caches the fetched data as mentioned in the documentation (https://refine.dev/docs/guides-concepts/general-concepts/#state-management). 2. Cache Time: You've set cacheTime: 5 * 60 * 1000, which means the data will be kept in the cache for 5 minutes. This is actually the default behavior of refine, as stated in the documentation (https://refine.dev/docs/guides-concepts/general-concepts/#state-management). 3. Stale Time: You've set staleTime: 1 * 60 * 1000, which means the data will be considered fresh for 1 minute. After this time, if the query is re-run, it will trigger a background refetch while still showing the cached data. 4. Query Key: You're using a unique query key ["components", customerCode, environmentCode], which is good practice. This ensures that different combinations of customerCode and environmentCode are cached separately. Your current setup is well-configured for caching. However, if you want to optimize further, consider the following: - You can adjust the staleTime based on how frequently your data changes. If the data doesn't change often, you might increase this value to reduce unnecessary background refetches. - The cacheTime determines how long the data stays in the cache after it becomes inactive (not used by any component). You can adjust this based on your application's needs. - If you want to manually invalidate the cache (e.g., after a mutation), you can use the queryClient.invalidateQueries() method provided by React Query as mentioned in the refine documentation (https://refine.dev/docs/guides-concepts/forms/#invalidation-). Remember, refine's data hooks, including useList, are built on top of React Query, so they inherit its powerful caching capabilities as explained in the refine architecture (https://refine.dev/blog/refine-pixels-1/#refine-architecture). This means you get efficient data synchronization, background updates, and automatic deduplication of queries out of the box. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@291573985563639808> Kapa.ai is still learning and improving, please let me know how I did by reacting below.