SolidJSS
SolidJS•15mo ago•
75 replies
Ciantic

How to get 'client side' createResource behavior in SolidStart?

I noticed that if I don't have Suspense component in SolidStart, the whole page refreshes and createResource loading state doesn't render at all.

For example if use this snippet from regular docs in solidstart project:

import { createSignal, createResource, Switch, Match, Show } from "solid-js";

const fetchUser = async (id) =>
 {
  const response = await fetch(`https://swapi.dev/api/people/${id}/`);
  return response.json();
}

function App() {
  const [userId, setUserId] = createSignal();
  const [user] = createResource(userId, fetchUser);

  return (
    <div>
      <input
        type="number"
        min="1"
        placeholder="Enter Numeric Id"
        onInput={(e) => setUserId(e.currentTarget.value)}
      />
      <Show when={user.loading}>
        <p>Loading...</p>
      </Show>
      <Switch>
        <Match when={user.error}>
          <span>Error: {user.error}</span>
        </Match>
        <Match when={user()}>
          <div>{JSON.stringify(user())}</div>
        </Match>
      </Switch>

    </div>
  );
}


It will not show loading text at all, just the whole page refreshes when typing to input.

This is quiet confusing when coming from normal SolidJS, that createResource loading etc are now useless.

Thanks!
Was this page helpful?