T
TanStack•3y ago
optimistic-gold

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 page, the target draft(id: 1) correctly fetched. but navigating to /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.
1 Reply
optimistic-gold
optimistic-goldOP•3y ago
oh i just made silly mistake, problem is reactivity for route params change to: 
$: getDraftByIdQuery = createQuery({
queryKey: ['drafts', $page.params['draftId']],
queryFn: () =>
getDraftById($page.params['draftId'])});
$: getDraftByIdQuery = createQuery({
queryKey: ['drafts', $page.params['draftId']],
queryFn: () =>
getDraftById($page.params['draftId'])});

Did you find this page helpful?