Nuxt•7d ago

dumb question: cache usage with useFetch

Hey guys - I couldn't find the answer in the official docs. What is the correct way to cache API responses based on keys ? I understand that passing a key is to de-duplicate requests between server/side rendering, but I thought it alone would be enough to cache requests - to avoid hitting the API and instead grab from disk cache. Apparently I need to pass a cache key - is that it ? Indeed I need to force cache whenever I need to ? Thanks in advance brothers.

const { data: response, error } = await useFetch(
      '/api/...',
      {
        method: 'GET',
        cache: 'force-cache',
        key: 'my-key-here',
      }
    )

const { data: response, error } = await useFetch(
      '/api/...',
      {
        method: 'GET',
        cache: 'force-cache',
        key: 'my-key-here',
      }
    )

2 Replies

kapa.ai•7d ago

Hi @lpmagal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your question about caching with useFetch in Nuxt is not dumb at all. It's a common area of confusion. Let me clarify this for you based on the available information. 1. Key Usage: You're correct that the key parameter is primarily used for de-duplication of requests, especially between server-side and client-side rendering. However, it's not sufficient alone for caching API responses on the client-side across page reloads or revisits Docs > Getting-started > Data fetching > Keys (https://nuxt.com/docs/getting-started/data-fetching#keys). 2. Cache Option: The cache option you're using is indeed part of the solution, but it works slightly differently than you might expect. The cache option is passed directly to the underlying fetch API and affects how the browser handles the HTTP request caching Docs > Api > Composables > useFetch (https://nuxt.com/docs/api/composables/use-fetch#params). It doesn't directly control Nuxt's internal caching mechanism. 3. Correct Usage: To properly cache API responses in Nuxt, you should use a combination of approaches: a. Use the key parameter for request de-duplication. b. Utilize the getCachedData option for custom caching logic. c. Consider using useNuxtData for accessing cached data across components. Here's an example of how you might set this up:

const { data: response, error } = await useFetch('/api/...', {
  method: 'GET',
  key: 'my-key-here',
  getCachedData: (key) => {
    // Implement your custom caching logic here
    // For example, you could use localStorage or another caching mechanism
    return JSON.parse(localStorage.getItem(key))
  }
})

const { data: response, error } = await useFetch('/api/...', {
  method: 'GET',
  key: 'my-key-here',
  getCachedData: (key) => {
    // Implement your custom caching logic here
    // For example, you could use localStorage or another caching mechanism
    return JSON.parse(localStorage.getItem(key))
  }
})

4. Additional Considerations: - The cache: 'force-cache' option you're using is actually not a standard option for the Fetch API. The correct values are 'default', 'no-store', 'reload', 'no-cache', 'force-cache', or 'only-if-cached' Docs > Api > Composables > useFetch (https://nuxt.com/docs/api/composables/use-fetch#params). - For client-side caching across page reloads, you might need to implement a custom caching strategy using getCachedData and possibly localStorage or another client-side storage mechanism. 5. Nuxt 3.8 Update: As of Nuxt 3.8, there's a new feature called getCachedData which allows for more control over caching, including the ability to implement custom Time-To-Live (TTL) logic for cached data YouTube: Nuxt 3.8 - Client-side caching with getCachedData (https://www.youtube.com/watch?v=aQPR0xn-MMk). Remember, the exact caching strategy you should use depends on your specific use case, including considerations like data freshness requirements and user experience. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

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

Gaming

Programming

dumb question: cache usage with useFetch