W
Wasp•3d ago
Noah

What are best practices for tweaking caching for react-query through wasp?

Looking for a query usage example that includes caching
1 Reply
kapa.ai
kapa.ai•3d ago
Hi @Noah. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To tweak caching for react-query through Wasp, there are a few best practices and options available: 1. Global configuration: You can configure global defaults for react-query in the client setup function using configureQueryClient. This allows you to set default options for all queries: 
   import { configureQueryClient } from 'wasp/client/operations'  
   
   export default async function mySetupFunction() {  
     configureQueryClient({  
       defaultOptions: {  
         queries: {  
           staleTime: Infinity,  
         },  
       },  
     })  
   }  
   
   import { configureQueryClient } from 'wasp/client/operations'  
   
   export default async function mySetupFunction() {  
     configureQueryClient({  
       defaultOptions: {  
         queries: {  
           staleTime: Infinity,  
         },  
       },  
     })  
   }
Client Config provides more details on this approach. 2. Per-query configuration: You can override the default behavior for individual queries using the options object in the useQuery hook: 
   const { data: tasks, isLoading, error } = useQuery(getTasks, null, {
     staleTime: 5000, // Custom stale time for this query
     refetchOnWindowFocus: false // Disable refetching on window focus
   })
   
   const { data: tasks, isLoading, error } = useQuery(getTasks, null, {
     staleTime: 5000, // Custom stale time for this query
     refetchOnWindowFocus: false // Disable refetching on window focus
   })
The useQuery Hook documentation provides more information on this. 3. Automatic cache invalidation: Wasp offers automatic Entity-based Query cache invalidation. When an Action that uses the same Entity as a Query is executed, Wasp will automatically invalidate the Query's cache. This keeps your data fresh without manual intervention. Cache Invalidation explains this feature in more detail. Here's an example of using a query with caching considerations: 
import { getTasks, useQuery } from 'wasp/client/operations'
export const MainPage = () => {  
  const { data: tasks, isLoading, error } = useQuery(getTasks, null, {
    staleTime: 60000, // Data stays fresh for 1 minute
    cacheTime: 3600000, // Cache is kept for 1 hour
    refetchOnMount: false // Don't refetch on component mount
  })  

  return (  
    <div>  
      {tasks && <TasksList tasks={tasks} />}  
      {isLoading && 'Loading...'}  
      {error && 'Error: ' + error}  
    </div>  
  )  
}  
import { getTasks, useQuery } from 'wasp/client/operations'
export const MainPage = () => {  
  const { data: tasks, isLoading, error } = useQuery(getTasks, null, {
    staleTime: 60000, // Data stays fresh for 1 minute
    cacheTime: 3600000, // Cache is kept for 1 hour
    refetchOnMount: false // Don't refetch on component mount
  })  

  return (  
    <div>  
      {tasks && <TasksList tasks={tasks} />}  
      {isLoading && 'Loading...'}  
      {error && 'Error: ' + error}  
    </div>  
  )  
}
This example demonstrates how to use the useQuery hook with custom caching options. The staleTime and cacheTime options control how long the data remains fresh and how long it's kept in the cache, respectively. The refetchOnMount option prevents the query from refetching when the component mounts. Remember, while these options give you fine-grained control over caching, Wasp's automatic cache invalidation often handles most use cases without requiring manual configuration. Martin Sosic: Implement RTK-style cache invalidation via operations #547 diff --git a/Human: What are best practices for tweaking caching for react-query through wasp? Looking for a query usage example that includes caching ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Noah, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Did you find this page helpful?