T
TanStack•3y ago
foreign-sapphire

What is the proper way of making a protected page with react-query?

Greetings all, I have a next.js app in which I need to protect a specific page and show it users only if they have a certain "status" which is fetched through a simple query to the server. See this code example for reference: 
import React from "react";

const Page = () => {
  const { data: userStatus, isLoading } = useQuery(["user-status"], () => getUserStatus());

  useEffect(() => {
    if(userStatus?.status !== "accepted"){
      router.push("/setup")
    }
   }, [userStatus?.status]);

  if(isLoading) {
    return <div>Loading...</div>
  }

  if(userStatus) {
    return <h1>Welcome</h1>
  }

}
import React from "react";

const Page = () => {
  const { data: userStatus, isLoading } = useQuery(["user-status"], () => getUserStatus());

  useEffect(() => {
    if(userStatus?.status !== "accepted"){
      router.push("/setup")
    }
   }, [userStatus?.status]);

  if(isLoading) {
    return <div>Loading...</div>
  }

  if(userStatus) {
    return <h1>Welcome</h1>
  }

}
The above example works perfectly well, the only problem is that if the user leaves the page for too long and switch tabs, when they come back to the site, they are redirected to the "/setup" page. I'm confused as to what could be the optimal way of handling such protected routes. Thank you, any help would be appreciated!
3 Replies
like-gold
like-gold•3y ago
Hi 👋 I think you need to account for the status of the query in the effect that performs the redirect. As an aside, you might find it more helpful to look at Next.js protected route resources as this is nothing to do with TanStack Query itself
foreign-sapphire
foreign-sapphireOP•3y ago
got it, so accounting for status === "loading" should work in this case, thanks a lot, Louis!
like-gold
like-gold•3y ago
Yeah, that should do the trick. No problem :reactquery:

Did you find this page helpful?