SolidJS•4y ago•

1 reply

Refetch routeData when dynamic route changes

I use a dynamic route

[slug].tsx

[slug].tsx

to display a blogpost for example. To get the data of the post from the database I use

routeData

routeData

in combination with

createRouteData

createRouteData

. Thereby I set the

slug

slug

as the

key

key

. If I now navigate with a link between blogposts,

routeData

routeData

createRouteData

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

refetchRouteData

to trigger this myself e.g. in

createEffect

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>
  );
}

SolidJS•4y ago•

1 reply

Fabian Hiller

Refetch routeData when dynamic route changes

I use a dynamic route

[slug].tsx

[slug].tsx

to display a blogpost for example. To get the data of the post from the database I use

routeData

routeData

in combination with

createRouteData

createRouteData

. Thereby I set the

slug

slug

as the

key

key

. If I now navigate with a link between blogposts,

routeData

routeData

createRouteData

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

refetchRouteData

to trigger this myself e.g. in

createEffect

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>
  );
}

Refetch routeData when dynamic route changes

Similar Threads

Refetch routeData when dynamic route changes

Similar Threads

Similar Threads

Similar Threads