React query and optional chaining async await function

Question

I don't think I understand how optional chaining affects the async/await functions.

I have a simple function that returns the user from Firebase Auth.

export async function getCurrentUser() {
  const curUser = await projectAuth.currentUser?.getIdTokenResult();
  return curUser || null;

With this code, if currentUser is null, curUser becomes undefined so I return null because react queryKey can not work with undefined results.

The problem is that, even when there is a logged in user, untill I manually click "refetch" in
ReactQueryDevTools, the data will not appear in cache and, therefore, will not appear in the UI. In other words, on page reload, there is no user in cache untill I refetch the data.

Why is that?

When I don`t use optional chaining, I dont need to manually refetch to see the user in cache - I can see the returned curUser.

But in this case, without optional chaining, I have error:

Cannot read properties of null (reading 'getIdTokenResult')

Here is the react query hook:

export function useCurrentUser() {
  const { isLoading, data: user } = useQuery({
    queryKey: ["user"],
    queryFn: getCurrentUser,
    onError: (err) => console.log(err),
  });

  return { isLoading, user };
}

The reason why I know for sure that there is a logged in User is because when I try to get the user directly from the components, skipping the React Query step, I`m able to see the user.

So I'm not sure why I have to refetch the data manually with optional chaining or how to get rid of the type error if I dont user optional chaining.

ontanj · Accepted Answer · 2023-09-30 16:49:18Z

0

This has not so much to do with optional chaining as it has with useQuerys cache mechanism.

The reason for this is that on first render projectAuth.currentUser === undefined. So useQuery persist the value null in the cache, and depending on your cacheTime and staleTime settings it will remain there and be returned on every render.

What you want to do is inform useQuery once projectAuth.currentUser !== undefined to trigger a new fetch. This is done by updating the queryKey.

Update to

queryKey: ["user", projectAuth.currentUser?.possiblySomePropertyToMakeThisAPrimitiveType]

and now useQuery will refetch as soon as currentUser is in place.

answered Sep 30, 2023 at 16:49

ontanj

1,7921 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Over a year ago

Thank you for your response! I updated the queryKey to include currentUsers email, but the issue persists: on the first page load, it is null until I manually refetch it...

Collectives™ on Stack Overflow

React query and optional chaining async await function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related