[SOLVED] Solid Router v11 + TanStack Query issue
I'm migrating my app's solid router from v0.8 to v0.11 (currently the latest version). I'm having a problem making it work together with TanStack Query. Previously, I had my TanStack Query calls inside of route data functions. Now, when migrated to the load functions, when I hover over the component that sends you to the next route, I get the error from TanStack Query: "No QueryClient set, use QueryClientProvider to set one". It seems that TanStack Query is not initialized in the load function. I've also tried wrapping the Routes component with the client provider, but I get the same error.
Thanks to all for reading! If anyone has any suggestions regarding this issue, I'd appreciate it.
App + Router component:...
confused about primitives(useEffect,on,createComputed)
I‘m trying to create a primitive for synchronize the search params with signal. I tried different methods, all of them works as expected. I started to think of the apis and got confused.
createEffect in this case run twice
createEffect with on run once
createComputed run twice
...SolidStart Vercel deployment issue with CSR
Hi !
When I go to the website page, it just downloads the HTML with no file extension, nothing is shown in the browser.
When I go to
/__nitro though, I can see stuff but nothing shows up too, probably because I don't handle 404 yet....solid-element docs or examples
Hi all. Looking for some documentation on solid – element. I’ve got a small demo app working now want to convert the components to custom web components with solid element. I’m currently getting an error that says “custom element cannot be invoked without new” and I think there’s just something fundamental that I’m missing; however the repo and NPM entry for solid element. Don’t give many examples.
Prevent re-fetching resource after pageload with SSR setup
I have a resouce that I'm fetching in an SSR application.
```ts export function getRawArticle() { return createResource<RawArticle | null>( async () => {...
```ts export function getRawArticle() { return createResource<RawArticle | null>( async () => {...
Error running Jest - testing
I'm working on a Solid.js libary, it uses internally a dependency called @wagmi/core but I'm getting this error
```sh
C:\Users\Glitch\Desktop\wagmi\solid-no-bun\node_modules.pnpm@wagmi+core@2.6.3_react@18.2.0_typescript@5.3.3_viem@2.7.2\node_modules@wagmi\core\dist\esm\exports\index.js:4...
How to handle necessary async/await work inside of a createEffect?
I'm building a SolidJS hook library and I have some asynchronous work that needs to happen which is occurring in a
createEffect. I'm currently trying to write integration tests against my hook library and running into problems because I'm currently not awaiting the Promise result which is conflicting with other things occurirng in test. The way I work around it for testing purposes is literally doing an await sleep(1000) in test to wait for that asynchronous work to finish.
Is there a better way to write my createEffect in such a way where I do not have to do a sleep in test?
```tsx...useNavigate causes Make sure your app is wrapped in a <Router />
Hi guys,
new to frontend dev and started with solidjs. Now I'm stuck at trying to use useNavigate and don't know what I'm doing wrong.
Error message: Make sure your app is wrapped in a <Router />
...
Better stacktraces when using SolidJS via a library?
Whenever an error occurs within a SolidJS component library, the stacktraces are extremely cryptic. I'm building the library via tsup-preset-solid
I've got
"sourceMap" is enabled in the tsconfig...
createResource doesn't seem to be catching errors.
I have been at this for a while now and can't figure it out. I am calling a fetcher from a createResource, the fetcher does a pretty basic fetch(URL) request for which I have purposefully brought down the backend server. As a result I get a timeout on the HTTP POST request, which results in a TypeError, but that error doesn't seem to result in data.error (data is the name of the resource I created) to be set at any point.
I've tried to handle the eror by using Promise.reject in a .then(...).catch(return Promise.reject("it failed')) I've also tried to just let the erorr happen, or tried something like if (!response.ok) then {throw new Error("It failed")} bt none of these solutions seem to yield data.error being set.
I inspired myself to an extent from this article, https://www.thisdot.co/blog/how-to-handle-async-data-fetching-using-createresource-in-solidjs which makes it sound real easy but doesn't seem to apply to my problem....
How to use ref both inside and outside(parent) component?
I have parent component with this code:
```tsx
return (
<div>
<div class="grid grid-cols-2 border gap-2 mx-auto min-w-[420px] max-w-[840px] px-4">...
Hi, with latest solid starts ssr title and meta are disappearing and google sees them as empty..
Could you please kindly point me to the solution if it exists?
How to handle auth with solid-router?
Given an app where users have access to additional routes when they are logged in, how to set up the router so that it,
- redirect users to "home" if they are logged in and happen to navigate to the login or signup page?
- redirect users to login page when visiting a route that requires authentication but they are not logged in?
...
Hydration issues when using props.children inside component
```js
return (
<Router
root={(props) => (
<MetaProvider>...
vite:css and postcss creating errors on SSR ?
```
10:56:50 PM [vite] Internal server error: Attempted to assign to readonly property.
Plugin: vite:css
File: /workspaces/motu/node_modules/@solidjs/start/shared/dev-overlay/styles.css
at <anonymous> (/workspaces/motu/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:38958:18)...
Placement of Context Providers and Routes (Router 10.10)
I have an existing application which uses several context providers for sharing data between routes. My question is where do I place the context providers in relation to the route definitions using SolidJS/Router v10+. Is it acceptable to put context providers above the
<Router>?
Environment: Electron/SolidJS, <HashRouter>
The Solid Router docs state: ...Imported unused variable for a directive seems awkward
I've went through the SolidJS tutorial (https://www.solidjs.com/tutorial/bindings_directives?solved) and saw that the imported directive function is just "hanging" there. I understand the bindings and directives are just syntactic sugar and behind the scenes its actually not "hanging".
I was wondering if this is something that I should care about, should I be worried or is this going to be something that I should get used to?
Preferably I'd be happy with something other than
true && insertDirectiveFunctionName to get around it....Vitest support
I was hoping to migrate my TypeScript and SolidJS project template from using Jest to Vitest for a nice little speed boost and to reduce my number of dependencies, but I'm encountering some errors. I'm trying to find out what I'm doing wrong, or if Vitest support just isn't fully baked yet.
I've got this on a GitHub branch here: https://github.com/mikefarquhar/typescript-solid-application/tree/vitest_testing
I'm using Node v20 and NPM v10.4.0
My package versions are up-to-date in the lockfile as of the time of writing so I don't believe I'm seeing issues with out-of-date package versions. ...
Escape Suspense when using resources?
Is there any way to escape
supsense when using createResources? or am i pretty much "doomed" once i have one suspense boundary at the top of the tree?
What i mean by "escape" is to not trigger the suspense to fall back.
Playground:
https://playground.solidjs.com/anonymous/1a49076e-e6b1-4577-962d-3098c3263eea...Circular references in Stores?
Hi again, Solid community! Coming with another new person question 🙂
Is it possible to have circular references in Stores?
I created a Playground which seems to indicate that it's not: https://playground.solidjs.com/anonymous/8f07d9c2-54da-43e9-8e08-88393f446bca...