Query not fired with changing queryKey
I have the following +page.svelte but the query is not fired when page changes.
any ideas?
<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?