prefetching based on route params always return same result

In sveltekit project, I want to fetch dynamic data on route change.

in page.ts

export const load = (async ({ params, parent }) => {
const { queryClient } = await parent();
await queryClient.prefetchQuery({
queryKey: ['drafts', params.draftId],
queryFn: () => getDraftById(params.draftId)});
}) satisfies PageLoad;

export const load = (async ({ params, parent }) => {
const { queryClient } = await parent();
await queryClient.prefetchQuery({
queryKey: ['drafts', params.draftId],
queryFn: () => getDraftById(params.draftId)});
}) satisfies PageLoad;

in svelte component file

const getDraftByIdQuery = createQuery({
queryKey: ['drafts',$page.params['draftId']],
queryFn: () => getDraftById($page.params['draftId'])});

const getDraftByIdQuery = createQuery({
queryKey: ['drafts',$page.params['draftId']],
queryFn: () => getDraftById($page.params['draftId'])});

when mounting on

/draft/1

/draft/1

page, the target draft(id: 1) correctly fetched.

but navigating to

/draft/2

/draft/2

page, $getDraftByIdQuery.data is not updated contrary to my expectation.

i checked parameter(draftId) in query keys matching each other when route changing happen.

sorry for my bad english. appreciate any help.

TanStack•3y ago•

1 reply

uncertain-scarlet

prefetching based on route params always return same result

In sveltekit project, I want to fetch dynamic data on route change.

in page.ts

export const load = (async ({ params, parent }) => {
const { queryClient } = await parent();
await queryClient.prefetchQuery({
queryKey: ['drafts', params.draftId],
queryFn: () => getDraftById(params.draftId)});
}) satisfies PageLoad;

export const load = (async ({ params, parent }) => {
const { queryClient } = await parent();
await queryClient.prefetchQuery({
queryKey: ['drafts', params.draftId],
queryFn: () => getDraftById(params.draftId)});
}) satisfies PageLoad;

in svelte component file

const getDraftByIdQuery = createQuery({
queryKey: ['drafts',$page.params['draftId']],
queryFn: () => getDraftById($page.params['draftId'])});

const getDraftByIdQuery = createQuery({
queryKey: ['drafts',$page.params['draftId']],
queryFn: () => getDraftById($page.params['draftId'])});

when mounting on

/draft/1

/draft/1

page, the target draft(id: 1) correctly fetched.

but navigating to

/draft/2

/draft/2

prefetching based on route params always return same result

Similar Threads

prefetching based on route params always return same result

Similar Threads

Similar Threads

Similar Threads