Using vue-query to fetch data based on URL parameters

[IagoLast]

Hi there, I have an application which has a /transactions/:id route with vue router that renders the following:

When I manually enter the url everything goes well because the setup function is executed and the query is "launched".

However when I trigger a manual navigation clicking on a link (router.push) the query is not updated. This is because vue-router re-uses the same component for efficiency.

https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

This prevents the queries to be executed on setup

This is the code of the component:

<template>
    <aside v-if="status === 'success'">
        <AcHeading>Transaction details</AcHeading>
        <AcParagraph margin="20px 0">{{data?.id}}</AcParagraph>
        <AcParagraph>{{data?.amount}} - {{data?.currency}}</AcParagraph>
    </aside>
</template>

<script setup lang="ts">
import transactionsRepository from 'repositories/transactions.repository';
import { AcHeading, AcParagraph } from '@apto-payments/apto-core-vue';

import { useQuery } from '@tanstack/vue-query';
import { useRoute } from 'vue-router';

const route = useRoute();
const id = route.params.id as string;
const { status, data } = useQuery({
    queryKey: ["transactions", "details", id],
    queryFn: () => transactionsRepository.details({ id }),
});

</script>

<style scoped>
...
</style>

So the problem here is how to watch for changes on the id parameter and run the query again.

[IagoLast]

Ok, the solution is to add a :key property to parent router component.

https://vueschool.io/lessons/how-to-rerender-components-when-vue-router-params-changes

[Tripouille]

Hi, just in case someone wants to preserve another component state, the :key solution will not work since this will force the component to unmount, which is kinda annoying.
You can instead use watch like

const { data, refetch } = useQuery(...);
watch(
  () => props.id,
  () => refetch()
);

and close over props or route in your case in the queryFn like

() => transactionsRepository.details({ id: props.id });

Hope that can help.