SolidJS•13mo ago

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,
    email: 'testUser@email.com',
    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,
    email: 'testUser@email.com',
    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•13mo 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•13mo 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•13mo ago

I would guess that it has to do with defaults on createResource when running in SSR, there's ssrLoadFrom

high1•13mo 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•13mo 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•13mo ago

https://tenor.com/view/crying-tears-tearyeyed-about-to-cry-gif-4917303

Tenor

Carlo Nyte•13mo ago

Thank you so much for this. You don't know how long I've been trying to figure this out.

high1•13mo ago

Not an expert on SolidStart at all, but glad to be of help.

Carlo Nyte•13mo 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>);
}

Gaming

Programming

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