Carlo Nyte Posts - Answer Overflow

Carlo Nyte

•Created by Carlo Nyte on 6/19/2024 in #support

Context providers inside <Routes> don't provide context values to routed content - Issue #273

This works:

<FooProvider>
  <Routes>
    <Route path=... component=... /> // the elements have access to context values
  </Routes>
</FooProvider>

<FooProvider>
  <Routes>
    <Route path=... component=... /> // the elements have access to context values
  </Routes>
</FooProvider>

This doesn't:

<Routes>
  <FooProvider>
    <Route path=... component=... /> // the elements don't have access to context values
  </FooProvider>
</Routes>

<Routes>
  <FooProvider>
    <Route path=... component=... /> // the elements don't have access to context values
  </FooProvider>
</Routes>

The solution that Ryan had provided here worked with solid-router 0.9.x but now with version 0.10.x it no longer work since <Outlet /> component and the element attribute no longer exist.

<Routes> <AuthRoutes /> <FinanceRoutes /> <CalendarRoutes /> </Routes> function AuthRoutes = () => { return <Route path="" element={<I18nProvider namespaces={['auth']}><Outlet /></I18nProvider>}> <Route path=... element=... /> <Route path=... element=... /> <Route path=... element=... /> </Route> }

Does anyone know what the new solution is?

4 replies

SSolidJS

•Created by Carlo Nyte on 3/28/2024 in #support

Is it possible to get createAsync to revaluate/ refetch data like createResource?

I see the example here but I'm still not understanding it

9 replies

SSolidJS

•Created by Carlo Nyte on 8/31/2023 in #support

Possible Bug with routeData

If I do this

// File PersonPage.tsx

import { Show } from "solid-js";
import { RouteDataArgs, useParams, useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";

// Components
import ComponentA from "./ComponentA";

interface IPerson {
    name: string;
    age: number;
    email: string;

    favoriteColor: string;
}

class Person implements IPerson {
    name: string;
    age: number;
    email: string;
    
    favoriteColor: string;

    constructor(person: IPerson) {
        this.name = person.name;
        this.age = person.age;
        this.email = person.email;

        this.favoriteColor = person.favoriteColor;
    }
}

function emptyPerson(): Person {
    return new Person({
        name: "",
        age: 0,
        email: "",
        favoriteColor: "",
    });
}

export function routeData({ params }: RouteDataArgs<{id:string}>) {
    return createServerData$<Person, string>(
        async(personId) => {
            const response = await fetch(`some_url/${personId}`, {
                method: 'POST',
            })

            if (!response.ok) {
                return emptyPerson();
            }
            const data = await response.json() as IPerson;

            return new Person(data)
        },
        { key: () => params.id },
    );
}

export default function PersonPage() {
    const personDetails = useRouteData<typeof routeData>();

    return (<div>
        <Show when={ personDetails()}>
            <div> Hello {personDetails().name} </div>
            <div> Age: {personDetails().age} </div>
            <div> Email: {personDetails().email} </div>

            <ComponentA />
        </Show>
    </div>);
}

// File PersonPage.tsx

import { Show } from "solid-js";
import { RouteDataArgs, useParams, useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";

// Components
import ComponentA from "./ComponentA";

interface IPerson {
    name: string;
    age: number;
    email: string;

    favoriteColor: string;
}

class Person implements IPerson {
    name: string;
    age: number;
    email: string;
    
    favoriteColor: string;

    constructor(person: IPerson) {
        this.name = person.name;
        this.age = person.age;
        this.email = person.email;

        this.favoriteColor = person.favoriteColor;
    }
}

function emptyPerson(): Person {
    return new Person({
        name: "",
        age: 0,
        email: "",
        favoriteColor: "",
    });
}

export function routeData({ params }: RouteDataArgs<{id:string}>) {
    return createServerData$<Person, string>(
        async(personId) => {
            const response = await fetch(`some_url/${personId}`, {
                method: 'POST',
            })

            if (!response.ok) {
                return emptyPerson();
            }
            const data = await response.json() as IPerson;

            return new Person(data)
        },
        { key: () => params.id },
    );
}

export default function PersonPage() {
    const personDetails = useRouteData<typeof routeData>();

    return (<div>
        <Show when={ personDetails()}>
            <div> Hello {personDetails().name} </div>
            <div> Age: {personDetails().age} </div>
            <div> Email: {personDetails().email} </div>

            <ComponentA />
        </Show>
    </div>);
}

10 replies

SSolidJS

•Created by Carlo Nyte on 7/11/2023 in #support

Best Practice for ContextProvider - Store vs Signals

When making a context provider is it best practice to use a store instead of several individual signals or does it not matter? E.g

interface Props {
    children: JSX.Element;
}

export interface IGlobalStore {
    carType: string;
    modelYear: number;
    warrentyNumber: number;
    carColor: string[];
}

interface GlobalContextValues extends IGlobalStore {
    setState: SetStoreFunction<IGlobalStore>
}

export const GlobalContext = createContext<GlobalContextValues>(
    {
        carType: '',
        modelYear: 0,
        warrentyNumber: 0,
        carColor: [],
        setState: () => {},
    }
);

export function GlobalProvider(props: Props) {
    const [state, setState] = createStore<IGlobalStore>({
        carType: '',
        modelYear: 0,
        warrentyNumber: 0,
        carColor: [],
    });

    let isCarMade = true;
    const setCarBeingMade = (value: boolean) => {
        isCarMade = value;
    }

    const context = {
        // Global
        get carType(){ return state.carType},
        get modelYear(){ return state.modelYear},
        get warrentyNumber(){ return state.warrentyNumber},
        get carColor(){ return state.carColor},
        setState,
        
        get isCarMade() {
            return isCarMade;
        },
        setCarBeingMade,
    }

    return (
        <GlobalContext.Provider value={context}>
            {props.children}
        </GlobalContext.Provider>
    );
}

export function useGlobalContext() {
    return useContext(GlobalContext);
}

interface Props {
    children: JSX.Element;
}

export interface IGlobalStore {
    carType: string;
    modelYear: number;
    warrentyNumber: number;
    carColor: string[];
}

interface GlobalContextValues extends IGlobalStore {
    setState: SetStoreFunction<IGlobalStore>
}

export const GlobalContext = createContext<GlobalContextValues>(
    {
        carType: '',
        modelYear: 0,
        warrentyNumber: 0,
        carColor: [],
        setState: () => {},
    }
);

export function GlobalProvider(props: Props) {
    const [state, setState] = createStore<IGlobalStore>({
        carType: '',
        modelYear: 0,
        warrentyNumber: 0,
        carColor: [],
    });

    let isCarMade = true;
    const setCarBeingMade = (value: boolean) => {
        isCarMade = value;
    }

    const context = {
        // Global
        get carType(){ return state.carType},
        get modelYear(){ return state.modelYear},
        get warrentyNumber(){ return state.warrentyNumber},
        get carColor(){ return state.carColor},
        setState,
        
        get isCarMade() {
            return isCarMade;
        },
        setCarBeingMade,
    }

    return (
        <GlobalContext.Provider value={context}>
            {props.children}
        </GlobalContext.Provider>
    );
}

export function useGlobalContext() {
    return useContext(GlobalContext);
}

4 replies

SSolidJS

•Created by Carlo Nyte on 7/11/2023 in #support

How to use Context/ ContextProvider with File Routes

If you are using FileRoutes and want to use a context around your entire app is there how exactly do you do? I've been using https://www.youtube.com/watch?v=ndB7PwS1yqk&t=309s as a guide but they don't use file routes. My assumption was to do this, in root.tsx

<ContextProvider>
    <Routes>
        <FileRoutes />
    </Routes>
</ContextProvider>

<ContextProvider>
    <Routes>
        <FileRoutes />
    </Routes>
</ContextProvider>

10 replies

SSolidJS

•Created by Carlo Nyte on 7/11/2023 in #support

*Npm Run Start* Fails To Mysterious Error

Is there a recommended way to debug solid-start start? I'm running into this issue where my app fails after I build, but in solid-start dev everything is fine. This is the error I'm getting:

file://this/file/path/frontend/dist/server.js:17013
  const id = sharedConfig.context.id + sharedConfig.context.count++;
                                  ^
TypeError: Cannot read properties of undefined (reading 'id')
at createResource (file:///path/to/my/app/dist/server.js:17013:35)
at file:///path/to/my/app/dist/server.js:20340:1
at ModuleJob.run (node:internal/modules/esm/module_job:192:25)
at async DefaultModuleLoader.import (node:internal/modules/esm/loader:228:24)

file://this/file/path/frontend/dist/server.js:17013
  const id = sharedConfig.context.id + sharedConfig.context.count++;
                                  ^
TypeError: Cannot read properties of undefined (reading 'id')
at createResource (file:///path/to/my/app/dist/server.js:17013:35)
at file:///path/to/my/app/dist/server.js:20340:1
at ModuleJob.run (node:internal/modules/esm/module_job:192:25)
at async DefaultModuleLoader.import (node:internal/modules/esm/loader:228:24)

I also tried npm --loglevel verbose run build and DEBUG=1 npm run build but neither didn't help uncover what the error is related to..

9 replies

SSolidJS

•Created by Carlo Nyte on 5/23/2023 in #support

CreateResource Not complete Fetch (promise) when page first loads, but completes when VsCode Saves

Hey I'm severely confused about what's happening under the hood for npm run dev. When I'm using createResource(fetcher) and do a console.log(response) in the fetcher function, the data gets printed out in my VSCode terminal only. But once when I hit save without changing anything, it will show up in the console of my browser (chrome). Does anyone know what is happening to cause this? My example:

import { createResource, Suspense } from "solid-js";
import { useParams } from "solid-start";

class UserDetails {
    constructor( public id: string, public name: string, public age: number, public email: string, public images: string[],
    ){}
}

const emptyUserDetails = (): UserDetails => ({
    id: '1234',
    name: 'Test User',
    age: 0,
    email: 'testUser@email.com',
    images: ['https://picsum.photos/200/300', 'https://picsum.photos/200/300', 'https://picsum.photos/200/300'],
});

const loadUserDetailsFromAPI = async(businessId: string) => {
    let res = await fetch(`some-user-api/${businessId}`)
    .catch(err => {
        console.log(err);
    });
    if (res && res.status === 200) {
        return res.json() as Promise<UserDetails>
    }

    return emptyUserDetails();
}

export default function UsersPage() {
    const params = useParams();
    const [userDetails] = createResource(params.id, loadUserDetailsFromAPI);

    return (
        <h1>{ userDetails.state === 'ready' }</h1>
        <Suspense fallback={Loading...}>
            <div>
                <span>userDetails()!.id</span>
                <span>userDetails()!.name</span>
                <span>userDetails()!.age</span>
                <span>userDetails()!.email</span>
                <div>
                    <span>userDetails()!.images[0]</span>
                    <span>userDetails()!.images[1]</span>
                    <span>userDetails()!.images[2]</span>
                </div>
            </div>
        </Suspense>
    );
}

import { createResource, Suspense } from "solid-js";
import { useParams } from "solid-start";

class UserDetails {
    constructor( public id: string, public name: string, public age: number, public email: string, public images: string[],
    ){}
}

const emptyUserDetails = (): UserDetails => ({
    id: '1234',
    name: 'Test User',
    age: 0,
    email: 'testUser@email.com',
    images: ['https://picsum.photos/200/300', 'https://picsum.photos/200/300', 'https://picsum.photos/200/300'],
});

const loadUserDetailsFromAPI = async(businessId: string) => {
    let res = await fetch(`some-user-api/${businessId}`)
    .catch(err => {
        console.log(err);
    });
    if (res && res.status === 200) {
        return res.json() as Promise<UserDetails>
    }

    return emptyUserDetails();
}

export default function UsersPage() {
    const params = useParams();
    const [userDetails] = createResource(params.id, loadUserDetailsFromAPI);

    return (
        <h1>{ userDetails.state === 'ready' }</h1>
        <Suspense fallback={Loading...}>
            <div>
                <span>userDetails()!.id</span>
                <span>userDetails()!.name</span>
                <span>userDetails()!.age</span>
                <span>userDetails()!.email</span>
                <div>
                    <span>userDetails()!.images[0]</span>
                    <span>userDetails()!.images[1]</span>
                    <span>userDetails()!.images[2]</span>
                </div>
            </div>
        </Suspense>
    );
}

12 replies

Gaming

Programming