T
TanStack•2y ago
rare-sapphire

Bug: SvelteKit - page store params becomes undefined during navigation

The problem When using params from SvelteKit $page store, they suddenly become undefined during navigation. (navigating out of page, where they're used along with createQuery). Error 
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toUpperCase')
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toUpperCase')
Deriving stores is recommended in docs: https://tanstack.com/query/latest/docs/framework/svelte/reactivity FYI FYI: When derived function isn't wrapped with createQuery function, then $page.params.name no longer becomes on navigation. Simple reproduction src/routes/test/[name]/+page.svelte 
<script lang="ts">
  import { createQuery } from '@tanstack/svelte-query';
  import { derived } from 'svelte/store';
  import { page } from '$app/stores';

  const noop: (..._args: unknown[]) => any = () => {};

  const test = createQuery(
    derived([page], ([$page]) => ({
      queryFn: noop,
      enabled: !!$page.params.name.toUpperCase(),
    })),
  );
</script>
<script lang="ts">
  import { createQuery } from '@tanstack/svelte-query';
  import { derived } from 'svelte/store';
  import { page } from '$app/stores';

  const noop: (..._args: unknown[]) => any = () => {};

  const test = createQuery(
    derived([page], ([$page]) => ({
      queryFn: noop,
      enabled: !!$page.params.name.toUpperCase(),
    })),
  );
</script>
1 Reply
rare-sapphire
rare-sapphireOP•2y ago
FYI: here I created an GH issue: https://github.com/TanStack/query/issues/6845
GitHub
[svelte-query] derived $page.params store will becomes undefined ...
Describe the bug When using params from SvelteKit $page store, they suddenly become undefined during navigation. (navigating out of page, where they're used along with createQuery). Error Uncau...

Did you find this page helpful?