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'>

TanStack•4mo ago•

4 replies

primary-violet

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

Loader types vs Route.useLoaderData() not matching

Similar Threads

Loader types vs Route.useLoaderData() not matching

Similar Threads

Similar Threads

Similar Threads