Wasp•2mo ago

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

Looking for a query usage example that includes caching

16 Replies

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?

yalcinos•2w ago

2 @kapa.ai how to use configureQueryClient ?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To use configureQueryClient in Wasp, you need to include it in your client setup function. Here's how you can use it: 1. First, import configureQueryClient from Wasp's client operations:

import { configureQueryClient } from 'wasp/client/operations'

import { configureQueryClient } from 'wasp/client/operations'

2. Then, use it within your client setup function:

export default async function mySetupFunction() {
  configureQueryClient({
    defaultOptions: {
      queries: {
        staleTime: Infinity,
        // Add other query options here
      },
    },
  })
}

export default async function mySetupFunction() {
  configureQueryClient({
    defaultOptions: {
      queries: {
        staleTime: Infinity,
        // Add other query options here
      },
    },
  })
}

Here's a complete example of how to use configureQueryClient:

import { configureQueryClient } from 'wasp/client/operations'

export default async function mySetupFunction() {
  // ... some setup
  configureQueryClient({
    defaultOptions: {
      queries: {
        staleTime: Infinity,
      },
    },
  })
  // ... some more setup
}

import { configureQueryClient } from 'wasp/client/operations'

export default async function mySetupFunction() {
  // ... some setup
  configureQueryClient({
    defaultOptions: {
      queries: {
        staleTime: Infinity,
      },
    },
  })
  // ... some more setup
}

This function should be exported from a file that you specify in your .wasp file as the setupFn. The configureQueryClient function allows you to set global defaults for all queries in your Wasp application. In the example above, we're setting the staleTime to Infinity, which means the data will never be considered stale. You can customize various other options as well, such as cacheTime, refetchOnWindowFocus, etc. These options will be applied to all queries in your application unless overridden for specific queries. Remember, you should use this function to set global defaults. For query-specific options, you should use the options parameter in the useQuery hook. For more details, you can refer to the Client Config documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @yalcinos, 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?

yalcinos•2w ago

@kapa.ai how to use mySetupFunction ?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To use mySetupFunction in Wasp, you need to follow these steps: 1. Define the function in a separate file (usually in your src directory). 2. Import and declare it in your main.wasp file. Here's how you can do it: 1. First, create a file for your setup function, for example, src/myClientSetupCode.js (or .ts for TypeScript):

import { configureQueryClient } from 'wasp/client/operations'

export default async function mySetupFunction() {
  // Your setup code here
  configureQueryClient({
    defaultOptions: {
      queries: {
        staleTime: Infinity,
      },
    },
  })
  // You can add more setup logic here
}

import { configureQueryClient } from 'wasp/client/operations'

export default async function mySetupFunction() {
  // Your setup code here
  configureQueryClient({
    defaultOptions: {
      queries: {
        staleTime: Infinity,
      },
    },
  })
  // You can add more setup logic here
}

2. Then, in your main.wasp file, import and declare the setup function:

app MyApp {
  title: "My app",
  // ...
  client: {
    setupFn: import mySetupFunction from "@src/myClientSetupCode.js"
  }
}

app MyApp {
  title: "My app",
  // ...
  client: {
    setupFn: import mySetupFunction from "@src/myClientSetupCode.js"
  }
}

The mySetupFunction will be executed on the client before everything else. You can use it to perform any custom setup, such as configuring the query client, setting up client-side periodic jobs, or initializing third-party libraries. For TypeScript users, the function signature should be:

export default async function mySetupFunction(): Promise<void> {
  // Your setup code here
}

export default async function mySetupFunction(): Promise<void> {
  // Your setup code here
}

Remember, this function is specifically for client-side setup. If you need to perform server-side setup, you would use a similar approach but declare it in the server field of your app declaration in main.wasp. For more details on client configuration, you can refer to the Client Config documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @yalcinos, 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?

NoahOP•2w ago

@yalcinos what are you trying to do?

MEE6•2w ago

Wohooo @Noah, you just became a Waspeteer level 4!

yalcinos•2w ago

@Noah My bad i was try to figure how to talk with kapa.ai to as k something in knowledge base. I was able to create setup finction to disable some configs in React-query like refetchOnWindowFocus and refetchOnReconnect. Because it is not important for my case

Vinny (@Wasp)•2w ago

Wasp is opinionated about how react-query works out of the box, so you'll have to configure the settings for it in a client setup function. Check out the docs here: https://wasp.sh/docs/project/client-config

app MyApp {
  title: "My app",
  // ...
  client: {
    rootComponent: import Root from "@src/Root.tsx",
    setupFn: import mySetupFunction from "@src/myClientSetupCode.ts"
  }
}

app MyApp {
  title: "My app",
  // ...
  client: {
    rootComponent: import Root from "@src/Root.tsx",
    setupFn: import mySetupFunction from "@src/myClientSetupCode.ts"
  }
}

import { configureQueryClient } from 'wasp/client/operations'

export default async function mySetupFunction(): Promise<void> {
  // ... some setup
  configureQueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
      },
    },
  })
}

import { configureQueryClient } from 'wasp/client/operations'

export default async function mySetupFunction(): Promise<void> {
  // ... some setup
  configureQueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
      },
    },
  })
}

yalcinos•2w ago

makes sense, yes i created exactly same function and disable some of the configs from react-query 🙂 Will post soon in made with wasp channel about my product. Have been working last 2 months to create marketing/dashboard website 🙂

Vinny (@Wasp)•2w ago

Awesome! sounds interesting. I'd love to take a look at it as I'm currently making content around marketing on saas stuff on tiktok

TikTok

Vinny on TikTok

@hottown 2261 Followers, 6 Following, 7420 Likes - Watch awesome short videos created by Vinny

yalcinos•2w ago

Sure, will let you know and also excited for the swap and also this is my first micro b2b saas product as well 🙂 Good to get some feedback. I need 1-2 weeks for bug bashing and then will be ready 🚀 :boi:

yalcinos•4d ago

My website is live finally 🙂 https://navigopro.com

NaviGo Accessibility

NaviGo Accessibility – ADA & WCAG Compliance Made Easy

Improve your website’s accessibility with NaviGo. Our overlay offers tools to support ADA & WCAG accessibility efforts, making digital experiences more inclusive.

Vinny (@Wasp)•3d ago

Looks great! where are you marketing it now?

yalcinos•3d ago

Right now just SEO and will share on Linkedin and star doing cold outreach

Vinny (@Wasp)•3d ago

keep sharing your progress and what you learn with the Open SaaSers. it's really helpful to us all (even me -- especially me 🙂

Gaming

Programming

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

Did you find this page helpful?