TanStackT
TanStack•2y ago•
1 reply
foolish-indigo

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')

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>
Was this page helpful?