SolidJS•7mo ago

SolidStart is it possible to make `load` function on Solid Router async?

My code seems to be working already but I still can't use the data that was loaded as a data that can be used for hydration. (It's not on the returned .html) I followed the instructions on here: https://github.com/solidjs/solid-router?tab=readme-ov-file#data-functions--useroutedata Any tips on this?

export const route = {
  load: () => {
    const [user] = createResource(async () => {
      const event = getRequestEvent();

      const client = initTRPCSSRClient(event?.request.headers!, event?.response.headers!);
      const response = await client.currentUser.query();
      return response.user ?? null;
    });

    return {
      user: user,
    };
  },
} satisfies RouteDefinition;

export default function DashboardPage(props: { data: any }) {
  const { user, hydrateUser } = useAuthContext();
  hydrateUser(props.data.user());

  const { height, width } = useWindowSize();

  return (
    <>
      {/* <ProtectedRoute> */}
      {/* <div>{JSON.stringify(props.data.user())}</div> */}
      <div class="flex flex-col gap-y-4">
        Dashboard: {user()?.username}
        <div>
          Window Size: {width()} x {height()}
        </div>
        <div>
          mySignal:
          {JSON.stringify(props)}
        </div>
      </div>
      {/* </ProtectedRoute> */}
    </>
  );
}

export const route = {
  load: () => {
    const [user] = createResource(async () => {
      const event = getRequestEvent();

      const client = initTRPCSSRClient(event?.request.headers!, event?.response.headers!);
      const response = await client.currentUser.query();
      return response.user ?? null;
    });

    return {
      user: user,
    };
  },
} satisfies RouteDefinition;

export default function DashboardPage(props: { data: any }) {
  const { user, hydrateUser } = useAuthContext();
  hydrateUser(props.data.user());

  const { height, width } = useWindowSize();

  return (
    <>
      {/* <ProtectedRoute> */}
      {/* <div>{JSON.stringify(props.data.user())}</div> */}
      <div class="flex flex-col gap-y-4">
        Dashboard: {user()?.username}
        <div>
          Window Size: {width()} x {height()}
        </div>
        <div>
          mySignal:
          {JSON.stringify(props)}
        </div>
      </div>
      {/* </ProtectedRoute> */}
    </>
  );
}

GitHub

GitHub - solidjs/solid-router: A universal router for Solid inspire...

A universal router for Solid inspired by Ember and React Router - solidjs/solid-router

3 Replies

bigmistqke•7mo ago

having a bit difficulty understanding the question is the issue that props.data is empty? or that there is nothing server side rendered? I see you are using server-specific code in the load-function, this would need a "use server" directive. this might be relevant to u https://discord.com/channels/722131463138705510/1249411705646354434/1249434295479566366

peerreynders•7mo ago

This works fine:

// file: src/routes/about.tsx
import { createResource, type Accessor } from 'solid-js';
import { Title } from '@solidjs/meta';
import type { RouteDefinition, RouteSectionProps } from '@solidjs/router';

export const route = {
  load() {
    console.log('loading', Date.now());
    const [result] = createResource(
      () => new Promise((r) => setTimeout(r, 1000, 'success'))
    );
    return {
      result,
    };
  },
} satisfies RouteDefinition;

export default function About(
  props: RouteSectionProps<{ result: Accessor<string> }>
) {
  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <p>{props.data.result()}</p>
    </main>
  );
}

// file: src/routes/about.tsx
import { createResource, type Accessor } from 'solid-js';
import { Title } from '@solidjs/meta';
import type { RouteDefinition, RouteSectionProps } from '@solidjs/router';

export const route = {
  load() {
    console.log('loading', Date.now());
    const [result] = createResource(
      () => new Promise((r) => setTimeout(r, 1000, 'success'))
    );
    return {
      result,
    };
  },
} satisfies RouteDefinition;

export default function About(
  props: RouteSectionProps<{ result: Accessor<string> }>
) {
  return (
    <main>
      <Title>About</Title>
      <h1>About</h1>
      <p>{props.data.result()}</p>
    </main>
  );
}

Remember that you need to disable preloading:

// file: src/app.tsx
import { MetaProvider, Title } from '@solidjs/meta';
import { Router } from '@solidjs/router';
import { FileRoutes } from '@solidjs/start/router';
import { Suspense } from 'solid-js';
import './app.css';

export default function App() {
  return (
    <Router
      preload={false}
      root={(props) => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <a href="/">Index</a>
          <a href="/about">About</a>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

// file: src/app.tsx
import { MetaProvider, Title } from '@solidjs/meta';
import { Router } from '@solidjs/router';
import { FileRoutes } from '@solidjs/start/router';
import { Suspense } from 'solid-js';
import './app.css';

export default function App() {
  return (
    <Router
      preload={false}
      root={(props) => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <a href="/">Index</a>
          <a href="/about">About</a>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

It's not on the returned .html

That's because SoildStart sends streaming responses. If you want it to wait, use { deferStream: true } on the resource:

const [result] = createResource(
  () => new Promise((r) => setTimeout(r, 1000, 'success')),
  { deferStream: true }
);

const [result] = createResource(
  () => new Promise((r) => setTimeout(r, 1000, 'success')),
  { deferStream: true }
);

BlankeosOP•7mo ago

Thanks @peerreynders ! Yup that did the trick. Thanks! Sorry if the question wasn't clear btw.

Gaming

Programming

SolidStart is it possible to make `load` function on Solid Router async?