SolidJS

S

SolidJS

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

Join

Solid-start/sockets only in development mode

Hi everyone! I'm using Solid-Start and am creating an API route with the following code: ```typescript...

`createAsync` crashing my app

Hi everyone. When I add this second createAsync my app crashes: ```tsx const contactsAndSocial = createAsync(() => getSocialNetworksAndContacts());...

Keeping data and code secure and on the server (restrict code to initial render)

Hi, I have questions regarding SSR & "use server"; What already works: 1. OAuth authentication where the client only has a uuid session but not any of the OAuth keys/tokens 2. When the client fetches a page, server action ... the server resolves the OAuth tokens based on the session UUID...

How to update date object?

I have the following situation: I have an array of date object and I need to update the date by knowing its index. ``` var [days, setDays] = createSignal( [new Date(768523467), new Date(9837465836256)], );...

How does Transition API and createAsync interact?

https://github.com/sabercoy/solid-transition this is a new solid start project with code only added to Home route I don't understand why calling an async funtion inside createAsync causes the signal to be reverted back to as it was before the transition. I expected that setting a signal, even inside a transition start, would keep the new signal consistent with its new value. ...
No description

Retrigger fetcher in createResource on store change

https://playground.solidjs.com/anonymous/52b7a9be-3fe1-406a-8941-a3d0a4959bfe As in the example, if the source argument is the whole store the fetcher in createResource wont run. How can I make it re-run if any of the store's values change...

How to catch all errors but keep rendered component?

In other words, how can I make the child of ErrorBoundary stay rendered and not switch to fallback? Or rather, how I can catch all errors in my solid app?...

How to access cookies with ssr?

I have an app where you log in, which gives you two cookies, sessionId and userId. Then, on page load, I want to use that to show a little log in badge like the attached image, that calls a server function that returns user data, to then be put in the badge. How do I access cookies with ssr?

Unexpected SolidStart Behavior On Vercel. Can You Help?

I have an AuthContextProvider that works on npm run dev but doesn't work on Vercel. I'm lost. Any help would be appreciated. Here's the flow: 1. I'm using a Solid store (createStore) to store auth state....

Hydration mismatch when trying to reference slot element outside of JSX

My component has two optional props leadingElement and trailingElement that expect a JSX element or fragment. I insert them like this: ```tsx {local.leadingElement} // ... {local.trailingElement}...

Context Provider in Layout Component for nested routes in a solid start App is undefined

I have a nested route routes/user/[id] under routes/ folder, I have created a user.tsx file with following code. As per expectation the component is acting as a layout for routes/user/[id], but when I try to access the context using useContext(AppContext), the context is undefined. ...

How Can I Generate A Sitemap?

I'm days away from releasing an SSR SolidStart project that has 150+ pages. I was hoping to dynamically create a sitemap, but I'm not having much luck. I tried this: https://github.com/jbaubree/vite-plugin-pages-sitemap Unfortunately, the docs weren't super clear. I configured all of the settings (shown below), but I couldn't figure out how to generate the actual sitemap....

Inconsistent prop logging between playground and local setup

When I run this code in the playground https://playground.solidjs.com/anonymous/4f22d50d-c034-42c4-8bc5-4b643a06731d the console logs:
Receiver
{staticProp: 'Hello', message: 'Hello'}
Receiver
{staticProp: 'Hello', message: 'Hello'}
...

Possible to define more specific predicated for when prop on Match or Show

Hi, this is kind of a follow up to a previous question I posted that was about Show at https://discord.com/channels/722131463138705510/1280469354387079250, but I thought I would take some time to make more clear what I might be looking for. Basically it seams to me that the api in charge of resolving the outcome of show or switch based on when prop is always using truthy and falsy implicitly so its not possible to specify certain conditions to use for when prop. I think a simple example can explain better....

How to use preloaded data

The solid router docs do not give any example on how to use the data returned from the preload function - https://github.com/solidjs/solid-router?tab=readme-ov-file#preload-functions I don't want to use any wrappers such as cache. In the preload function I'm just doing a fetch call. I access the data as a component prop. It comes as a promise. How do I display that data in the component?...

How do you recommend using SolidStart to access data for native mobile apps?

I'm learning about SolidStart and I'm wondering if I'm making a native mobile app (using Swift) as well, do I need to maintain an API routes file ( POST() { } and GET() { } that calls a javascript function like getPostsFromDB? API Routes doc: https://docs.solidjs.com/solid-start/building-your-application/api-routes...

Environment Variables Missing `npm run start`

All of my environment variables are missing or undefined after running npm run build and npm run start. npm run dev works as expected. Does the build have access to the .env file at the root of the project? If not, how do I access them in the build?...

Best way to get search params in an API route?

Since useSearchParams() doesn't work in API routes, I'm wondering if there's an easier way to get them than what I came up with: ``` export async function GET({ request }: APIEvent) { let searchParams = Object.fromEntries(...

Top level "use server" doesn't seem to work

Hey all, I've noticed that I put "use server" at the top of the file, it doesn't seem to actually treat the functions in the file as server functions, and the actions don't work as expected. I wanted to ask here before filing an issue, as I feel like maybe I am misunderstanding. For example, this seems to work:...

solid-router: navigate(-1) or navigate(path)? How do we know which?

There's a probably not uncommen scenario in routing: you navigate somewhere, then the app has a button to go back. For example, if you're on a home page, and you click a user profile, the back button could just run navigate(-1) and you'll be back at the home page, one entry previous in the browser history. But... what if you didn't start at the home page? For example, what if you copy/pasted the user profile URL into a new tab? It would no longer make sense for the back button to call navigate(-1) because there's nothing to go back to. So in this case it would make more sense for it to call navigate('/'), adding a new entry in the browser history....