Route Types outside of route definotions

[tigawanna]

Great project here , am trying to go through the examples to make sense of it all,
was wonderung if theres a way to get the types of the props passed into the component outside f the route definition

The example with query puts the component in the router function

const postRoute = new Route({
  getParentRoute: () => postsRoute,
  path: '$postId',
  loader: async ({ params: { postId }, context: { queryClient } }) => {
    await queryClient.ensureQueryData(['posts', postId], () =>
      fetchPostById(postId),
    )

    return () =>
      useQuery(['posts', postId], () => fetchPostById(postId), {
        enabled: !!postId,
      })
  },
  component: ({ useLoader }) => {
    const postQuery = useLoader()()

    return (
      <div className="space-y-2">
        <h4 className="text-xl font-bold underline">{postQuery.data?.title}</h4>
        <div className="text-sm">{postQuery.data?.body}</div>
      </div>
    )
  },
})

given this route

export const onePostRoute = new Route({
  getParentRoute: () => postsLayout,
  path: "$postId",
  loader: async ({ params: { postId }, context: { queryClient } }) => {
    await queryClient.ensureQueryData({
      queryKey: ["posts", postId],
      queryFn: () => fetchPostById(postId),
    });

    return () =>
      useQuery({
        queryKey: ["posts", postId],
        queryFn: () => fetchPostById(postId),
        enabled: !!postId,
      });
  },
  component:OnePostPage
});

Am trying to hoist it out to it's own file but still have the types to the props being passed in , in order to access items like useLoader wth the correct typings

interface OnePostPageProps extends RouteProps {

}

export function OnePostPage({}:OnePostPageProps){
return (
 <div className='w-full h-full flex items-center justify-center'>

 </div>
);
}

i've tried this , but it gives me circular reference errors when i try to use the types , plus it seems to be the entire routes/ type not just the props to be passed into te component

type RouteComponent  = typeof onePostRoute

Any help?

[tigawanna]

also wondering if this is an anti pattern

  const loader = onePostRoute.useLoader()()

[pawelblaszczyk5]

Afaik, Tanner intention is to don't type these props and if you're detaching the component declaration from route declaration you can use different patterns. I think the onePostRoute.useLoader()() is the most encouraged and the easiest one. Here is a screenshot of Discord conversation about this (I've decided to post screenshot instead of link in case someone not having an access to Discord):

[tigawanna]

Nice , guess I'll join the discord