Await resolution of previous routeData in nested routeData
I have a route that fetches some data.
```tsx
export function routeData({ params }) {
return createRouteData(async (key) => doMyFetch(key), { key: () => params.id })
}...
How can I circumvent the wrapping Router requirement error?
I have a ui library that lives in a monorepo with my core application. I'm structuring a lot of component in the ui package so that it can be shared across projects. I have a header and footer inside that library that wants to use utilities that require solid-router ie. <A> specifically.
Since UI isn't directly wrapped in a router context it errors. Curious to know if anyone has any suggestions to get around this and ship the components without that will eventually be used within a router context?...
Route Data to Pass Signal to Children Components
Hi. I'm trying to pass a signal from a great grandparent to a its great grand children.
In (home).jsx I have this:
`const [selectedFont, setSelectedFont] = createSignal('inter')
export function routeData() {...
Ref either locally or passed via prop
I have a TextField that requires a ref to an input field.
```tsx
let input: HTMLInputElement | undefined
return <div onClick={() => input?.focus()}><input ref={input} /></div>...
[solved] Tutorial: server side routing for remote API call with keys
Hello. So, my app is coming along and I'm ready to start requesting APIs at openai.com.
Can any one point me to a good tutorial that explains, and shows, how my browser code can call a server page that will actually make the API call and return the data to the browser. Currently I'm calling APIs with Supabase. I plan on hosting with Netlify. Thanks for any suggestions....
Can any one point me to a good tutorial that explains, and shows, how my browser code can call a server page that will actually make the API call and return the data to the browser. Currently I'm calling APIs with Supabase. I plan on hosting with Netlify. Thanks for any suggestions....
does @solidjs/testing-library render shadowDom?
I'm trying to write unit tests for a custom element that wraps some elements inside a shadow DOM. The inner HTML of these and the shadow root's inner html doesn't include them even though they're available in browser. Does anyone have a workaround?
Routes and FileRoutes
Hello!
I'm new to Solid and I had some questions about Routes.
I followed what was written in solidStart, but I still have some questions about FileRoutes.
For example, is it possible to create a custom Layer for some pages and still using FileRoutes ?
...
Question about Contexts
In react a common pitfall with contexts is causing unnecessary re-renders to everything subscribed to any piece of the context state, including those just using the methods. (unless you carefully designed the context)
Is it safe to assume(/correct to say) that solidjs' contexts are inheritly safer and easier to use since components don't rerender like react and we then only need to worry about using signals/stores adequately?...
Props/Default Defaults
The tutorial example at https://www.solidjs.com/tutorial/props_defaults does not seem to behave any differently before and after being solved. What is the difference?
Parent setting prop to child with Context?
Say I have the following component:
```jsx
<ToggleButtonGroup onChange={handleToggleChange}>
<ToggleButton id="key">
Foo...
Solid-Primitives Key compatible with 1.7 beta (types)?
Hi, wondering if anyone has tried using https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyed#Key together with solid-js@1.7.0-beta.0.
After updating getting when using Key....
'Key' cannot be used as a JSX component.
Its return type 'Accessor<Element[]>' is not a valid JSX element.
'Key' cannot be used as a JSX component.
Its return type 'Accessor<Element[]>' is not a valid JSX element.
Pass data from Express up to Solid
I have already install and run
npm run build, How can I pass data from express to solid just as how I would do it for EJS or Handlebars???Does anyone else find it annoying that you can't pass a store as a source signal for createResource?
I have a complex request to pass into the body of a POST request to an API. It has many different nested properties of various depths. I store the request in a solid createStore in the app, so I can efficently set it thoughout my app. But to make this system reactive, so Solid refetches content you have to pull off indvidual signals. I had to build a
recursiveFlattener helper function to make it work so if I change any property in the request it refetches. Am I doing something wrong or is that annoying to anyone else. Shouldn't it be something that the compiler can take care of?
Also, maybe a separate post but what's the right way to diff the large response from the resource in the right way? I see helpers like reconcile do I need that? Is there a better example than the docs? What if I needed optimistic updates? What if I need to do an infinite scroll like twitter? Just use solidQuery?...Eslint, am I doing something wrong?
```js
const ToggleButton: Component<Props> = (props) => {
const [local, others] = splitProps(props, ["toggled"]);
const [toggle, setToggle] = createSignal(local.toggled);
...
CreateEffect has infinite loop
So I am having an infinite loop issue with an effect that I am trying to figure out how to handle without having to resort to
createReaction() since I find those are less than ideal to work with but maybe that is the only SingleInFormAutoShowOptions.
I have this code:
```ts...createResource returning undefined when data is fetched
I'm just learning solid and did something like a hook? maybe? dunno.
Anyways, I'm just calling
createResource with a fetch on it and returning it's json.
But, for any reason, that fn is returning undefined, even when the data is properly fetched("tested" by logging the json)....[solved] Brain fart: in need of fresh eyes
I just can't seem to access the results outside of the function in my returned jsx. Hoping to loop and create
<option value={item.id}>{item.name}</option>
Thank you in advance....
[Solved] Reactivity problem when refreshing the page
I've got a route, where I'm fetching data with server$ function, which sits inside createResource and it works fine, when I'm navigating. But when I'm refreshing, I can see that it fetches on the server, but Resource doesn't get updated on client side. What am I doing wrong?
```typescript
const [data] = fetchFolders();
createEffect(() => console.log(data()));...
Is Static Site Generation possible with SolidJS?
I want to know if it's possible to implement ssg with SolidJS without SolidStart? Any libraries etc.?
Thanks...