SolidJS

S

SolidJS

Solid is a declarative reactive Javascript library for creating user interfaces.

Join

Best practice for fetching data and the transfer data to signals that I can can them in the input fi

import { createSignal, createEffect } from "solid-js"; function UserProfile() { const [user, setUser] = createSignal({ name: "", id: "" }); const [newName, setNewName] = createSignal("");...

Redirect in createResource

Hey, I don't quite understand where to use redirect, thought it was meant to run server-side but doesnt appear to work inside a deferred createResource. What do I need to do to make this work? ```ts import { redirect } from '@solidjs/router'; import { createResource } from 'solid-js';...

Hydration Mismatch with `solid-icons`

I have this component: ``` import { JSX, Show } from "solid-js"; ...

Is `query` cached per request or globally?

Is query cached per request? The documentation doesn't seem clear about it but I'd expect so. Since I'm about to create a getViewer function it's probably best to make sure this is the case 😅

blank page on error

on occasion if there's an error that doesn't pop up in console or on my server, the route will just appear blank, with only the parent layouts rendering. this happens somewhat frequently as i'm newer to solid, and debugging it is a pain. i don't really know how to better explain it than that somewhere in the filetree my components just stop rendering but no errors show up anywhere i can send a screen recording if it'd help, but just wondering if this sounds like a familiar bug or something that others have run into...

Vercel & CORS Problem

Does anyone know how to configure CORS on Vercel with SolidStart? I keep getting...
Access to fetch at 'https://my-vercel-url.app/api/todos/get-todos' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
...

Passing Component in props

I try to generalize the following fragment: ``` <div> <div><label for="nameField">Name</label></div> <div><input id="nameField" ref={nameFieldRef} autocomplete="name" required /></div>...

Using zod to validate env vars

Is there a pattern similar to the one recommend in the React world for accessing env vars only after they have been parsed & checked by zod? Something like this: https://creatures.sh/blog/env-type-safety-and-validation/#validating-environment-variables -------------------------------------...

Pass a named function callback to an old JS library

I have a library that accepts a data-callback="someFn" attribute in one of the elements. Is there a way in SolidJS to create this function at the component level and pass it down to that attribute?

Difference between a nested route layout and just wrapping a route with a <Layout> component

Is there a practical difference between declaring a nested route layout like this: https://docs.solidjs.com/solid-start/building-your-application/routing#nested-layouts and just wrapping a route with a <Layout> component?

Is there a way to trigger a store change manually even it's still the same object?

Here is my case: ```tsx const adapter = await navigator.gpu.requestAdapter()! const device = await adapter.requestDevice()! ...

`React is not defined` error from a Solid library

I'm currently using overlayscrollbars-solid in a work project and for some reason am getting React is not defined. I've not had this error in any other part of our site but where using this library and I cannot for the life of me understand why it's showing up. The issue comes from the library itself (I added a screenshot on where specifically it's showing up) and am wondering if anyone else has encountered this / how I might fix it...
No description

Where to put <MetaProvider>

I want to use <Title> but i need to add this somewhere: ```tsx <MetaProvider> <Title>Website Title</Title>...

Using refs in list rendering

Is there any way to use refs in list rendering? In a <For> or <Index>, I'd like to have an array of refs, or generally a way to retrieve ref to an element in the list by index. I can't find any mention of it in the docs, and given that ref takes a variable or signal, I don't see how to assign a specific array key rather than a hardcoded variable.

Hydration error when using <Show>

Why <Show/> is giving me a hydration error here? i genuinely don't understand why. https://github.com/mrVinxyz/sldify/blob/tmp-docs/docs/src/components/api-reference.tsx...

Route to Escape SPA?

I am wondering if there is a way to specify a route (<Router><Route path='...' />...</Router>) such that it "escapes" the SPA and just loads an html page from the public directory? If so, where can I look for those docs?

API Endpoint Security Question

I'm converting some server functions to API endpoints. With server function, I use "use server" to keep sensitive data like API keys secure. Here's an example. ```typescript...

IoC and support for decorators

Sooo, I was trying to play with inversify to create a light DDD template around SolidStart, but after my first try, I ended up with tons of error. From what I understand, h3 does not support decorators at the moment. I tried to install some babel plugins, without success. Did someone succeeded to use IoC with (or without) decorators? What is your technique?...

Masonry code takes too long to open

I code for masonry but it takes too long to open. I think this code have more calculations to run like height. is it have optimized code? The main problem is masonry creates all HTML elements in the beginning and gets heights. ```Javascript import { createMasonry } from "@solid-primitives/masonry"; import { createBreakpoints } from "@solid-primitives/media";...

how can I colocate components in the routes directory

I have an admin dashboard page, and I have a specific component that’s only useful for those pages. Is it possible to put those components next to the route, or is there a better way? I’m using solid start please ping me when you reply...