SolidJS•15mo ago

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

9 Replies

Carlo NyteOP•15mo ago

// File ComponentA.tsx

import { Show } from "solid-js";
import { useRouteData } from "solid-start";

import { routeData } from "./PersonPage";

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

    return (<div>
        <Show when= { personDetails() } >
            <div>Your favorite color: { personDetails().favoriteColor } </div>
        </Show>
    </ div>);
}

// File ComponentA.tsx

import { Show } from "solid-js";
import { useRouteData } from "solid-start";

import { routeData } from "./PersonPage";

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

    return (<div>
        <Show when= { personDetails() } >
            <div>Your favorite color: { personDetails().favoriteColor } </div>
        </Show>
    </ div>);
}

I can get the data from function routeData to work in the componentA in file ComponentA.tsx Which is great! But 1) If I try to move export function routeData({ params }: RouteDataArgs<{id:string}>) into it's own file the code will break. 2) If I change the name of routeData to anything besides routeData the code will break. Neither of which make sense to me

mdynnl•15mo ago

export { routeData }

Carlo NyteOP•15mo ago

Can you elaborate? I don't really understand

21_and_da_boi•15mo ago

if you import route data from another file, it has to still be exported from the page file as routeData

21_and_da_boi•15mo ago

https://start.solidjs.com/core-concepts/data-loading

SolidStart Beta Documentation

Early release documentation and resources for SolidStart Beta

Carlo NyteOP•15mo ago

Gotcha. What I was trying to do was what i saw done in the Movies example: https://github.com/solidjs/solid-start/tree/main/examples/movies

GitHub

solid-start/examples/movies at main · solidjs/solid-start

SolidStart, the Solid app framework. Contribute to solidjs/solid-start development by creating an account on GitHub.

Carlo NyteOP•15mo ago

The useMovie(params: any) function that contains createRouteData is used in 3 other components files and does not seem to follow the same practice that is shown in the docs - from what I understand at least

21_and_da_boi•15mo ago

createRouteData can be used anywhere so you should be good to wrap it. routeData can't

Carlo NyteOP•15mo ago

Got it. I understand now. routeData is a reserved word that works in accordance with useRouteData. I didn't understand that from the documentation. I thought routeData was just random variable name and not something unique. I wonder if there's a way to express that better, or if I'm just an outlier and it's clear to everyone else. In any case, thank you for taking the time to explain it

Gaming

Programming

Possible Bug with routeData