Samual 🦢 Posts - Answer Overflow

Topics

Samual 🦢

•Created by Samual 🦢 on 9/19/2024 in #support

modern equivalent of `createRouteData()`

I'm in a solid start project and am looking for the modern equivalent of createRouteData(). I used to be able to use it have data that was refetched after a form was submitted. the closest modern equivalent I can find is cache() and createAsync() but that is very overkill and has an annoying (in this use case) feature where it caches for 1 second which means if a user is rapidly clicking a button which is rapidly submitting a form, changes can only be observed once a second rather than as soon as the user clicked. Thanks.

11 replies

•Created by Samual 🦢 on 1/17/2024 in #support

how do you get a route to respond with an http header?

docs are very vague on this

6 replies

•Created by Samual 🦢 on 1/11/2024 in #support

am I using <HttpHeader/> correctly?

I setup a new SolidStart project withpnpm create solid and selected the basic option. I modified src/routes/index.tsx to add <HttpHeader name="x-foo" value="bar"/> like so:

import { Title } from "@solidjs/meta";
import { HttpHeader } from "@solidjs/start";
import Counter from "~/components/Counter";

export default function Home() {
  return (
    <main>
      <Title>Hello World</Title>
      <HttpHeader name="x-foo" value="bar"/>
      <h1>Hello world!</h1>
      <Counter />
      <p>
        Visit{" "}
        <a href="https://start.solidjs.com" target="_blank">
          start.solidjs.com
        </a>{" "}
        to learn how to build SolidStart apps.
      </p>
    </main>
  );
}

import { Title } from "@solidjs/meta";
import { HttpHeader } from "@solidjs/start";
import Counter from "~/components/Counter";

export default function Home() {
  return (
    <main>
      <Title>Hello World</Title>
      <HttpHeader name="x-foo" value="bar"/>
      <h1>Hello world!</h1>
      <Counter />
      <p>
        Visit{" "}
        <a href="https://start.solidjs.com" target="_blank">
          start.solidjs.com
        </a>{" "}
        to learn how to build SolidStart apps.
      </p>
    </main>
  );
}

I then ran pnpm dev but as soon as I visit localhost:3000 in the browser, Vinxi crashes with the message Error: Cannot remove headers after they are sent to the client what am I doing wrong?

1 replies

•Created by Samual 🦢 on 1/9/2024 in #support

HttpStatusCode not working

is it just me or <HttpStatusCode/> not working? here's the code I'm trying for the route

import { HttpStatusCode } from "@solidjs/start"

export default () => <>
    <HttpStatusCode code={404}/>
    <h1>404</h1>
</>

import { HttpStatusCode } from "@solidjs/start"

export default () => <>
    <HttpStatusCode code={404}/>
    <h1>404</h1>
</>

it seems to just have no effect, I still get 200 in the browser

3 replies

•Created by Samual 🦢 on 1/9/2024 in #support

use server get cookie

hi I'm currently migrating a project from [email protected] to @solidjs/[email protected] which means I'm converting server$() functions into async "use server" functions. I used to use server$.request.headers.get("cookie") to get cookies. just wondering what the modern equivalent of that is. thanks.

3 replies

•Created by Samual 🦢 on 10/27/2023 in #support

mark module or just variable as secret to stop being bundled into client

with colocation I have accidentally bundled stuff into the client that should only be on the server twice now is there a way to mark a module or variable as secret so that when the bundler tries to bundle it into the client, it instead errors out at build time?

3 replies

•Created by Samual 🦢 on 9/7/2023 in #support

set response header from within `createServerData$()` callback

hi how do I set a response header from within the callback of createServerData$()? useRequest().responseHeaders is undefined (despite typescript saying it's always a Headers object) this evaluates to a different PageEvent that is also missing the responseHeaders property I've tried setting the .responseHeaders property with the headers I want myself on both but neither worked my goal is just to set a cookie when the server data is fetched, that's all I want

8 replies

•Created by Samual 🦢 on 8/31/2023 in #support

input elements become empty upon hydration

If I load a page developed using solid start on a slow connection, and enter some text in an input element while the javascript is still downloading in the background, the input element becomes empty as soon as the hydration kicks in this is a very frustrating experience, is there any way to fix it?

4 replies

•Created by Samual 🦢 on 8/15/2023 in #support

how do you set attributes on `<Html>` and `<Body>` from within a route?

this should happen on the server side so the attributes are set before the js is loaded

6 replies

•Created by Samual 🦢 on 6/8/2023 in #support

`ClientOnly` fallback

I found this code for a client that only runs on the client

function ClientOnly(props: { children: JSX.Element }) {
    const [ getRender, setRender ] = createSignal()
    onMount(() => setRender(() => props.children))
    return getRender as any as JSX.Element
}

function ClientOnly(props: { children: JSX.Element }) {
    const [ getRender, setRender ] = createSignal()
    onMount(() => setRender(() => props.children))
    return getRender as any as JSX.Element
}

but how can I get it to render a fallback?

7 replies

•Created by Samual 🦢 on 5/7/2023 in #support

basic progressively enhanced counter not working

In my project I was running into an issue where I was getting the initial state of a variable so I made a minimal reproduction

// src/routes/index.tsx
import { useRouteData } from "solid-start"
import { createServerAction$, createServerData$, redirect } from "solid-start/server"

let count = 0

export const routeData = () => createServerData$(() => count)

export default () => {
    const getRouteData = useRouteData<typeof routeData>()
    const [ _, increment ] = createServerAction$(async (form: FormData) => {
        count++
        return redirect("/")
    })

    return <increment.Form><input type="submit" value={getRouteData()}/></increment.Form>
}

// src/routes/index.tsx
import { useRouteData } from "solid-start"
import { createServerAction$, createServerData$, redirect } from "solid-start/server"

let count = 0

export const routeData = () => createServerData$(() => count)

export default () => {
    const getRouteData = useRouteData<typeof routeData>()
    const [ _, increment ] = createServerAction$(async (form: FormData) => {
        count++
        return redirect("/")
    })

    return <increment.Form><input type="submit" value={getRouteData()}/></increment.Form>
}

when javascript is disabled it always displays "0" and when javascript is enabled, it initially shows "0" and then becomes the number it's supposed to be after being clicked I looked into the produced code and for some reason the count variable is duplicated and in some cases the first one is used and in other cases the duplicate is being used

13 replies

•Created by Samual 🦢 on 4/21/2023 in #support

Are there any semantic or performance differences between `Show` and ternaries?

The docs say:

It is similar to the ternary operator (when ? children : fallback) but is ideal for templating JSX.

But I'm not sure in what way it's ideal for templating, is it talking about just DX or also ideal performance-wise?

6 replies

•Created by Samual 🦢 on 4/17/2023 in #support

can I use solid as just a reactive library?

I'm trying but the createEffect() callbacks aren't running

6 replies

•Created by Samual 🦢 on 4/6/2023 in #support

how do I tell FileRoutes to look for a folder other than `routes`?

I have a solid start node instance handling multiple domains this means I need multiple <FileRoutes/> configured with different routes folders and then on request look at the domain and use the associated <FileRoutes/> for that domain

2 replies

•Created by Samual 🦢 on 4/3/2023 in #support

multiple sites

does solid start support multiple sites (on different domains) but with one node instance? is there a way to tell vite to split the assets folder between the different sites? I'm reverse proxying through nginx in my setup

5 replies

•Created by Samual 🦢 on 3/3/2023 in #support

useServerContext() returns empty object in server$() callback

how come useServerContext() returns an empty object in server$() callbacks?

5 replies