Router Context not updating

basically the same problem as here: https://stackoverflow.com/questions/77856598/tanstack-router-how-to-pass-value-from-another-context
Setup is a little different because I am using react-query to get the currently logged in user.

export function App() {
  const currentUserQuery = useQuery(currentUserQueryOptions);
  if (currentUserQuery.isLoading)
    return (
        <Loader/>
    );

  console.log("router now has new context:", currentUserQuery.data);
   //^ this console log runs only once, and is never called again
  return (
    <Suspense
      fallback={
        <Loader/>
      }
    >
      <RouterProvider
        router={router}
        context={{ currentUser: currentUserQuery.data }}
      />
    </Suspense>
  );
}

export function App() {
  const currentUserQuery = useQuery(currentUserQueryOptions);
  if (currentUserQuery.isLoading)
    return (
        <Loader/>
    );

  console.log("router now has new context:", currentUserQuery.data);
   //^ this console log runs only once, and is never called again
  return (
    <Suspense
      fallback={
        <Loader/>
      }
    >
      <RouterProvider
        router={router}
        context={{ currentUser: currentUserQuery.data }}
      />
    </Suspense>
  );
}

Even when the query dev tools tell me that

currentUserQuery.data

currentUserQuery.data

has updated, the context still keeps the old values. This means I manually need to add

useEffect

useEffect

in the protected routes and redirect users if they are not logged in, since I cannot rely on the context. What am I missing?

Stack Overflow

Tanstack Router - How to pass value from another context

I'm building a react app that is using Tanstack router, and I'd like to access values from a context provider that I created over to the router beforeLoad handler for a given route. My app structure

TanStack•3y ago•

7 replies

faint-white

Router Context not updating

export function App() {
  const currentUserQuery = useQuery(currentUserQueryOptions);
  if (currentUserQuery.isLoading)
    return (
        <Loader/>
    );

  console.log("router now has new context:", currentUserQuery.data);
   //^ this console log runs only once, and is never called again
  return (
    <Suspense
      fallback={
        <Loader/>
      }
    >
      <RouterProvider
        router={router}
        context={{ currentUser: currentUserQuery.data }}
      />
    </Suspense>
  );
}

export function App() {
  const currentUserQuery = useQuery(currentUserQueryOptions);
  if (currentUserQuery.isLoading)
    return (
        <Loader/>
    );

  console.log("router now has new context:", currentUserQuery.data);
   //^ this console log runs only once, and is never called again
  return (
    <Suspense
      fallback={
        <Loader/>
      }
    >
      <RouterProvider
        router={router}
        context={{ currentUser: currentUserQuery.data }}
      />
    </Suspense>
  );
}

Even when the query dev tools tell me that

currentUserQuery.data

currentUserQuery.data

has updated, the context still keeps the old values. This means I manually need to add

useEffect

useEffect

in the protected routes and redirect users if they are not logged in, since I cannot rely on the context. What am I missing?

Stack Overflow

Tanstack Router - How to pass value from another context

I'm building a react app that is using Tanstack router, and I'd like to access values from a context provider that I created over to the router beforeLoad handler for a given route. My app structure

Router Context not updating

Similar Threads

Router Context not updating

Similar Threads

Similar Threads

Similar Threads