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();
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