Vue Query not refetching when key changes?
Hello, i'm trying to get serverside sorting to work, I'm using tanstack query and table in Vue. The sorting is updated in the table, but for some reason the query isn't refetching?
Parent component
Datatable (Tanstack table)
Parent component
<template>
<DataTable :data="data" v-if="data" :sorting="sorting" />
</template>
<script>
const salesFetcher = async () => {
const resp = await StatusDataService.get({
page: 1,
itemsPerPage: 20,
input: '',
store
})
return resp.data
}
const sorting = ref<SortingState>([])
const { isLoading, isError, data, error, isFetching } = useQuery({
queryKey: ['sales', sorting],
queryFn: () => salesFetcher(sorting)
})
</script><template>
<DataTable :data="data" v-if="data" :sorting="sorting" />
</template>
<script>
const salesFetcher = async () => {
const resp = await StatusDataService.get({
page: 1,
itemsPerPage: 20,
input: '',
store
})
return resp.data
}
const sorting = ref<SortingState>([])
const { isLoading, isError, data, error, isFetching } = useQuery({
queryKey: ['sales', sorting],
queryFn: () => salesFetcher(sorting)
})
</script>Datatable (Tanstack table)
const table = useVueTable({
data,
columns: salescolumns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
state: {
get sorting() {
return sorting.value
}
},
onSortingChange: (updaterOrValue) => {
sorting.value =
typeof updaterOrValue === 'function' ? updaterOrValue(sorting.value) : updaterOrValue
},
manualSorting: true,
enableMultiSort: false
})const table = useVueTable({
data,
columns: salescolumns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
state: {
get sorting() {
return sorting.value
}
},
onSortingChange: (updaterOrValue) => {
sorting.value =
typeof updaterOrValue === 'function' ? updaterOrValue(sorting.value) : updaterOrValue
},
manualSorting: true,
enableMultiSort: false
})
