T
TanStack•3w ago
adverse-sapphire

Loader types vs Route.useLoaderData() not matching

export const Route = createFileRoute("/_authed")({
  beforeLoad: async () => {
    const { userId } = await checkAuthFn();

    if (!userId) {
      throw redirect({ to: "/" });
    }
  },
  loader: async () => {
    const { userId } = await checkAuthFn();
    return userId ?? null;
  },
  component: AuthedLayout,
});

function AuthedLayout() {
  const userId = Route.useLoaderData();
  const storedUserId = useValuesStore((state) => state.userId);
  const setUserId = useValuesStore((state) => state.setUserId);

  if (!storedUserId && userId) {
    setUserId(userId);
  }

  return <Outlet />;
}
export const Route = createFileRoute("/_authed")({
  beforeLoad: async () => {
    const { userId } = await checkAuthFn();

    if (!userId) {
      throw redirect({ to: "/" });
    }
  },
  loader: async () => {
    const { userId } = await checkAuthFn();
    return userId ?? null;
  },
  component: AuthedLayout,
});

function AuthedLayout() {
  const userId = Route.useLoaderData();
  const storedUserId = useValuesStore((state) => state.userId);
  const setUserId = useValuesStore((state) => state.setUserId);

  if (!storedUserId && userId) {
    setUserId(userId);
  }

  return <Outlet />;
}
In Loader, type of userId is Id<'users'> or null. In the AuthedLayout component userId is a type that looks like all the properties and methods on sting. Any ideas what I'm doing wrong, my expectation is useLoaderData will be returning userId with type Id<'users'>
No description
3 Replies
adverse-sapphire
adverse-sapphire•3w ago
I just entered this section to ask the exact same thing. My Route.useLoaderData() is returning with Any types 
import { createFileRoute } from "@tanstack/react-router";
import { getProduct } from "@/lib/vendure/shop";

export const Route = createFileRoute("/_default/product/example /$example")({
  loader: async ({ params }) => {
    const product = await getProduct({ data: params.example });
    return {
      product,
    };
  },
  component: RouteComponent,
});

function RouteComponent() {
  const { product } = Route.useLoaderData();
  return <div>Hello "/_default/product/example"!</div>;
}
import { createFileRoute } from "@tanstack/react-router";
import { getProduct } from "@/lib/vendure/shop";

export const Route = createFileRoute("/_default/product/example /$example")({
  loader: async ({ params }) => {
    const product = await getProduct({ data: params.example });
    return {
      product,
    };
  },
  component: RouteComponent,
});

function RouteComponent() {
  const { product } = Route.useLoaderData();
  return <div>Hello "/_default/product/example"!</div>;
}
dependent-tan
dependent-tan•3w ago
@pj you would need to return {userId} from beforeLoad to get the non-nullable type via context passed into the loader @Guilherme Almeida this is a different issue. please open a new thread in #start-questions including a complete minimal reproducer project
adverse-sapphire
adverse-sapphireOP•3w ago
Ah yes I had a memory of reading something like this in the docs after I posted so I'll dive back in today, thanks for the heads up

Did you find this page helpful?