useAuth query for 'currentUser' won't catch error e.g. when "access_token" in localStorage is invalid

[zjs2k]

First Check

• I added a very descriptive title here.
• I used the GitHub search to find a similar question and didn't find it.
• I searched in the documentation/README.
• I already searched in Google "How to do X" and didn't find any information.
• I already read and followed all the tutorial in the docs/README and didn't find an answer.

Commit to Help

• I commit to help with one of those options 👆

Example Code

// in browser console, change or set "access_token" in localStorage, then go to login page
> localStorage.setItem('access_token', 'bad token')

Description

• Open browser and go to the login page: http://localhost/login, a login form will be shown.
• Set / change "access_token" in the console as the example code.
• Refresh the page and it stay in the loading state (showing spinner).

Operating System

Linux

Operating System Details

Use Visual Studio Code

Python Version

3.10

Additional Context

After set a bad access_token (mimic an invalid or expired token), the useQuery for 'currentUser' in useAuth hook will get an error when request user to the fastapi backend. But this error is not caught in the hook and can't be caught in a component even if I export the error from the hook.

I have no quick solution here. React Query deprecated onError callback for useQuery. So no quick solution inside the useAuth hook. My walkaround is the separate the readUseMe to its own hood and return the useQuery directly. Then I can check the query state and redirect to the login form, remove bad access_token, etc.

I would love to hear suggestions on how to do the error handling here.

• JZ