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

notFound

(for the whole page) function in the

createServerFn

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",
      },
    ],
  }),
});

TanStack•12mo ago•

6 replies

then-purple

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

notFound

(for the whole page) function in the

createServerFn

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",
      },
    ],
  }),
});

Pass something to loaderData when notFound in page level

Similar Threads

Pass something to loaderData when notFound in page level

Similar Threads

Similar Threads

Similar Threads