SolidJS

S

SolidJS

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

Join

Solid-Start error when using fetch/axios/ky to call to external service SSR

Hi I'm new at Solid-Start. Currently, I'd like to call to external API. I try to use all of fetch/axios/ky but all of them returned error. For detail: 1. If I call API inside onMount() it can work as normal. ...

Current User Items Cache

- I have a page in my solid start project called /contracts - My goal is to get the current users contracts on this page - My original solutions was like this in the contracts.tsx page: ...

Does store setState check for equality before updating signals?

Does it make sense to manually check if a value is actually different before running setState/setStore? I mean, are reactions run even if the value is the same as it was before? If not, does it make sense to make like a helper function, which wraps setState in an if block, and only runs it if it's actually needed? Of course it wouldn't work on functions, etc. passed in, but I'm talking about basic cases, like setting strings or arrays of strings....

tanStackQuery/Solid/Astro

Greetings! I don't understand why it's generating two fetches when I render this component. Any ideas? It's supposed to do just 1 fetch, not 2 T.T
No description

Getting hydration error

Can someone help this is my first time using solidstart
No description

Update array of signal by index, it does unfocus on typing

When i type a letter on the input it loses focus trying to update and arr based on index. ``` <For each={names()}> {(name, index) => (...

Second component instantiation has no owner when under vinxi start in a npm linked component

Anyone tried linked components? I have a reproduction where getOwner() goes null and this happens in an application I'm upgrading from solid-start 0.3.11 (worked under pnpm link). Seems like this would be something in vinxi, but I'm not sure. Could there be an issue in Solid-Js?
https://github.com/nksaraf/vinxi/issues/473 I'm simply using npm i --save ./cmp which saves the folder as a file link "file:cmp" in package.json. Then (in the reproduction), I installed solid-js in cmp and create a component that logs getOwner() and then I included that component in the parent solid starter route/index.tsx....

I'm struggle with createResource

```tsx import { createResource, createEffect } from 'solid-js'; function YourAssignments(props: { me?: typeof users.$inferSelect }) { // Fetch data using createResource...

Passing a component as a context value

I want to implement a dynamic sidebar which can show different content based on where you are in the component hierarchy. To achieve this I was trying to use the context API to supply the sidebar content. My goal was that descendants could either provide their own sidebar content or use one defined higher up in the hierarchy. ``` import { RouteSectionProps } from "@solidjs/router"; import { SidebarNavProvider } from "~/lib/shell";...
No description

vxini seems to be packaging and shipping all server code to the client

I'm trying to upgrade from solid-start 0.3.11 to the latest @solidjs/start. My smallest page load went from 1MB to 63MB. Under the browser's source tab, I can see that vinxi dev seams to be sending every JavaScript file in my project, probably even code accessed only from "use server" functions (although I can't be 100% sure yet). I understand I should wrap code in isServer conditions which, prior, I only used when necessary and I'm confused why there is such big change to cause so much code to load. This is all in one page load as well. Adding more isServer functions for tree-shaking will be a lot of changes, I would like to know a bit about what is going on first and make sure I'm doing everything I can using app.config.js. The first thing that raised a red flag was all the rollup warnings about externalizing many node packages which mostly went away when I added rollupOptions.external: [/^node:/] .. How did solid-start 0.3.11 know not to import all of the node packages without this external pattern? Is there something I can do or something I can disable to get things running more like solid-start 0.3.11 so I can slowly transition into more of a isServer tree-shaking approach? It seams that 0.3.11 was doing a better job, although I'm sure there are good reasons for changing this. But with 0.3.11 I never encountered any issues with missing client-side code. Thank you for any insight that would help me better navigate how to tackle this one!...

How to avoid page flickering when asynchronous resource updates

Hello everyone, I'm a beginner with SolidJS. As shown in the code in the image, I want the page to update when item changes. Currently, when I click a button, the page immediately turns blank until the new data is fetched, and then it reappears. I want the page to stay as it is during this time instead of going blank. How can I achieve this?
No description

Prevent queries revalidation if error in action

Hi. I'm a little lost with the revalidate function. Is it a server or client function ?...

Trying to implement Wrappy bot for my product

Hello we deep dived in your GitHub for wrappy bot can you guys please help us in it's implementation

Nesting server side functions in namespaces or any kind of block of code.

Is there any way to make nested server functions for example I would like to have an namespace called Users and then I could use .all() or .query() server-side function. It would make my code much cleaner after all. I tried to implement the namespaces like so: Library database code src/lib/db.ts...

How to test for is loaded for a create async source change

In the real world example there are these methods that loads some async data: ```tsx loadArticles(predicate) { setArticleSource(["articles", predicate]);...

Error in production only: <A> and 'use' router primitives can be only used inside a Route.

This is really weird one. Using vite + SolidJS on the latest versions. The error occurs only when serving a production build. Dev works fine. I've been banging my head on a wall trying to figure this out. Any debugging ideas? It's in a very complex app so somewhat hard to debug by elimination or reproduction although I will attempt a repro today. Possibly helpful to say production builds were working on my local machine but showed this error when deployed after being build in Docker. Seeing this, I rm -rfed node_modules and reinstalled, which made my local behavior match the deployed (showing this context error)....

Why is this store change doesn't trigger a reactive computation

It looks like this: ```tsx // Reactive state store that can update UI const [state, setState] = createStore<StoreState>({ current: { state: 'boot' },...

Making a custom graph reactive

I am building a custom rendering graph which then gets serialized and rebuilt in a web worker. I would like to keep the graph logic as decoupled from Solid as possible so I could easily reuse it outside of SolidJS. The graph is composed of nodes which have some options that can be changed. I'm using SolidJS for rendering a UI for these options so that they can be passed to the rendering graph later. The graph itself already has an internal update function that can be bubbled up. Basically what I want to achieve is that whenever a graph node is changed (usually through the solid component), the component triggers a full rerender of the control component. I know I'm losing fine grained reactivity here, but that's fine for my usecase. Does anyone have any ideas on how to achieve that? Here's some pseudocode to make it clearer (don't worry about any errors here) ```ts...

Spooky behaviour while deploying in production

Hi everyone, I'm having a hard time to deploy solid start. I'm using docker on a VPS, and from one deployment to another, the bundled assets are sometimes corrupted. I noticed two strange behaviours so far: 1. Some bundled assets seems incomplete...

beta docs for solid-start 0.3.11

Where is the github source code for solid-start 0.3.11 [beta]?