title: SyntaxError: Unexpected token S in JSON at position 0
body: <p>I have a netlify function which returns a correct data as well as success message which I call to my api. Though when I tried to show the data in my react front end it gives me error with promise status rejected.</p>
  
  <pre><code>Promise{pending}
  [[promiseStatus]]: rejected
  [[PromiseValue]]: SyntaxError: Unexpected token S in JSON at position 0
  </code></pre>
  
  <p>function which reads data from graphql 
  <strong>readWeight.js</strong></p>
  
  <pre><code>import fetch from 'node-fetch'
  
  exports.handler = async() =&gt; {
    console.log("inside");
    const response = await fetch(
      'https://graphql.fauna.com/graphql',
      {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${API_SECRET}`
        },
        body: JSON.stringify({
          query:`
          {allweight{data{weight}}}
          `
        })
      })
      .then(res =&gt; res.json())
      .catch(err =&gt; console.log(err))
      //console.log(response.data.allweight.data.map(w=&gt;console.log(w.weight)))
      //console.log(response)
    return {
      statusCode: 200,
      body: JSON.stringify(response)
    }
  }
  </code></pre>
  
  <p><strong>api.js</strong></p>
  
  <pre><code>const readAll = () =&gt; {
    return fetch('/.netlify/functions/readWeight').then((response) =&gt; {
      console.log(response)
      return response.json()
    })
  }
  </code></pre>
  
  <p>api.js response</p>
  
  <pre><code>Response {type: "basic", url: "http://localhost:3000/.netlify/functions/readWeight", redirected: false, status: 200, ok: true, …}
  type: "basic"
  url: "http://localhost:3000/.netlify/functions/readWeight"
  redirected: false
  status: 200
  ok: true
  statusText: "OK"
  headers: Headers {}
  body: (...)
  bodyUsed: true
  __proto__: Response
  </code></pre>
  
  <p><strong><em>app.js</em></strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import api from './api'
  
  export default class App extends Component {
    state = {
      weight: []
    }
    componentDidMount() {
      // Fetch all todos
      console.log(api.readAll())
      api.readAll().then((t) =&gt; {
        this.setState({
          weight: weight
        })
      })
    }
  render(){
  return(
  &lt;h1&gt;Test
            {this.state.todos}&lt;/h1&gt;
  )
  }
  
  
  }
  </code></pre>