NuxtN
Nuxt•2y ago
Flinty

useFetch data not reactive

Hey! So I have a simple/new nuxt app with 2 pages, /index and /tenants

Each page has an HTTP request to a backend service elsewhere. When I refresh the page, it the data loads fine, but when I navigate to another page, the data does not "load". By this I mean the state does not get updated with the newly fetched data (I can see the network request in devtools). Below is the relevant code:

tenants.vue
let data: TenantIndexData = reactive({
    tenants: [] as Tenant[] | null
})
const { data: tenantsF, status: status } = await Get<Tenant[]>('http://localhost:9000/tenants')
if (tenantsF && tenantsF.value) {
    data.tenants = tenantsF.value
}

index.vue
let tenantStats = reactive({
    total: null,
    newestTenant: null,
    monthlyAggregate: null,
    monthlyGrowth: null,
} as TenantStatistics)

const { data: stats, status: status } = await Get<TenantStatistics>('http://localhost:9000/tenants/dashboard')
if (stats.value) {
    tenantStats.monthlyGrowth = stats.value.monthlyGrowth
    tenantStats.total = stats.value.total
    tenantStats.monthlyAggregate = stats.value.monthlyAggregate
    tenantStats.newestTenant = stats.value.newestTenant
    console.log("Stats", tenantStats);

}


Below is the structure of Get
export const Get = async <T>(endpoint: string): Promise<ApiResponse<T>> => {
  const {
    status: status,
    data: data,
    refresh: refresh,
  } = useFetch<T>(() => endpoint, { initialCache: false });
  return { status: status, data: data, refresh: refresh };
};


Oddly, the issue goes away after the first page navigation, and the code works as expected
Was this page helpful?