Cannot read property 'then' of undefined for axios wrapper

Question

I have a bit of a similar issue like this but I can't seem to get it right. I know I have to return a promise and I think I do, although it's still not accepted. Here is my wrapper function for axios calls:

export const callGraph = (url, token) => {
  return axios.get(url, {headers: { Authorization: `Bearer ${token}` }})
}

This is the function that invokes callGraph that in turn should return a Promise :

export const getGraphProfile = () => {
  if (auth.getAccount()) {
    auth.getToken(loginRequest)
      .then(response => {
        return callGraph(graphConfig.graphMeUrl, response.accessToken)
      })
      .catch(error => { console.log(error) })
  }
}

As you can see I explicitly request return callGraph so I can use it like this:

getGraphProfile()
   .then(response => { console.log('givenName ', response.data.givenName) })
   .catch(error => console.log(error))

For one reason or another I'm still missing something. Thank you for your help.

Answer 1

You should return the axios promise

export const getGraphProfile = () => {
  if (auth.getAccount()) {
    return auth.getToken(loginRequest)
      .then(response => {
        return callGraph(graphConfig.graphMeUrl, response.accessToken)
      })
      .catch(error => { console.log(error) })
  }
}