S
SolidJS•2y ago
Carlo Nyte

CreateResource Not complete Fetch (promise) when page first loads, but completes when VsCode Saves

Hey I'm severely confused about what's happening under the hood for npm run dev. When I'm using createResource(fetcher) and do a console.log(response) in the fetcher function, the data gets printed out in my VSCode terminal only. But once when I hit save without changing anything, it will show up in the console of my browser (chrome). Does anyone know what is happening to cause this? My example: 
import { createResource, Suspense } from "solid-js";
import { useParams } from "solid-start";

class UserDetails {
    constructor( public id: string, public name: string, public age: number, public email: string, public images: string[],
    ){}
}

const emptyUserDetails = (): UserDetails => ({
    id: '1234',
    name: 'Test User',
    age: 0,
    images: ['https://picsum.photos/200/300', 'https://picsum.photos/200/300', 'https://picsum.photos/200/300'],
});

const loadUserDetailsFromAPI = async(businessId: string) => {
    let res = await fetch(`some-user-api/${businessId}`)
    .catch(err => {
        console.log(err);
    });
    if (res && res.status === 200) {
        return res.json() as Promise<UserDetails>
    }

    return emptyUserDetails();
}

export default function UsersPage() {
    const params = useParams();
    const [userDetails] = createResource(params.id, loadUserDetailsFromAPI);

    return (
        <h1>{ userDetails.state === 'ready' }</h1>
        <Suspense fallback={Loading...}>
            <div>
                <span>userDetails()!.id</span>
                <span>userDetails()!.name</span>
                <span>userDetails()!.age</span>
                <span>userDetails()!.email</span>
                <div>
                    <span>userDetails()!.images[0]</span>
                    <span>userDetails()!.images[1]</span>
                    <span>userDetails()!.images[2]</span>
                </div>
            </div>
        </Suspense>
    );
}
import { createResource, Suspense } from "solid-js";
import { useParams } from "solid-start";

class UserDetails {
    constructor( public id: string, public name: string, public age: number, public email: string, public images: string[],
    ){}
}

const emptyUserDetails = (): UserDetails => ({
    id: '1234',
    name: 'Test User',
    age: 0,
    images: ['https://picsum.photos/200/300', 'https://picsum.photos/200/300', 'https://picsum.photos/200/300'],
});

const loadUserDetailsFromAPI = async(businessId: string) => {
    let res = await fetch(`some-user-api/${businessId}`)
    .catch(err => {
        console.log(err);
    });
    if (res && res.status === 200) {
        return res.json() as Promise<UserDetails>
    }

    return emptyUserDetails();
}

export default function UsersPage() {
    const params = useParams();
    const [userDetails] = createResource(params.id, loadUserDetailsFromAPI);

    return (
        <h1>{ userDetails.state === 'ready' }</h1>
        <Suspense fallback={Loading...}>
            <div>
                <span>userDetails()!.id</span>
                <span>userDetails()!.name</span>
                <span>userDetails()!.age</span>
                <span>userDetails()!.email</span>
                <div>
                    <span>userDetails()!.images[0]</span>
                    <span>userDetails()!.images[1]</span>
                    <span>userDetails()!.images[2]</span>
                </div>
            </div>
        </Suspense>
    );
}
9 Replies
high1
high1•2y ago
It looks that the first call is could be running server side - but that's a vague assumption, given that there's almost no information in your post. Add more details.
Carlo Nyte
Carlo NyteOP•2y ago
Thanks for the feedback! I added an example to my question and yea it's definitely happening on the server side. How do I get the results from the server to happen on the frontend? Also, I though that everything would just be passed down from the server to the frontend automatically?
high1
high1•2y ago
I would guess that it has to do with defaults on createResource when running in SSR, there's ssrLoadFrom
high1
high1•2y ago
https://github.com/solidjs/solid/blob/57f4d513e2798eddabb1700e00ed7ec8a63725de/CHANGELOG.md#more-powerful-resources
GitHub
solid/CHANGELOG.md at 57f4d513e2798eddabb1700e00ed7ec8a63725de · so...
A declarative, efficient, and flexible JavaScript library for building user interfaces. - solid/CHANGELOG.md at 57f4d513e2798eddabb1700e00ed7ec8a63725de · solidjs/solid
high1
high1•2y ago
Try to set it up the way you want it adding { ssrLoadFrom: 'initial' } would not fetch server side, and instead use the initial value.
Carlo Nyte
Carlo NyteOP•2y ago
Carlo Nyte
Carlo NyteOP•2y ago
Thank you so much for this. You don't know how long I've been trying to figure this out.
high1
high1•2y ago
Not an expert on SolidStart at all, but glad to be of help.
Carlo Nyte
Carlo NyteOP•2y ago
Still much appreciated. One of the issues for me is I'm still incredibly knew to the whole solid/react world so reading documentation is often times above my understanding After consuming several live streams I have an updated solution that works and is simple to understand. 
import { createResource, Suspense, Show } from "solid-js";
import { useParams } from "solid-start";

interface IUserDetails{
  id: string;
  name: string;
  images: string[];
}

class UserDetails {
  id: string;
  name: string;
  images: string[];
  constructor( {id, name, images}: IUserDetails) {
    this.id = id;
    this.name = name;
    this.images = images;
  }
}

const loadUserDetailsFromAPI = async(businessId: string) => {
  let res = await fetch(`some-user-api/${businessId}`)
  .catch(err => {
    console.log(err);
  });

  if (res && res.status === 200) {
    const json = res.json() as Promise<IUserDetails>
    return new UserDetails(await json);
  }

  return;
}

export default function UsersPage() {
  const params = useParams();
  const [userDetails] = createResource(params.id, loadUserDetailsFromAPI);

  return (<Suspense fallback= {<p> Loading...</p>}>
    <Show when={userDetails()}>
      {(userDetails) => <div>
      <span>userDetails().id</span>
      <span>userDetails().name</span>
        <div>
          <span>userDetails().images[0]</span>
          <span>userDetails().images[1]</span>
          <span>userDetails().images[2]</span>
        </div>
      </div>}
    </Show>
  </Suspense>);
}
import { createResource, Suspense, Show } from "solid-js";
import { useParams } from "solid-start";

interface IUserDetails{
  id: string;
  name: string;
  images: string[];
}

class UserDetails {
  id: string;
  name: string;
  images: string[];
  constructor( {id, name, images}: IUserDetails) {
    this.id = id;
    this.name = name;
    this.images = images;
  }
}

const loadUserDetailsFromAPI = async(businessId: string) => {
  let res = await fetch(`some-user-api/${businessId}`)
  .catch(err => {
    console.log(err);
  });

  if (res && res.status === 200) {
    const json = res.json() as Promise<IUserDetails>
    return new UserDetails(await json);
  }

  return;
}

export default function UsersPage() {
  const params = useParams();
  const [userDetails] = createResource(params.id, loadUserDetailsFromAPI);

  return (<Suspense fallback= {<p> Loading...</p>}>
    <Show when={userDetails()}>
      {(userDetails) => <div>
      <span>userDetails().id</span>
      <span>userDetails().name</span>
        <div>
          <span>userDetails().images[0]</span>
          <span>userDetails().images[1]</span>
          <span>userDetails().images[2]</span>
        </div>
      </div>}
    </Show>
  </Suspense>);
}

Did you find this page helpful?