SolidJS•2y ago

createResource refetch causes full page refresh

I'm using SolidStart, dabbling for the first time with data fetching using Solid, apologies in advance for any simple misunderstandings. I've got an API route giving me a list of projects which I've put into a resource in the following manner:

/* ... */
const [projects, { refetch: refetchProjects }] = createResource(getProjects);
/* ... */

/* ... */
const [projects, { refetch: refetchProjects }] = createResource(getProjects);
/* ... */

The fetching function itself is as follows

async function getProjects() {
  const response = await fetch("/api/projects", { method: "GET" });
  if (response.ok) {
    return response.json();
  } else {
    return [];
  }
}

async function getProjects() {
  const response = await fetch("/api/projects", { method: "GET" });
  if (response.ok) {
    return response.json();
  } else {
    return [];
  }
}

When manually triggering refetchProjects() in an onClick the entire page flashes white in what seems like a full page reload. Any ideas as to what I'm doing wrong? Are resources the wrong solution?

6 Replies

Tommypop•2y ago

Try wrapping that part of the component tree in a Suspense When the resource gets refetched, it triggers the closest suspense boundary, which is probably high up your component tree. When it gets retriggered, it tries to render the fallback - removing the DOM nodes below it, which are then rerendered when the resource resolves

Vincent UdénOP•2y ago

Makes sense! Should I wrap the entire component, the part which triggers the refetch or the part which depends on the resource?

Tommypop•2y ago

You should only need to wrap the part where the resource is accessed in the JSX And you can add a custom fallback for it, if you wanted to display a loading spinner

Vincent UdénOP•2y ago

That worked like a charm, thank you!

Tommypop•2y ago

Awesome :)

nzdeep•2y ago

Once you've sorted out the Suspense boundary you can also wrap refetchProject in startTransition is you wanted to avoid the fallback and use a more softer inline clue for reloading via isPending - useTransition will hand you both isPending accessor and start Transition

Gaming

Programming

createResource refetch causes full page refresh