T
TanStack•3y ago
stormy-gold

Persist query data in navbar for particular pages

I think this is more of a Nextjs question, but I created a DashboardLayout for all of my sub pages in /dashboard. In the DashboardLayout component is a navbar that has the title fetched from my useDashboard hook. How do I persist the title when changing pages, as right now when I do it will refetch and so for a brief moment is blank. 
export default function DashboardLayout({ children }) {
  const router = useRouter()
  const dashboard_id = router.query.dashboardId
  const dashboardQuery = useDashboard({ dashboard_id })

  const renderNav = () => {
    <div>
      <span>{dashboardQuery.data.title}</span>
      <Link passHref href={'/dashboard/${dashboard_id}/location-1'}><span>Location1</span></Link>
      <Link passHref href={'/dashboard/${dashboard_id}/location-2'}><span>Location2</span></Link>
    </div>
  }

  return (
    <div>
      {renderNav()}
      {children}
    </div>
  )
}
export default function DashboardLayout({ children }) {
  const router = useRouter()
  const dashboard_id = router.query.dashboardId
  const dashboardQuery = useDashboard({ dashboard_id })

  const renderNav = () => {
    <div>
      <span>{dashboardQuery.data.title}</span>
      <Link passHref href={'/dashboard/${dashboard_id}/location-1'}><span>Location1</span></Link>
      <Link passHref href={'/dashboard/${dashboard_id}/location-2'}><span>Location2</span></Link>
    </div>
  }

  return (
    <div>
      {renderNav()}
      {children}
    </div>
  )
}
1 Reply
stormy-gold
stormy-goldOP•3y ago
So, I've been putting DashboardLayout in all my pages, when I should have put it in my _app.js. It's working as expected. Although I'm running into a lot of conditional pathing from my protected and unprotected routes and other layouts. I don't know if that's an okay thing. If anyone knows a better way to handle a bunch of conditional providers in my _app.js I'm more than happy to listen.

Did you find this page helpful?