How to use next.js router.push() properly with an useQuery custom hook call?
Hi all, I am wondering what is the best way to redirect to another page when calling a custom hook that uses useQuery. Specifically, on the dashboard page of an app I am calling useCognitoUser to check if there is a current user logged in. If a user is not logged in an error will be returned from the fetch and I want to route the user to the login page. See custom hook below.
export function useCognitoUser({
onSuccess,
onError,
}: UseCognitoUserProps = {}) {
return useQuery({
queryKey: ['cognitoUser'],
queryFn: async () => {
const { attributes } = await Auth.currentAuthenticatedUser()
return attributes as CognitoUserAttributes
},
onSuccess,
onError,
})
}
Currently, when this hook is called on the dashboard page I am using an onError callback to route to the login page if there is no current user logged in, see below.
export default function DashboardPage() {
const router = useRouter()
const cognitoUser = useCognitoUser({
onError() {
router.push('/auth/login')
},
})
However, with this implementation, for some reason when I trigger an error for the 'cognitoUser' query in the react-query dev tools, I am not getting the routing to the login page for testing purposes, although it does work properly outside of the dev tools context when an non-logged in user tries to navigate to the dashboard page. I am wondering if instead I should do the routing inside of an if (cognitoUser.isError) conditional. This implementation does work to route to the login page when an error is triggered with the dev tools and routes back to the dashboard page when the error is restored. My opposition to using this implementation is I know it is not best practice to cause side effects like this.
export default function DashboardPage() {
const router = useRouter()
const cognitoUser = useCognitoUser()
if (cognitoUser.isError) {
router.push('/auth/login')
}
Any thoughts/insight on this would be much appreciated.
export function useCognitoUser({
onSuccess,
onError,
}: UseCognitoUserProps = {}) {
return useQuery({
queryKey: ['cognitoUser'],
queryFn: async () => {
const { attributes } = await Auth.currentAuthenticatedUser()
return attributes as CognitoUserAttributes
},
onSuccess,
onError,
})
}
Currently, when this hook is called on the dashboard page I am using an onError callback to route to the login page if there is no current user logged in, see below.
export default function DashboardPage() {
const router = useRouter()
const cognitoUser = useCognitoUser({
onError() {
router.push('/auth/login')
},
})
However, with this implementation, for some reason when I trigger an error for the 'cognitoUser' query in the react-query dev tools, I am not getting the routing to the login page for testing purposes, although it does work properly outside of the dev tools context when an non-logged in user tries to navigate to the dashboard page. I am wondering if instead I should do the routing inside of an if (cognitoUser.isError) conditional. This implementation does work to route to the login page when an error is triggered with the dev tools and routes back to the dashboard page when the error is restored. My opposition to using this implementation is I know it is not best practice to cause side effects like this.
export default function DashboardPage() {
const router = useRouter()
const cognitoUser = useCognitoUser()
if (cognitoUser.isError) {
router.push('/auth/login')
}
Any thoughts/insight on this would be much appreciated.
