TanStackT
TanStack3y ago
3 replies
dual-salmon

Query not fired with changing queryKey

I have the following +page.svelte but the query is not fired when page changes.

<script lang="ts">
    import {
        FilterPaginatedWithSearchTermInput,
        type FilterPaginatedWithSearchTermType,
        type IPaginatedResponse,
        fetchCategoriesPaginated,
    } from '$lib';
    import Table from '$lib/components/organisms/DataTable/Table.svelte';
    import { getDefaultValues } from '$lib/utils/getDefaultValues';
    import type { Category } from '@exipnus/db';
    import { createQuery } from '@tanstack/svelte-query';

    let defaultFilters: FilterPaginatedWithSearchTermType = getDefaultValues(
        FilterPaginatedWithSearchTermInput
    );

    let page = 0;

    const categoriesQuery = createQuery<IPaginatedResponse<Category>, Error>({
        queryKey: ['categories', page],
        queryFn: () => fetchCategoriesPaginated({ ...defaultFilters, page })
    });
    $: ({ data, isLoading, isSuccess } = $categoriesQuery);

    function handlePageChange(currentPage: number) {
        page = currentPage;
    }
</script>

<section class="container mx-auto my-24 p-2">
    {#if isLoading}
        <p>Loading...</p>
    {:else if isSuccess && data}
        <Table
        ...    
        />
    {/if}
</section>


any ideas?
Was this page helpful?