SolidJS•2y ago

Refetch routeData when dynamic route changes

I use a dynamic route [slug].tsx to display a blogpost for example. To get the data of the post from the database I use routeData in combination with createRouteData. Thereby I set the slug as the key. If I now navigate with a link between blogposts, routeData or createRouteData is not executed again, so the content of the dynamic route does not change. Is this intended or a bug? Do I need to use refetchRouteData to trigger this myself e.g. in createEffect?

export function routeData({ params }: RouteDataArgs) {
  return {
    post: createRouteData((key) => fetch(key), { key: params.slug }),
  };
}

export default function PostPage() {
  const { post } = useRouteData<typeof routeData>();
  return (
    <Show when={post()}>
      <h1>{post()!.title}</h1>
    </Show>
  );
}

export function routeData({ params }: RouteDataArgs) {
  return {
    post: createRouteData((key) => fetch(key), { key: params.slug }),
  };
}

export default function PostPage() {
  const { post } = useRouteData<typeof routeData>();
  return (
    <Show when={post()}>
      <h1>{post()!.title}</h1>
    </Show>
  );
}

1 Reply

Fabian Hiller•2y ago

Ok, I think figured out how it works. I have changed the key to a function with an array.

export function routeData({ params }: RouteDataArgs) {
  return {
    post: createRouteData(
      (key) => fetch(key),
      { key: () => ['post', params.slug] }
    ),
  };
}

export function routeData({ params }: RouteDataArgs) {
  return {
    post: createRouteData(
      (key) => fetch(key),
      { key: () => ['post', params.slug] }
    ),
  };
}

Gaming

Programming

Refetch routeData when dynamic route changes