T
TanStack•2y ago
variable-lime

useSuspenseQuery returns last error instead of fresh data

Hey 👋🏽 , I need some help. I'm using TanStack Router with TanstackQuery and want to make use of useSuspenseQuery. The problem is that the last error (401) that led to a login is also returned the 1st time after a successful login by useSuspenseQuery, without requesting the resource. 
export const Route = new FileRoute("/vouchers/creation").createRoute({
  pendingComponent: () => <div>creation Loading...</div>,
  errorComponent: (error) => {
    // this is the 401 error
    return <div>creation Error</div>;
  },
  component: Component,
});

function Component() {
  const { currentUser } = useCurrentUser(); // useCurrentUser uses useSuspenseQuery
  // if I switch to useQuery, currentUser is requested properly, but then I have     // to work around the useRef hook, because currentUser has to be defined here. 

  const store = useRef(
    createCreateVouchersStore({ user: currentUser })
  ).current;

  return (
    <div>creation</div>
  );
}
export const Route = new FileRoute("/vouchers/creation").createRoute({
  pendingComponent: () => <div>creation Loading...</div>,
  errorComponent: (error) => {
    // this is the 401 error
    return <div>creation Error</div>;
  },
  component: Component,
});

function Component() {
  const { currentUser } = useCurrentUser(); // useCurrentUser uses useSuspenseQuery
  // if I switch to useQuery, currentUser is requested properly, but then I have     // to work around the useRef hook, because currentUser has to be defined here. 

  const store = useRef(
    createCreateVouchersStore({ user: currentUser })
  ).current;

  return (
    <div>creation</div>
  );
}
Do you know, how to solve this? How can I ensure that this response, which leads to the login, does not end up in the QueryCache in the first place? Thanks
No description
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?