How to remove data from the item page when moving to another page using nuxt 3?

Question

I just started learning Nuxt3. In my project I get list of movies from an API:

<script setup>
  const config = useAppConfig();

  let page = ref(1);
  let year = 2022;

  let url = computed(() => `https://api.themoviedb.org/3/discover/movieapi_key=${config.apiKey}&sort_by=popularity.desc&page=${page.value}&year=${year}`);

  const { data: list } = await useAsyncData("list", () => $fetch(url.value));

  const next = () => {
    page.value++;
    refreshNuxtData("list");
  };

 const prev = () => {
   if (page.value > 1) {
     page.value--;
     refreshNuxtData("list");
   }
 };
</script>

Then I have a page for each movie where I get information about it:

<script setup>
  const config = useAppConfig();

  const route = useRoute();
  const movieId = route.params.id;

  const url = `https://api.themoviedb.org/3/movie/${movieId}api_key=${config.apiKey}`;

  const { data: movie } = await useAsyncData("movie", () => $fetch(url));

  refreshNuxtData("movie");
</script>

My problem is that when I open a new movie page, I see information about the old one, but after a second it changes. How can I fix it?

And I have doubts if I'm using refreshNuxtData() correctly. If not, can you show me the correct example of working with API in Nuxt3?

Answer 1

OP fixed the issue by using

const { data: movie } = await useFetch(url, { key: movieId })

movieId being dynamic, it will dedupe all the calls as explained here for the key: https://v3.nuxtjs.org/api/composables/use-async-data/#params

key: a unique key to ensure that data fetching can be properly de-duplicated across requests. If you do not provide a key, then a key that is unique to the file name and line number of the instance of useAsyncData will be generated for you