Preventing Refetching in Component

[tired jay]

Hey everyone,

I'm using useAsyncData with a key so useAsyncData('config'), what I thought the key did is if config already exists in the payload it will load from there rather than refetching. That way you can safely use useAsyncData inside components.

This is super useful as you can just drop in components and the data will come with it. If you can have multiple components pulling from the data source, rather than making multiple requests it will load from the payload.

I'm finding that I have a component that loads config data for the menu, each time the menu is unmounted and mounted it refetches data from the database endpoint.

Have I misunderstood what they key does in useAsyncData and is there a way to make it behave like I described?

https://nuxt.com/docs/getting-started/data-fetching#caching-and-refetching

useFetch and useAsyncData use keys to prevent refetching the same data. This was the part that lead be to believe it worked that way.

Requests keep happening on mount.

[cloud scarab]

I had to use getCachedData like this in order to have it stop requesting from the api endpoint

const nuxtApp = useNuxtApp();
const {client} = usePrismic();

const {data: team} = await useAsyncData(
  'team',
  () => client.getSingle('team'),
  {
    transform: (team) => {
      const teamMembers = team.data.team_members || [];
      return teamMembers.slice(0, 2);
    },
    getCachedData: (key) =>
      nuxtApp.payload.data[key] || nuxtApp.static.data[key]
  }
);```

Alex explains it here, pretty cool! https://www.youtube.com/watch?v=aQPR0xn-MMk