T
TanStack•17mo ago
wee-brown

Params Route doesn't load the data when the params change

Hi all, I'm using a route with a ID params like this one 
export const Route = createFileRoute('post/$postId')({
  loader: ({ context: { queryClient }, params: { postId } }) =>
    // Use the `loader` option to ensure that the data is loaded
    queryClient.ensureQueryData(
      postQueryOptions(postId),
    ),
  component: PostView,
})
export const Route = createFileRoute('post/$postId')({
  loader: ({ context: { queryClient }, params: { postId } }) =>
    // Use the `loader` option to ensure that the data is loaded
    queryClient.ensureQueryData(
      postQueryOptions(postId),
    ),
  component: PostView,
})
The first time the route load the right data but if i navigate using no matter what i use Link or useNavigate : 
navigate({
  to: '/post/$postId',
  params: { postId: item.id },
})

Or

<Link
  params={{ postId: item.ID }}
  preload="intent"
  style={{
    textDecoration: 'none',
    color: 'inherit',
  }}
  to="/post/$postId"
>
  {({ isActive }) => {
    if (isActive) setActive(item.key)
    return item.Title
  }}
</Link>
navigate({
  to: '/post/$postId',
  params: { postId: item.id },
})

Or

<Link
  params={{ postId: item.ID }}
  preload="intent"
  style={{
    textDecoration: 'none',
    color: 'inherit',
  }}
  to="/post/$postId"
>
  {({ isActive }) => {
    if (isActive) setActive(item.key)
    return item.Title
  }}
</Link>
It doesn't change the content of the Outlet nor the data of the page, the param ID in the url change but not the data of the page he take only the data from the cache and only a force refresh make the data update How can i fix this issue ? Thank you
5 Replies
environmental-rose
environmental-rose•17mo ago
can you please provide a minimal complete example, e.g. by forking one of the existing examples on stackblitz? https://tanstack.com/router/v1/docs/framework/react/examples/basic-file-based
React TanStack Router Basic File Based Example | TanStack Router Docs
An example showing how to implement Basic File Based in React using TanStack Router.
wee-brown
wee-brownOP•17mo ago
@Manuel Schiller I made a minimal reproductible example with all im using in my project https://stackblitz.com/~/github.com/GutsSOLO/test-tanstack-router We can see in the example that the data doesn't change no matter which post we are targeting
robust-apricot
robust-apricot•17mo ago
@GutsSolo you need to include the postId as a part of the queryKey. Coupled with your staleTime and cacheTime settings is why you the cache was never becoming stale.
No description
robust-apricot
robust-apricot•17mo ago
https://tanstack.com/query/latest/docs/framework/react/guides/query-keys
Query Keys | TanStack Query React Docs
At its core, TanStack Query manages query caching for you based on query keys. Query keys have to be an Array at the top level, and can be as simple as an Array with a single string, or as complex as an array of many strings and nested objects. As long as the query key is serializable, and unique to the query's data, you can use it! Simple Que...
wee-brown
wee-brownOP•17mo ago
Ohhhhh XD thank you !

Did you find this page helpful?