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

I have a global store

export const [dataStore, setDataStore] = createStore({ some: "data"})

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

SolidJS•3y ago•

8 replies

average tea enjoyer

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

I have a global store

export const [dataStore, setDataStore] = createStore({ some: "data"})

export const [dataStore, setDataStore] = createStore({ some: "data"})

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>
)

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads