SolidJS•2y ago

Why is this page with `useParams` and `createResource` not reloading?

export default function ArticleDetail() {
  const [article] = createResource(useParams().id, fetchArticle);

  createEffect(() => {
    if (article())
      console.log("params.id ", useParams().id);
  });

  createEffect(() => {
    if (article())
      console.log("Finished loading ", article()!.title);
  });

export default function ArticleDetail() {
  const [article] = createResource(useParams().id, fetchArticle);

  createEffect(() => {
    if (article())
      console.log("params.id ", useParams().id);
  });

  createEffect(() => {
    if (article())
      console.log("Finished loading ", article()!.title);
  });

When I switch pages, the params.id log is changing, but createResource is not calling the fetchArticle() function again. The docs https://www.solidjs.com/docs/latest/api#createresource say:

t will be called again whenever the value of sourceSignal changes, and that value will always be passed to fetchData as its first argument.

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

3 Replies

Tommypop•2y ago

You might need to use () => params.id as the source, rather than just useParams().id

BersaelorOP•2y ago

thanks, I had tried const id = () => useParams().id; and createResource(id(), fetchArticle); before, but now I see that I should have used createResource(id, fetchArticle); 🤦‍♂️

Tommypop•2y ago

Yep, otherwise the getter is being called outside of the resource's context, so it isn't tracked by it

Gaming

Programming

Why is this page with `useParams` and `createResource` not reloading?