extended-salmon

Pass something to loaderData when notFound in page level

I'm using router with start, i wondering how to make meaningful error title we throw notFound (for the whole page) function in the createServerFn side. I manage to make it work with the code below but there is some flashes before the page show the error title

export const getProductBySlug = createServerFn({ method: "GET" })
  .handler(async({data}) => {
    const post = getPost(data)
    if (!post) throw notFound({routeId: "some-route"});
  })

export const Route = createFileRoute("some-file-route")({
  loader: async ({ params }) => getProductBySlug({ data: params.slug }),
  component: Component,
  head: ({ loaderData }) => ({
    meta: [
      {
        title: loaderData ? loaderData.product.name : "404 Error",
      },
    ],
  }),
});

export const getProductBySlug = createServerFn({ method: "GET" })
  .handler(async({data}) => {
    const post = getPost(data)
    if (!post) throw notFound({routeId: "some-route"});
  })

export const Route = createFileRoute("some-file-route")({
  loader: async ({ params }) => getProductBySlug({ data: params.slug }),
  component: Component,
  head: ({ loaderData }) => ({
    meta: [
      {
        title: loaderData ? loaderData.product.name : "404 Error",
      },
    ],
  }),
});

6 Replies

extended-salmon•6mo ago

a bit unclear, what is a meaningful title for you here?

extended-salmonOP•6mo ago

i mean meta tag title the the Route.head

extended-salmon•6mo ago

so just the hard coded "404 error" here?

extended-salmonOP•6mo ago

sorry if this confuses you, because english is not my first language Yes, for now I have it hard coded. Is there any other better way to show more relevant meta title when throw notFound at page level?

extended-salmon•6mo ago

so what would you want to show there? where does that data come from?

extended-salmonOP•6mo ago

maybe something like "404 Not found error", the data come from db

Gaming

Programming

Pass something to loaderData when notFound in page level

Did you find this page helpful?