`createServerData` with `fetch` is returning `undefined` in `createEffect`

Here's a minimal example.

import { Component, createEffect} from "solid-js";
import {  useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";

export function routeData() {
  return {
    myServerData: createServerData$(
      async () => {
        await fetch("http://example.com") // this is necessary to cause the issue
        return "hi world"
      }
    ),
  }
}

const Stories: Component = () => {
  const { myServerData } = useRouteData<typeof routeData>();
  // console.log("outer", myServerData()) // uncomment this to "fix" the issue

  createEffect(() => {
    console.log("create effect", myServerData()) // this logs `undefined`
  })

  return (
    <div>
    </div>
  )
};

export default Stories;

import { Component, createEffect} from "solid-js";
import {  useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";

export function routeData() {
  return {
    myServerData: createServerData$(
      async () => {
        await fetch("http://example.com") // this is necessary to cause the issue
        return "hi world"
      }
    ),
  }
}

const Stories: Component = () => {
  const { myServerData } = useRouteData<typeof routeData>();
  // console.log("outer", myServerData()) // uncomment this to "fix" the issue

  createEffect(() => {
    console.log("create effect", myServerData()) // this logs `undefined`
  })

  return (
    <div>
    </div>
  )
};

export default Stories;

Note that the fetch is required to cause the issue and that I can "fix" the issue by calling the signal in the outer scope. I'm on solid-start 0.2.23. Is this expected behavior?

7 Replies

Tommypop•2y ago

I think it's because effects are not run on the server, therefore, as far as solid is concerned, the value isn't used and doesn't need to be computed Although my understanding is also quite limited It should still work if you place the signal in the JSX though

AlexErrant•2y ago

it's unclear to me why fetch causes this behavior 😅

Tommypop•2y ago

yeah, does the serverData function run at all with the fetch within it?

AlexErrant•2y ago

Yes, the Fetch runs, even though myServerData returns undefined

Tommypop•2y ago

I think the signal getter needs to be invoked for it to be tracked, maybe with a synchronous function the data is returned immediately, but adding fetch could mean that the synchronous code continues - sending the rendered page to the client without this value, and the first time that the getter is invoked is on the client because I think in javascript even functions marked as async execute synchronously until an await is encountered This is only my best guess Someone better versed in solid will probably give a much better explanation

AlexErrant•2y ago

Tommypop•2y ago

thanks

Gaming

Programming

`createServerData` with `fetch` is returning `undefined` in `createEffect`