T
TanStack•3y ago
flat-fuchsia

Handling Component Display Scenarios in a Dynamic Data Loading Environment

In a given scenario, a loader attempts to retrieve data, but encounters an outage in the service. This results in the display of an error component. Subsequently, even after the service is restored, the error component persists instead of the intended component. 
export const postsRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "posts",
  loader: async ({
    context: { queryClient },
    routeContext: { postsOptions },
  }) => {
    queryClient.ensureQueryData(postsOptions);
  },
  component: Posts,
  errorComponent: ErrorPost
});
export const postsRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "posts",
  loader: async ({
    context: { queryClient },
    routeContext: { postsOptions },
  }) => {
    queryClient.ensureQueryData(postsOptions);
  },
  component: Posts,
  errorComponent: ErrorPost
});
I have also tried using the update but results remains the same.
2 Replies
subsequent-cyan
subsequent-cyan•3y ago
Are you using the latest version? Error states are suppoosed to be automatically reset when the router reloads or the path changes.
flat-fuchsia
flat-fuchsiaOP•3y ago
I am using the following: 
"@tanstack/router": "^0.0.1-beta.142",
"@tanstack/router-devtools": "^0.0.1-beta.145",
"@tanstack/router": "^0.0.1-beta.142",
"@tanstack/router-devtools": "^0.0.1-beta.145",
I have updated them to the following: 
"@tanstack/react-router": "0.0.1-beta.152",
"@tanstack/router-devtools": "0.0.1-beta.152",
"@tanstack/react-router": "0.0.1-beta.152",
"@tanstack/router-devtools": "0.0.1-beta.152",
However, even after the service recovers, it remains stuck in the error state. I observe that the error property still contains an error, and the icon is displayed in pink. Curiously, if I navigate away and then return to the original location, the functionality is restored. When I hover over links, the icon changes back to green, yet the main component persists as the error component, not switching back as expected. @Tanner Linsley problem still exists for me do you have any example simulating the same behavior with react-query?

Did you find this page helpful?