SolidJS

S

SolidJS

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

Join

handling (http) errors with createResource

I don't understand how to get hold of the error when using the tutorial examples of fetching REST data. The error is always either empty, or not callable to me ("solid-js": "^1.8.11"). If I take the example from the documentation here and make it work. I shows the fetched data OK, but doesn't handle http404's. OK, I modify the fetchUser function to throw on non-ok: ```typescript...

Redirect on Client

Hi how can i redirect clientside? redirect("/home") doesnt work

Can you use hooks conditionally?

Can you use hooks (like useContext, etc.) in SolidJS conditionally, like after a guard clause, or is it like React, where you cannot? Thanks....

use createMemo outside a component

is it correct to use createMemo outside a component function? Can I use it in a util file? `const getDataFromFirebase = (dataToFetch) => { try { if (firebaseDetails && Object.keys(firebaseDetails || {})?.length) {...

Deploy

Hi everyone I'm deplyong my first solid start website, but the data seems to be static. I change it on the Sanity CMS, but when I come to the page the data remains the same. Any idea how to solve it?...

is solid-start dev server broken?

I have been dealing this for quite a while, sometimes in dev solidstart would just not load components that were imported in the root layout passed to router. I would need to do multiple hard refreshes or restart the dev server. the component body always run but no render happened or any effects inside the body run. build has no such issues and it always loads all components correctly repo for reference: https://github.com/vanillacode314/kanban...

Cache-Busting with solid.js

I have a CSR SPA, where the contents sit in static webstorage and the solid.js site is rendered on the client side. E.g.: ```js export default defineConfig({ ssr: false, server: {...

What is the timeout of 'use server' functions?

Context: I plan to use long polling in an app I couldn't find any documentation on how to control timeouts for server functions. How should this be handled?...

Cache server variable separately in db, server, front-end

So I have the idea to be able to "lock" my database for maintenance I sometimes do offline. My idea is thus to have a "locked" setting in a persistent settings table in my database. On startup, the server should read this setting and set a server-side variable based on it, let's called it isDbLocked. I would then like the front end to be able to read this server-side variable to disable some UI elements. An admin should then be able to change this variable through the UI. Which in turn tries to update the database. If successful, it updates the server-side variable, and thus the front end too (maybe makes a new explicit request here to update it). ...

permission and groups

Is there a package for this functionality ? I want to have groups and permisions for users...

[BUG?] Router: `isRouting()` immediately returns `false` when transition is not completed

Hey guys, I noticed isRouting changes immediately from true to false if transition happens on the same page (for instance, when I change query params and createAsync looks at these params), so isRouting becomes false when there's no new data yet. Is it intended behavior? isRouting works as expected (waits until the data comes) when the route is changing. ```tsx // pseudo code: const isRouting = useIsRouting();...

Solid Router - Lazy import section of site in one bundle / lazy add routes

I'm using the Solid Router and have sections of the site that are "First Time Users" or "Settings Pages" that are big pieces of the site but I'd like to lazy load them as one bundle. Is there a way to section off the Routes so const FTI = lazy(() => import("./pages/FTI")); <Route path="/fti" component={FTI}> ...

Help with creating a builder pattern for main renderer

Wasn't sure how to fully articulate this but I want to have a class that lets me "build" the nested component structure that eventually gets passed into the render function. I think I have it working with runtime behavior, but the type definitions aren't quite right and was hoping I could get some feedback on it. Implementation ```tsx...

Export variable

const [next, setNext] = createSignal(false); export {next} If I export a variable like next it's exported as promise How can I export variable like a variable?...

Solid Form

Hi everyone I'm trying to use solid-form for the first time, but I'm facing this error: ``` [vite] Error when evaluating SSR module src/routes/contactos.tsx?pick=default&pick=$css: failed to import "solid-forms" |- /node_modules/.pnpm/solid-forms@0.4.8_solid-js@1.8.19/node_modules/solid-forms/dist/public-api/index.module.js:1...

Override component events

TLDR: I used onContextMenu in a lot of components. Is there anyway to override and apply custom logic to that event without changing much code?
<div onContextMenu={...}></div>
<div onContextMenu={...}></div>
On Chrome Mobile, the onContextMenu event fires when you press and hold on an element. on Safari mobile, It doesn't work, so I have to apply custom logic. But currently I have a lot of components where I have already used onContextMenu. Is there anyway to apply custom logic to onContextMenu without changing much code?...

Mutate a Resource after fetch efficiently when using <For>

Here's some "pseudo"code: ```tsx const [files, { refetch, mutate }]: Resource<File[] | undefined> = createResource(async () => await retrieveFiles(/* some path */) );...

Hydration problem in Solid Start

In the following code, I'm using Tanstack Query to fetch some data needed to render a form. When I navigate to the page using client-side navigation (by clicking a link), the form is not visible. It is, however, present on the DOM, but without hydration keys. If I then refresh the page, the form becomes visible, and its elements in the DOM get hydration keys. Any idea what's causing this?

JSX onWheel not being called.

onWheel isn't called unless I explicitly attach event listener on the element: https://playground.solidjs.com/anonymous/f33af3c6-8637-47be-85da-7c6f8c5e8e73 When onMount is uncommented both listeners get triggered....

server functions and ssr, how to get client headers during ssr when calling server functions

I need to get a token from the cookie, everything works greatly as long as the client is calling the server functions but if ssr is triggered and the server makes the calls then the headers are not forwared, what is the best way to achieve this?