dion Posts - Answer Overflow

dion

Explore posts from servers

•Created by dion on 11/4/2023 in #support

hydration mismatch when wrapping component in a suspense

I am trying to render a loading ui when data is being collected on the server:

function SectionA(props: { expanded: boolean }) {
  const apps = useRouteData<typeof routeData>();
  return (
     <div>
      <Label>Applications</Label>
      <Suspense fallback={<div>Loading apps...</div>}>
        <For each={apps()} fallback={<div>No apps yet</div>}>
          {(app) => (
            <App app={app}/>
          )}
        </For>
      </Suspense>
     </div>
  );
}

function SectionA(props: { expanded: boolean }) {
  const apps = useRouteData<typeof routeData>();
  return (
     <div>
      <Label>Applications</Label>
      <Suspense fallback={<div>Loading apps...</div>}>
        <For each={apps()} fallback={<div>No apps yet</div>}>
          {(app) => (
            <App app={app}/>
          )}
        </For>
      </Suspense>
     </div>
  );
}

For context this is routeData that i defined on the parent route:

export const routeData = ({ params }: RouteDataArgs) => {
  return createServerData$(
    async ([organizationId], event) => {
      await new Promise((resolve) => setTimeout(resolve, 5000));
      // removed for brievity
      return applications;
    },
    { key: () => [params.id] }
  );
};

export const routeData = ({ params }: RouteDataArgs) => {
  return createServerData$(
    async ([organizationId], event) => {
      await new Promise((resolve) => setTimeout(resolve, 5000));
      // removed for brievity
      return applications;
    },
    { key: () => [params.id] }
  );
};

Observation: 1. When i put a delay of 5 seconds, and reload the page, a GET request is sent to the server the page will show that it's loading for 5 seconds 2. Once the 5 seconds is up, a POST request is sent to that page's routeData, then it loads for another 5 seconds. 3. This is the time when the error below appears. The suspense will now also show the loading fallback.

sidebar.tsx:211 Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-2-0-0-1-3-0-3-0-f0

sidebar.tsx:211 Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-2-0-0-1-3-0-3-0-f0

4. Once the 5 seconds is up, then the page now shows the correct data. TLDR, i have two questions: - why is there a total delay of 10 seconds to load the data in when i only put a delay of 5 seconds - why is there a hydration mismatch error

3 replies

SSolidJS

•Created by dion on 11/4/2023 in #support

getting route parameters severside

Is there a way to obtain route parameters on the serversides? I know that we can use useParam on the client, but i wish to fetch some data on the server. Any help would be greatly appreciated!

2 replies

SSolidJS

•Created by dion on 11/2/2023 in #support

whats the use case of routeData and useRouteData

From my understanding, it seems possible to directly get the data needed using ‘createServerData$’ to fetch the data on the server, or is that an anti-pattern? From the docs, it seems that routeData is called once per route, but in most apps that i’ve built, i usually do the data fetching at the component that needs it. I.E, i’ll have pass it down as props.

2 replies

SSolidJS

•Created by dion on 11/2/2023 in #support

How do we determine what's client side code and what's serverside code

As the title say, i'm unsure how to seggregate my code, or the right way to think about this framework. Any resource would help indefinitely! Thanks!

2 replies

SSolidJS

•Created by dion on 11/1/2023 in #support

Request data not consistent between createServerData$ and API route

I have a lucia x trpc x solidstart project setup. TLDR: I'm observing that the event passed to my createServerData$ and the event that is passed to my API handler is different. Here's my project structure:

src
|--auth
|--routes
|  |--(auth)
|  |  |--login.tsx <-- this one has access to the right cookie
|  |-- api
|  |  |--trpc
|  |  |  |--[trpc].ts <-- this one does not have access to the cookie even though login.tsx already has
|--api

src
|--auth
|--routes
|  |--(auth)
|  |  |--login.tsx <-- this one has access to the right cookie
|  |-- api
|  |  |--trpc
|  |  |  |--[trpc].ts <-- this one does not have access to the cookie even though login.tsx already has
|--api

Here's how my API handler for trpc has been setup src/routes/trpc/[trpc].ts

const handler = async ({ request, params }: APIEvent) =>
  {
    const cookie = parseCookie(request.headers.get("Cookie") ?? "");
    console.log(cookie); <-- this logs as {}
  };

export const GET = handler;
export const POST = handler;

const handler = async ({ request, params }: APIEvent) =>
  {
    const cookie = parseCookie(request.headers.get("Cookie") ?? "");
    console.log(cookie); <-- this logs as {}
  };

export const GET = handler;
export const POST = handler;

The cookie here is logged as {} On the other hand, in another route, src/routes/(auth)/signin.ts

export const routeData = () => {
  return createServerData$(async (_, event) => {
    const authRequest = auth.handleRequest(event.request);
    const session = await authRequest.validate();
    const cookie = parseCookie(event.request.headers.get("Cookie") ?? "");
    console.log(cookie); <-- This logs out the auth details
  });
};

const Page = () => {
  return (
    <div class="w-full h-screen items-center flex justify-center">
    ...
    </div>
  );
};

export default Page;

export const routeData = () => {
  return createServerData$(async (_, event) => {
    const authRequest = auth.handleRequest(event.request);
    const session = await authRequest.validate();
    const cookie = parseCookie(event.request.headers.get("Cookie") ?? "");
    console.log(cookie); <-- This logs out the auth details
  });
};

const Page = () => {
  return (
    <div class="w-full h-screen items-center flex justify-center">
    ...
    </div>
  );
};

export default Page;

The console logs out the authentication details. I'm confused as to why this is the behaviour since I thought both routeData and API routes are accessing the same request

2 replies

SSolidJS

•Created by dion on 10/31/2023 in #support

Unable to find modules

Hey guys, new to solidjs and SSR frameworks in general. I'm testing out a solidstart template generated using a community tool called "Create JD app". This allows me to quickly spin up a boilerplate project similar to create-t3-app. The problem is that I'm facing this runtime error:

An error occured while server rendering /:

    Cannot find module '@/server/auth' imported from '......../src/routes/api/auth/[...solidauth].ts'

An error occured while server rendering /:

    Cannot find module '@/server/auth' imported from '......../src/routes/api/auth/[...solidauth].ts'

Doing a build results in the following error:

Error: [vite]: Rollup failed to resolve import "@/utils/trpc" from "........../src/root.tsx". This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

Error: [vite]: Rollup failed to resolve import "@/utils/trpc" from "........../src/root.tsx". This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

Here's my vite config file:

import solid from "solid-start/vite";
import { defineConfig } from "vite";
import vercel from "solid-start-vercel";

export default defineConfig(() => {
  return {
    plugins: [solid({ ssr: true, adapter: vercel({ edge: false }) })],
  };
});

import solid from "solid-start/vite";
import { defineConfig } from "vite";
import vercel from "solid-start-vercel";

export default defineConfig(() => {
  return {
    plugins: [solid({ ssr: true, adapter: vercel({ edge: false }) })],
  };
});

I would love to know what is happening, since there's no errors that are being thrown by my editor, not sure of where to start...

3 replies

Gaming

Programming