Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

223
Views
I keep getting a json parse error when using GraphQL and Apollo client

I'm using a SWAPI Wrapper for this project. And my code looks like it's right, but for some reason I keep getting a JSON Parse error: Unexpected EOF when trying to load the data. And when I do the following query at the GraphQL endpoint, it works:

{
  allPeople {
    edges {
      node {
        id
        name
        birthYear
        gender
        homeworld {
          name
        }
        species {
          name
        }
      }
    }
  }
}

...but when I do it in my file, I just get that error mentioned above. Below is my code:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import{
  ApolloClient,
  ApolloProvider,
  HttpLink,
  InMemoryCache,
} from '@apollo/client'

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: "https://graphql.org/swapi-graphql",
    useGETForQueries: true,
    fetchOptions: {
      mode: 'no-cors',
    }
  })
})

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();


App.js
import './App.css';

import { useQuery, gql } from '@apollo/client';

const ALL_PERSONS = gql`
query {
  allPeople {
    edges {
      node {
        id
        name
        birthYear
        gender
        homeworld {
          name
        }
        species {
          name
        }
      }
    }
  }
}
`;

function App() {
  const { loading, error, data} = useQuery(ALL_PERSONS);

  if (loading){
    return (
      <div>
        Loading...
      </div>
    );
  }
  else if (error){
    return(
      <div>
        <h1>Something went wrong!</h1>
        <p>Name: {error.name}</p>
        <p>Message: {error.message}</p>
        <p>Data: {data}</p>

      </div>
    );
  }
  else{
    return (
      <div className="App">
        <h1>Star Wars API</h1>
        <div>
          {data}
        </div>
      </div>
    );
  }
}

export default App;

Any help is appreciated! I'm new to using Apollo Client and GraphQL

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!