Tanstack React Query: Data Undefined When Separating API Call Service and Hook with Auth0

Question

I'm currently working on a React application (with NX set up) where I’m using React Query to manage API calls and state. I have separated my API logic into a service file and created a custom hook to handle the data fetching with React Query. However, I’m encountering an issue where the data returned from my hook is undefined, despite the API call seemingly being successful.

service layer:

export const getUser = async (): Promise<IUser> => {
  const { getAccessTokenSilently } = useAuth0()

  const token = await getAccessTokenSilently({
    authorizationParams: {
      audience: 'secret audience here',
      scope: 'read:posts',
    },
  })

  const http = useAxios(config.server.apiEndUserUrl, token)
  const { data: user } = await http.get<{ data: IUser }>(GET_ACCOUNT)

  return user.data // Return the user data
}

hooks:

import { getUser } from '@react-webapp/services'
import { useQuery } from '@tanstack/react-query'

export const useEndUser = () => {
  return useQuery({
    queryKey: ['getEndUser'],
    queryFn: getUser,
  })
}

and then the usage:

 const [user, setUser] = useState<IUser>(INITIAL_USER)
  const { data: fetchedUser, isLoading, error } = useEndUser()

  useEffect(() => {
    console.log('fetchedUser', fetchedUser)

    if (fetchedUser) setUser(fetchedUser)
  }, [fetchedUser, isLoading])

output: fetchedUser undefined

but this approach works:

export const useEndUser = () => {
  const { getAccessTokenSilently } = useAuth0()

  return useQuery({
    queryKey: ['endUser'],
    queryFn: async () => {
    const token = await getAccessTokenSilently({
      authorizationParams: {
        audience: 'audience here',
        scope: 'read:posts',
      },
    })

    const http = useAxios(config.server.apiEndUserUrl, token)

  
      const { data: user } = await http.get<{ data: IUser }>(GET_ACCOUNT)
      return user.data
    },
  })
}

What I want is to have a separation of service and the query hooks, and why is this happening ?

Thanks for advance help !

React with NX set up

Node Version: v20.14.0

"@tanstack/react-query": "^5.59.0",

TkDodo · Accepted Answer · 2024-10-02 15:33:18Z

1

useAuth0 is a hook, and the rules of hooks forbid calling hooks from functions that aren’t themselves hooks. So this is a violation of the rules of hooks:

export const getUser = async (): Promise<IUser> => {
  const { getAccessTokenSilently } = useAuth0()

The second approach works because useAuth0 is called within another hook, useEndUser.

There are linters that catch these errors, I would encourage you to enable them in your code-base.

answered Oct 2, 2024 at 15:33

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

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

1 Comment

Poor programmer Over a year ago

thanks for you answer @TKDodo, it is clear for me now

Collectives™ on Stack Overflow

Tanstack React Query: Data Undefined When Separating API Call Service and Hook with Auth0

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