Jaden Drury Posts - Answer Overflow

Jaden Drury

•Created by Jaden Drury on 2/19/2025 in #❓・help

useFetch and keys that end up not being unique

Hey there everyone, I have a question about the key param on useFetch and how nuxt handles it not being truly unique. We have a component that is using useFetch to get it's data and the useFetch looks something roughly like this

const { data: area } = await useFetch(
  `/api/areas/${areaId}`,
  {
    key: "areas",
    query: {
      ...
    },
  }
)

const { data: area } = await useFetch(
  `/api/areas/${areaId}`,
  {
    key: "areas",
    query: {
      ...
    },
  }
)

This component could be rendered multiple times on a page meaning we have several different instances where the areaId is different. But note that my key doesn't have the id in it to make it unique. What we've noticed is even though we've not given this a unique key there seems to be no issue with refreshing the data based on that key. If I call refreshNuxtData("areas") from a button on the same component it refreshes only the data from within that component. This doesn't make full sense to me though since all instances of the component are still sharing the same key "areas" since I didn't make it unique. It's doing what I want it do, refreshing only once particular instance of the data, but it feels unexpected since I failed to give it a truly unique key. Does Nuxt have some way of processing instances where a key that should be unique but actually isn't? That seems to be what is going on but I'd like to understand it more.

9 replies

Gaming

Programming