1

I have a comment component that fetches data using useFetch and user can sort the comments by time, likes, etc. Works good, However, the problem is that when user navigates to another post page with this comment component, the comments are not refreshed and thus the old commments from the previous blog page is still shown.

How do I refresh the data on new pages?

Here's my code:

const selectedSort = ref('newest')
const { data, pending, error, refresh } = useFetch(
  `/api/comments/${selectedSort.value}/${route.params.id}`
)

I tried to add:

watch(
  () => route.params.id,
  async (newId) => {
    refresh()
)

but that did not work...

some-user
  • 3,888
  • 5
  • 19
  • 43
redshift
  • 4,815
  • 13
  • 75
  • 138
  • You can either try with `useFetch(url, { initialCache: false })` or you can use the `refresh` method: https://v3.nuxtjs.org/api/composables/use-fetch#example – kissu Sep 23 '22 at 22:58
  • Did you find a solution? I really struggle with this as well. Also the watch property within useFetch is not executed either...: https://nuxt.com/docs/api/composables/use-fetch#usefetch – Merc Aug 14 '23 at 16:01
  • Also I read here: `Fetch options and URL are watched by default`. My endpoint is updated if I log but the useFetch command is not called again... – Merc Aug 14 '23 at 16:03
  • @Merc did you gave it a `key`? https://stackoverflow.com/a/73863958/8816585 – kissu Aug 14 '23 at 16:12
  • Yes I did: I also opened a new thread to be able to show my code. https://stackoverflow.com/questions/76900573/nuxt3-usefetch-not-refreshing-on-slug-change – Merc Aug 14 '23 at 16:28

0 Answers0