T
TanStack•16mo ago
other-emerald

Transforming backend filters in the loader to frontend params.

In my application we have just started using the TanStack router for the dashboard page. Each dashboard has a set of filters stored in the backend. When i load this route i would like to set these params in the loader of the createRoute so that they are exposed to the page component. How can i do this? (the filters are in the response of the dashboard query) 
const baseRoute = createRoute({
  getParentRoute: () => rootRoute,
  validateSearch: validateProductSearch,
  path: '/analytics/$dashboard',
  component: () => <AnalyticsBody />,
  loader: ({ params }) => globalQueryClient.ensureQueryData(dashboardQueries.detail(Number(params.dashboard))),
  pendingComponent: () => <FullWidthLoader />,
  errorComponent: RouterSuspenseErrorFallback
})
const baseRoute = createRoute({
  getParentRoute: () => rootRoute,
  validateSearch: validateProductSearch,
  path: '/analytics/$dashboard',
  component: () => <AnalyticsBody />,
  loader: ({ params }) => globalQueryClient.ensureQueryData(dashboardQueries.detail(Number(params.dashboard))),
  pendingComponent: () => <FullWidthLoader />,
  errorComponent: RouterSuspenseErrorFallback
})
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?