GraphQL: Network error: Unexpected token < in JSON at position 0

I am learning GraphQL and I created a server and when I test it on graphiql, it run perfectly

as you can see, the query returns a list of books which contains name and genre and now I want to implement on the client side (which is written by react and apollo graphql)

App.js

import './App.css';
import ApolloClient from 'apollo-boost';
import {ApolloProvider} from 'react-apollo';

import BookList from './components/BookList';

const client = new ApolloClient({
  url: 'http//localhost:4000/graphql',
});

function App() {
  return (
    <ApolloProvider client={client}>
      <div id="main">
        <h1>Ninja 's Reading List</h1>
        <BookList />
      </div>
    </ApolloProvider>
  );
}

export default App;

components/BookList.jsx

import React, { Component } from 'react';
import { gql } from 'apollo-boost';
import { graphql } from 'react-apollo';

const getBooksQuery = gql`
    {
        books {
            name
            id
        }
    }
`;

class BookList extends Component {
    render(){
        console.log(this.props);
        return(
            <div>
                <ul id="book-list">
                    <li>Book name</li>
                </ul>
            </div>
        );
    }
}

export default graphql(getBooksQuery)(BookList);

and this is the error that I got

It look like the getBooksQuery was wrong but I can not find the difference (even though I copied from the graphiqlto make sure it was not typo but I still got this error)

Please help me to tackle it, I follow this tutorial and the error I got in the video #26 or #27 of the playlist, please have a watch if you think it helps, the code repo under the description section below

https://www.youtube.com/watch?v=uyrUI1tgayk&list=PL4cUxeGkcC9iK6Qhn-QLcXCXPQUov1U7f&index=27

Thank you so much and have a good day