SolidJS•2y ago

How to call for server-side-data in the `root.tsx` of solid-start`

Since I want to wrap my entire site in <ClientOnly> in the root.tsx, I can't use useRouteData as that is only supposed to be used under the /routes path. So basically

[root.tsx]
    const serverData = createServerData( params.id );
   

    return <Html lang="en">
      <Head>
        <OGHeaders data={serverData} />
      </Head>
      <Body>
              <ClientOnly>
                <AuthContextProvider>
                  <AppContextProvider>
                    <Routes>
                      <FileRoutes />
                    </Routes>
                  </AppContextProvider>
                </AuthContextProvider>
              </ClientOnly>
      </Body>
    </Html>

[root.tsx]
    const serverData = createServerData( params.id );
   

    return <Html lang="en">
      <Head>
        <OGHeaders data={serverData} />
      </Head>
      <Body>
              <ClientOnly>
                <AuthContextProvider>
                  <AppContextProvider>
                    <Routes>
                      <FileRoutes />
                    </Routes>
                  </AppContextProvider>
                </AuthContextProvider>
              </ClientOnly>
      </Body>
    </Html>

1 Reply

BersaelorOP•2y ago

I guess what I'm asking is, whether it's possible to call createServerData$ outside of the export function routeData() method, since root.tsx doesn't seem to work with export function routeData() tried createResource, unfortunately it looks like the await that is inside fetchServerData doesn't finish before the site is rendered.

export default function Root() {
  const location = useLocation();
  const id = () => {
    const pathComponents = location.pathname.split('/');
    if (pathComponents.length < 3) {
      return undefined;
    }
    return pathComponents[2];
  };
  const [data] = createResource(id, fetchServerData);

export default function Root() {
  const location = useLocation();
  const id = () => {
    const pathComponents = location.pathname.split('/');
    if (pathComponents.length < 3) {
      return undefined;
    }
    return pathComponents[2];
  };
  const [data] = createResource(id, fetchServerData);

In the fetchServerData method:

const fetchServerData = async (id: string | undefined) => {
  console.log("id: ", id) // is printed

  if (mode == 'development') {
    return { event: testEvent, isDev: true };
  };

  let data = await getFromDynamoDB(id, 'dev') // SSR code never arrives here 

  console.log("[fetchServerData] data: ", data)
  return { event: data[1] || data[0], isDev: !!data[0] };

const fetchServerData = async (id: string | undefined) => {
  console.log("id: ", id) // is printed

  if (mode == 'development') {
    return { event: testEvent, isDev: true };
  };

  let data = await getFromDynamoDB(id, 'dev') // SSR code never arrives here 

  console.log("[fetchServerData] data: ", data)
  return { event: data[1] || data[0], isDev: !!data[0] };

the id: 1219 line prints, but it never gets to the console.log("[fetchServerData] data: ", data) line The solution here was:

  const serverFetcher = server$(async (id: string | undefined) => await fetchServerData(id));
  const [data] = createResource(id, serverFetcher);

  const serverFetcher = server$(async (id: string | undefined) => await fetchServerData(id));
  const [data] = createResource(id, serverFetcher);

Gaming

Programming

How to call for server-side-data in the `root.tsx` of solid-start`