S
SolidJS•2y ago
Zack Pitcher

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
lxsmnsyc•2y ago
createServerData$ cannot receive the params on client-side so might want to pass or access it in some other way
Zack Pitcher
Zack PitcherOP•2y 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
lxsmnsyc•2y 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
Zack PitcherOP•2y ago
Hmm interesting. I didn’t know it wasn’t a closure.

Did you find this page helpful?