SolidJS•16mo ago

How to pass key into createRouteData function inside useRouteData ?

Is this even possible ? I can't understand the docs

5 Replies

mdynnl•16mo ago

https://start.solidjs.com/api/createRouteData#fetching-data-with-a-key Probably take a look at the docs again

gmnss1917•16mo ago

aren't these params just the url params ? I will try anyway

Carlo Nyte•16mo ago

Replied this in the general channel

export function routeData({ params }: RouteDataArgs<{userId:string}>) {
    return createRouteData<boolean,string>(
        async(userId) => {
        const response = await fetch(`${API_URL}/specialUser/${userId}`)
        .then(res => {
            if (res.ok) {
                return res;
            }
            return false;
        })

        if (!response) return false;

        return true;
        },
    // This is using the userId from the url to create a key for the data
    { key: () => params.userId },
    );
}


export default function SecretPage() {
    const data = useRouteData<typeof routeData>();

    return (
        <div>
            <h1>SecretPage</h1>
            {data.error && <p>{data.error}</p>}
            <Show when={data()} fallback={ <div>User is not allowed</div>}>
                <div>User can see secrets</div>
            </Show>
        </div>
    )
}

export function routeData({ params }: RouteDataArgs<{userId:string}>) {
    return createRouteData<boolean,string>(
        async(userId) => {
        const response = await fetch(`${API_URL}/specialUser/${userId}`)
        .then(res => {
            if (res.ok) {
                return res;
            }
            return false;
        })

        if (!response) return false;

        return true;
        },
    // This is using the userId from the url to create a key for the data
    { key: () => params.userId },
    );
}


export default function SecretPage() {
    const data = useRouteData<typeof routeData>();

    return (
        <div>
            <h1>SecretPage</h1>
            {data.error && <p>{data.error}</p>}
            <Show when={data()} fallback={ <div>User is not allowed</div>}>
                <div>User can see secrets</div>
            </Show>
        </div>
    )
}

As far as I know you can't pass custom keys or signals unless they are top level/ global variables to any routeData function other that the route parameters some/path/[id] and useLocation() but I could be wrong

gmnss1917•16mo ago

yeah, that kinda sucks but okay, I can rearchitect around this thanks for the clarification

Carlo Nyte•16mo ago

No problem. The way I do it is to just use createResource and use the signal as my argument which will fire once the signal is updated And you can have the signal be updated in the onMount function. So it's essentially working the same just done manually plus more control

Gaming

Programming

How to pass key into createRouteData function inside useRouteData ?