title: How to call fetch API one after another in React?
body: <p>I have two APIs to backend of OAuth : </p>
  
  <pre><code>app.get('/auth/google',passport.authenticate('google', {
                  scope: ['profile']
              })
          )
  
  
  
  app.get('/auth/google/callback',passport.authenticate('google', { failureRedirect: '/login' }),
          (req, res) =&gt; {
              console.log(req.user.google)
  
              res.json(req.user.google)
          }
      )
  </code></pre>
  
  <p><strong>Front End (JSX)</strong></p>
  
  <pre><code> //All under React class
   getData = () =&gt; {
         fetch('http://localhost:8080/auth/google/callback',{
         mode: 'no-cors',
         method: 'get'
        })
     .then(response =&gt; response.text())
     .then(text =&gt; console.log(text))
  }
  
   callFirstApi = () =&gt; {
         fetch('http://localhost:8080/auth/google',{
         mode: 'no-cors',
         method: 'get'
    })
   .then(this.getData()) 
  } 
  
  
  
   render(){
       return(
            &lt;div className = "" &gt;
         &lt;input onClick = { this.callFirstApi }
  
    type = "submit"
    value = "Register with Google" /&gt;
    &lt;/div&gt; 
         )
    }
  </code></pre>
  
  <p><strong><em>_____________________________________________________________________________</em></strong>
  <strong>Terminal(Console)</strong></p>
  
  <p><strong><em>InternalOAuthError: Failed to obtain access token
      at Strategy.OAuthStrategy._createOAuthError GET /auth/google/callback?oauth_token=81--b09b6480-9faa-45ee-ac78-1934190&amp;oauth_verifier=28583 500 289.147 ms - 1295</em></strong></p>
  
  <p>{ id: 'q5iPMrRJab',</p>
  
  <p>token: 'bfc0bb7-f7c5-4ef5-b97c-0b3e77bf550a',</p>
  
  <p>tokenSecret: 'd473705-ddd3-487b-8838-849a476b29ed',</p>
  
  <p>firstName: 'Some name',</p>
  
  <p>lastName: 'some name'</p>
  
  <p>}</p>
  
  <p><strong><em>GET /auth/google/callback?oauth_token=81--d2c05-1af2-4dff-b228-98d88f2caddf&amp;oauth_verifier=59719 200 1639.049 ms - 210</em></strong></p>
  
  <p><strong><em>_____________________________________________________________________________</em></strong></p>
  
  <p>Since <strong>/auth/google</strong> does not give any response it triggers its <strong>callback</strong> api that is why I am trying to nest a callback fetch inside an <strong><em>auth/google</em></strong> to get the data.
  But weirldy, in my console I am getting first token error then followed by a user data and it is not passing any data into frontend</p>
  
  <p>How can I achieve this nested fetch api situation and send to react components ?</p>