T
TanStack•5mo ago
harsh-harlequin

slug pattern for tsr that doesn't involve multiple rounds of encoding/decoding?

i tried explaining the various patterns i've attempted for this, and this message just got unnecessarily long, so rough overview is - i'm encoding/decoding my title value at the route level with param parse and stringify. this makes life really easy as i can just route using my title, and it will become a slug for free - because i'm doing this, i lose casing in the process. this means that when i look up the record by title in the route, i'm looking up with a fake title that has lost the true casing i have a solution now where i look up by slug instead, and this works (but now if i need this param to be used as a title anywhere else that i can't access the data from db, the decoded title may not be cased properly). Just wondering if anyone has general guidance, i don't really love any of the solutions i've come up with simplified code with issue 
function GroupLayout() {
  const { title: titleParam } = Route.useParams();

  const { data, status } = useGetGroupBySlug({ title: titleParam });

  return (
    <>
      ...
      <Outlet />
    </>
  );
}

export const Route = createFileRoute("/_protected/groups/$title")({
  component: GroupLayout,
  ssr: false,
  // eg. here if i do slug lookup, and thus don't use params.parse below, now the breadcrumb value might not be properly cased
  loader: ({ params }) => ({ crumb: slug(params.title).decode() }), 
  params: {
    parse: (params) => ({ title: slug(params.title).decode() }),
    stringify: (params) => ({ title: slug(params.title).encode() }),
  },
})
function GroupLayout() {
  const { title: titleParam } = Route.useParams();

  const { data, status } = useGetGroupBySlug({ title: titleParam });

  return (
    <>
      ...
      <Outlet />
    </>
  );
}

export const Route = createFileRoute("/_protected/groups/$title")({
  component: GroupLayout,
  ssr: false,
  // eg. here if i do slug lookup, and thus don't use params.parse below, now the breadcrumb value might not be properly cased
  loader: ({ params }) => ({ crumb: slug(params.title).decode() }), 
  params: {
    parse: (params) => ({ title: slug(params.title).decode() }),
    stringify: (params) => ({ title: slug(params.title).encode() }),
  },
})
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?