Karl Posts - Answer Overflow

Karl

•Created by Karl on 7/19/2024 in #support

changing route with useNavigate() causes onMount() of the child route to be fired twice

Hey, i have a problem that i cant wrap my mind. When i load my Route in a new window/tab or with F5 the onMount() function of one of my children is only fired one. But when i use useNavigate(), then onMount() gets fired twice. Why could that be? I am working on replicating the bug.

4 replies

SSolidJS

•Created by Karl on 3/3/2024 in #support

use directive typescript error

When i try to use the use: directive i get the error

Type '{ type: string; placeholder: string; value: string; "use:test": true; oninput: (e: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement; }) => void; }' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'.
  Property 'use:test' does not exist on type 'InputHTMLAttributes<HTMLInputElement>'.ts(2322)

Type '{ type: string; placeholder: string; value: string; "use:test": true; oninput: (e: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement; }) => void; }' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'.
  Property 'use:test' does not exist on type 'InputHTMLAttributes<HTMLInputElement>'.ts(2322)

I tried to put

declare module "solid-js" {
  namespace JSX {
    interface Directives {
      model: [() => any, (v: any) => any]
    }
  }
}

declare module "solid-js" {
  namespace JSX {
    interface Directives {
      model: [() => any, (v: any) => any]
    }
  }
}

into types.d.ts but then it would not recognize any of the other solidjs imports

11 replies

SSolidJS

•Created by Karl on 3/3/2024 in #support

Struggling to understand the correct way to use createResource with a store

I have a global store export const [dataStore, setDataStore] = createStore({ some: "data"}) , which should get populated with data fetched from my api. In one of my components i want to automatically renavigate to another url if there is an error from the fetch request as the component cant be displayed correctly. For this i wrote this:

const [data, setData] = createResource<any, any>(fetchData)

    createEffect(() => {
        
        if(data.error){
            navigate('/devices')
        }
    
        setDataStore(data())

    })

const [data, setData] = createResource<any, any>(fetchData)

    createEffect(() => {
        
        if(data.error){
            navigate('/devices')
        }
    
        setDataStore(data())

    })

return(
        <Show when={!data.loading}>
          <myComponent/>
        </Show>
)

return(
        <Show when={!data.loading}>
          <myComponent/>
        </Show>
)

I realize i shouldnt use setDataStore in the createEffect(). What is the correct way to: 1. wait for the response from createResource() and display the component on success or renavigate on failure 2. populate the dataStore with the data returned from the request after createResource was succesful

9 replies

SSolidJS

•Created by Karl on 2/21/2024 in #support

solid-router without SSR and without having to redirect

I just found out that when i build my app with solid-router its only possible to visit the index page on first page load. I saw the section in the readme.

When deploying applications that use a client side router that does not rely on Server Side Rendering you need to handle redirects to your index page so that loading from other URLs does not cause your CDN or Hosting to return not found for pages that aren't actually there.

I havent anticipated that and i need the users to visit a specific route of my app (as it is possible in vite dev mode) . Do i need do use server rendering and solidstart for this to be possible? Is it possible to prebuild the routes for deployment?

6 replies

Gaming

Programming