Stop child route render after error in parent loader

[hosmelq]

Hi, is there a method to halt the rendering of a child route in case of an error in the parent route's loader?

For example. I am using react-query to ensure data is valid, I have a default error component that renders if the status code is 404. That part works, but the child route re-renders.

loader({context, params}) {
  return context.queryClient.ensureQueryData({
    queryKey: ['organization', params.organizationId],
    queryFn: () => loadOrganization(params.organizationId),
  })
}

[tannerlinsley]

This should already be happening. Can you provide a reproduction in code sandbox or blitz?

…

On Jul 26, 2023 at 8:38 AM -0600, Hosmel Quintana ***@***.***>, wrote: Hi, I was wondering if there is a method to halt the rendering of a child route in case of an error in the parent route's loader. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[hosmelq]

I apologize for my misunderstanding. To clarify, I am referring to the loader of the child router that still runs even if the parent loader fails and the error component is shown.

Here is a reproduction.

https://codesandbox.io/p/sandbox/zealous-yalow-4kknrn

[pawelblaszczyk5]

Afaik, they both start running at the same time after router internals match them. They should be independent of each other

[tannerlinsley]

They do need to run in parallel by default, so it sounds like you want a way to have your child loader wait for the parent in a serial pattern. Correct?

…

On Jul 26, 2023 at 9:58 AM -0600, Paweł Błaszczyk ***@***.***>, wrote: Afaik, they both start running at the same time after router internals match them. They should be independent of each other — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[tannerlinsley]

Double checked and that promise isn't there, but it will be in the next release under the parentMatchPromise property on the object that gets passed to the loader function.

[visualjerk]

I am unsure about how to use parentMatchPromise. Can I expect it to be defined in this scenario?

• parent.tsx

import { Outlet, createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/parent')({
  async loader() {
    // ... loading data
    return { data }
  },
  ...
});

• parent.child.tsx

import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/parent/child')({
  async loader({ parentMatchPromise }) {
    await parentMatchPromise; // <-- undefined
  },
  ...
});

[schiller-manuel]

it should be defined, yes. can you provide a reproducer where it is undefined?

[visualjerk]

Sure, here is a minimal example: https://stackblitz.com/edit/tanstack-router-rekhkq?file=src%2Froutes%2Fparent.child.tsx

In order to reproduce the issue, try to navigate to "/parent/child".

I can also create a new issue, if that is unintended behavior.

[schiller-manuel]

yes please create a new issue