SolidJS

S

SolidJS

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

Join

TanStack Query vs Solid Router

I'm looking to use Solidjs for a production app and have a question about a library I typically reach for (TanStack Query) for my SPAs and some of the built-in APIs for Solid Router: query + createAsync. Is there any reason to use TanStack when Solid Router comes with those built-in? Just wondering if there is something I'm missing because, the query + createAsync combination if I'm not mistaken provides a lot of the same benefits that TanStack does with request de-deduping and caching by key. Wondering if there are other gaps present that I am not privy to (e.g. easy request refetching/polling on interval or conditional fetching like the enabled field from TanStack Query). For the visually inclined -- the question is what is the recommendation between these two options and the pros/cons of each:...

[astro-island] Error hydrating /src/components/SignUp/SignUpForm.tsx TypeError: conds[i] is undefine

How do I debug an error like this? The SignUpForm is an astro island with client-load (no difference when using client-only though)...

`scroll` event emitted until end reached when scrolling lazy-rendered table

I'm currently working on an app which displays a lot of data in a table that often has thousands of rows. To reduce the time spent while rendering the table I wanted to make it lazy-rendered so it just renders the rows in view and adds padding before and after the elements to correct the scroll position. The solution I came up with does just that but for some reason it keeps emitting scroll events when starting to scroll down until the end is reached, even when just increasing scrollTop by a few pixel and no manual scrolling at all. This doesn't happen when scrolling up for some reason? I created a minimal example that has the same behaviour like in my app here: https://playground.solidjs.com/anonymous/239274a9-b2f9-4c66-bb52-f9d69d40845f I know there are more performance improvements available but this would make the example just more complicated....

@solid-mediakit/auth

I am trying to use @solid-mediakit/auth . But I keep running into this error when trying to create a protected route.
5:35:31 PM [vite] Error when evaluating SSR modulesrc/routes/protected/index.tsx?pick=default&pick=$css:
|- TypeError: __vite_ssr_import_10__.query is not a function
5:35:31 PM [vite] Error when evaluating SSR modulesrc/routes/protected/index.tsx?pick=default&pick=$css:
|- TypeError: __vite_ssr_import_10__.query is not a function
...

How does `query` cache actually work?

Caches are tricky and the docs do not explain the usage details, here are some questions: - When is the cached value invalidated? - Why do I want to use this cache? - When could I run into issues with stale data by using this cache? ...

Any way to redo this logic without an infinite loop?

I have a page where I'm getting data from a createAsync and then dynamically rendering this in a <Show/>, however, to get the data to get guaranteed instead of possibly undefined I have to use the render prop, which goes into an issue shown here: https://github.com/solidjs/solid/issues/1149. Essentially I cannot use a <For/> loop inside this, as I get an infinite loop - I have to use an <Index/> loop. Is there some other way to do this pattern or am I basically stuck using <Index/>? T...
No description

Solid Start Vinxi complaining about public and can't resolve public fonts

When I define my font faces and reference the actual font files like so:
url("/fonts/open-sauce/OpenSauceOne-Black.woff")
url("/fonts/open-sauce/OpenSauceOne-Black.woff")
It does not complain but when building it will state it can't resolve it....

Solid Start HMR not rebuilding styles on class change

Use tailwind 4.0, change class of JSX component while dev server is running, HMR reloads component but tailwind is not rebuilt to actually style the class How could I fix this? In vite config?...

Why is this code not reactive?

I have a TextField component that passes down information via context. Picture shown below. I am using @felte/solid as my form library. I'm trying to set validationState based on if there is an error in that specific value, however the code (show below) is not reactive and I'm not totally sure why. errors() is reactive and errors().scenarios seems to be reactive, and the div with the Errors: {errors().scenarios?.[i]?.name?.[0]} seems to work fine, so I can't totally understand why the vali...
No description

Best Practices for Handling Errors in a query-Wrapped Server Function

Hey everyone! I’ve been working with SolidStart and have a question about error handling and display strategies for server functions wrapped in a query. The example below is inspired by one of the official SolidStart examples: ```ts export const getUser = query(async () => { "use server";...

How to use server function & suspense

I will be frank, I have some experience with React but this is my first dive into Solid coming from Astro I'm trying to have a fallback loading component, that is replaced by data fetched from the server when available I figured the best way to do this was an asynchronous server function, I am not claiming there is a bug I think I just did something wrong Here is my high-level code since I can't really share more: ```jsx...

Have anyone gotten ts particles to work in solid?

https://github.com/tsparticles/solid I've tried implementing the example they give, but it does not work....
No description

Old client after server update

What's the best way to handle an old client trying to request an asset or API that no longer exists after the server has been rebuilt and redeployed? The current behaviour of my SolidStart app is that the client crashes and in my <ErrorBoundary> I have a fallback that shows a link that takes them back to the web app by doing a full page reload (I make sure to have target="_self"). Ideally, I'd like to be able make the client automatically reload the page if it detects the server has been updated. If it could do this page reload during a navigation most user's would hardly notice it. Thanks....

Seeking Insights on SolidStart Server Function Issue

Hi everyone! I've encountered a strange behavior in a SolidStart project involving server functions and page refreshes. I've detailed the issue, steps to reproduce, and provided a demo repo and code examples here: GitHub Issue. If anyone has insights or suggestions, I'd greatly appreciate your input!...

How to set up a vite dev proxy with Start and Vinxi?

I am trying to figure out how to migrate a dev proxy for api requests in solidstart. I have a working config just for a normal solidjs app which looks like the following in vite.config.ts ```javascript import { defineConfig, loadEnv } from "vite"; import solidPlugin from "vite-plugin-solid";...

solid styled starter template(solid-start) bug

It is showing the whole style tag in browser along with applying it. I have attached the screenshot too.
No description

useParams not updating with urql's createQuery

Currently refactoring a svelte project to Solid. I'm unable to get params to update inside the createQuery() call when you change the dynamic path (ie same route but different fst), which uses urql's solid library. I've tried multiple different variations of making params reactive and none of them seem to work. As you can see in the svelte snippet there, I had to make it derived state so it would update, but the equivalent of const derivedParams = () => params doesn't seem to work. Any thought...
No description

Suspense not getting triggered although I am accessing the result of createAsync in my components

``` <Suspense fallback={ <div class="flex-1 items-center justify-center"> <DottedLoader color="#999" from="checkout suspense" />...

How to share async data inside a context

I'm currently refactoring a website from Sveltekit -> SolidStart. I'm currently working on the layout for our dashboard As you can see in the sveltekit layout, I request some data via a graphql client I wrote that is then available that is then available in the load for any child routes as a typed object. Very nice feature. Obviously you would do this with a context in Solid. You can see the code I currently have which gets the data for the sidebar, based on https://docs.solidjs.com/guides/fetching-data#calling-multiple-async-events, but it's not currently set up to have that data be in the context. I tried refactoring the createQuery (urql/solid package, under the hood it's basically a createResource) to be inside a context but it didn't seem to want to be reactive. Any knowledge of how to do this correctly so that it updates when the data is loaded/I don't have any hydration issues? The context documentation only showed examples with local state....
No description

onLoad event doesn't trigger

Hello everyone. I ran into the issue, that the onLoad event on an <img> does not trigger. Here is the code in question: https://stackblitz.com/edit/github-a9ukgq-25tgxa?file=src%2Fpages%2FHome.tsx,src%2Fcomponents%2Fcomp.tsx,src%2Fcomponents%2Fcomp.css...
Next