SolidJS•6mo ago

routeData params are empty but not useParams

I am using the basic <FileRoutes /> setup and I have a file located at routes/stuff/[slug].tsx. When I read params.slug from useParams, I can read it properly, but when I try to do useRouteData with an exported routeData function in the same file, the params field of args: RouteDataArgs is empty :/ Here's a minimum repro:

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

export function routeData({ params }: RouteDataArgs) {
  return createServerData$(() => {
    return params;
  });
}

export default function Stuff() {
  const params = useParams();
  const routeData = useRouteData();
  return (
    <main>
      <p>{`params: ${params.slug}`}</p>
      <p>{`routeData: ${routeData.slug}`}</p>
    </main>
  );
}

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

export function routeData({ params }: RouteDataArgs) {
  return createServerData$(() => {
    return params;
  });
}

export default function Stuff() {
  const params = useParams();
  const routeData = useRouteData();
  return (
    <main>
      <p>{`params: ${params.slug}`}</p>
      <p>{`routeData: ${routeData.slug}`}</p>
    </main>
  );
}

I'm sure it's something really silly, but I have tried so many different combinations of things and I can't get it to work...

4 Replies

lxsmnsyc•6mo ago

createServerData$ cannot receive the params on client-side so might want to pass or access it in some other way

Zack Pitcher•6mo ago

what would be the solid way to do that? Also, what's going on in this example from the docs? Isn't it using the params right there?

import { RouteDataArgs } from "solid-start";
import { createServerData$ } from "solid-start/server";
 
export function routeData({ params }: RouteDataArgs) {
  return createServerData$(
    ([, id]) => prisma.students.findUnique({ where: { id } }),
    { key: () => ["students", params.id] }
  );
}

import { RouteDataArgs } from "solid-start";
import { createServerData$ } from "solid-start/server";
 
export function routeData({ params }: RouteDataArgs) {
  return createServerData$(
    ([, id]) => prisma.students.findUnique({ where: { id } }),
    { key: () => ["students", params.id] }
  );
}

Got it working using a GET() API route + createResource thanks

lxsmnsyc•6mo ago

yes but it's passing it through key. The function only exists on the server-side, and so key acts like a payload to be sent from the client-side. You cannot access the params normally since the params exist on both server and client, but in this case, createServerData$ doesn't really have closures, so it cannot capture params like notice in the example, it's not directly doing params.id on the prisma query

Zack Pitcher•6mo ago

Hmm interesting. I didn’t know it wasn’t a closure.

Gaming

Programming

routeData params are empty but not useParams