T
TanStack•2y ago
genetic-orange

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>
<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?
3 Replies
national-gold
national-gold•2y ago
Basic svelte: categories query is not reactive
wise-white
wise-white•2y ago
Hi @Yannis , please see the page I wrote here: https://tanstack.com/query/latest/docs/svelte/reactivity categoriesQuery doesn't know when your page variable changes. You could slap a reactive $: in front of it, but this breaks with certain tanstack query behaviours. The best way is to pass in a derived store with your page variable being changed to a writable store.
Reactivity | TanStack Query Docs
Svelte uses a compiler to build your code which optimises rendering. By default, components run once, unless they are referenced in your markup. To be able to react to changes in options you need to use stores. In the below example, the refetchInterval option is set from the variable intervalMs, which is bound to the input field. However, as t...
wise-white
wise-white•2y ago
I expect this to be a lot simpler in svelte v5! 🤩

Did you find this page helpful?