T
TanStack•2y ago
metropolitan-bronze

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 
<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
})
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?