How can I get useFetch to trigger when NuxtLink is clicked?

Question

The issue is that my view is not re-rendering nor is useFetch re-running when a pagination link is clicked. I suspect this is something to do with data reactivity in Nuxt - which is new to me.

I have this as my script.

<script setup lang="ts">
const route = useRoute();
const { data, status, error, refresh } = await useFetch("/api/search", {
  query: useRoute().query,
});

const page_options = [10, 25, 50, 100];
</script>

The page renders correctly and processes the URL query params of q, per_page and page.

I have an array of links to navigate to the search URL with an updated page param.

 <NuxtLink
          :class="{
            'p-2 border-2': true,
            'bg-pink-800 text-white': index === Number(data.pagination.page),
          }"
          v-for="index in data.pagination.page_count"
          :key="index"
          :to="{
            name: 'archive-search',
            query: {
              per_page: data.pagination.per_page,
              page: index,
              q: route.query.q,
            },
          }"
        >
          {{ index }}
        </NuxtLink>

The URL updates but nothing is trigger either server side or client side. I suspect this is something to do with watching a value but how is this best done with url params?

Cheers.

Yue JIN · Accepted Answer · 2024-11-29 04:00:36Z

0

According to the official documents of Nuxt, all fetch options can be given a computed or ref value. These will be watched and new requests made automatically with any new values if they are updated.

useRoute().query is not a ref. You can wrap it in a toRef or computed to trigger refetch.

const route = useRoute();
const query = computed(()=>{
  return route.query
});
const { data, status, error, refresh } = await useFetch("/api/search", {
  query,
});

Ref: https://nuxt.com/docs/api/composables/use-fetch#params

answered Nov 29, 2024 at 4:00

Yue JIN

2,5101 gold badge18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I get useFetch to trigger when NuxtLink is clicked?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related