Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

226
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda