createResource and SSR

[sethen]

I just started using SolidJS and I am very new. I am having a bit of trouble with createResource. Here is some example code:

import { createEffect, createResource, Show } from "solid-js";
import { ConnectToApi, User } from "api-client";

export default function UserDetails() {
  const [userInfo] = createResource(async () => {
    const api = await ConnectToApi('http://localhost:5000');
    const userInfo = await api.getUserInfo();

    return (await userInfo.response?.json()) as User;
  });
  
  return (
    <>
      <Show when={userInfo.loading}>Loading</Show>
      <Show when={userInfo.error}>Error</Show>
      <Show when={userInfo()}>{userInfo()?.username}</Show>
    </>
  );
}

This code is working in conjunction with a C# backend that I am running locally.

When I save the file in my editor HMR does its thing and I get the data I am after -- it renders in the browser. However, when I refresh the page this code looks like it's being run on the server and does not render the JSON because the API call is failing. For some context, when a user logins to this application we set a cookie from the backend. Non-authed endpoints we have render fine because it doesn't matter if a cookie is available.

So, I believe it is failing because it does not have access to the cookie in the browser to authenticate the requests. Since there is no cookie for the server to access nothing is returned and no data is rendered.

Do I have to run this on the server? Why can't I just run this in the client? How might I fix this?

[madaxen86]

When using SSR and fetch request require cookies you must ensure to pass the cookies during SSR to the fetch request.
You can get the cookies from
getRequestEvent()?.request.headers.cookie