CODEWITHSUNDEEP
jsonreactjserror-handlinggraphqlapollo
Karem_GO
Karem_GO

Reputation: 21

GraphQL/ React throws Network Error JSON.parse: unexpected character at line 1 column 1 of the JSON data

I have a Java GraphQL Endpoint running at localhost:8080/someApplication/graphql (CORS activated) and when I write a query in Altair (Firefox-plugin), I do get a valid response:

Altair

POST http://localhost:8080/someApplication/graphql

query: 

{
    someInformation
    {
        nameOfInformation
    }
}

returns:

{
    "data": {
        "someInformation": 
        [
          {
            "nameOfInformation": "hi"
          }
        ]
      },
      "errors": [],
      "dataPresent": true,
      "extensions": null
}

So the query seems to be working just fine.

React

I configured my GraphQL client (localhost:3000) as follows:

const httpLink = createHttpLink({
    uri: "http://localhost:8080/someApplication/graphql",
});

const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache()
});

....
<ApolloProvider client={client}>
<Query query={gql`
    {
        someInformation{
            nameOfInformation
        }
    }
`}
>
    {({loading, error, data}) => {
        if (loading) return <p>Loading...</p>;

        if (error) return <p>{error.networkError.message}</p>;

        return data.someInformation.map(({nameOfInformation})=> (
            <p>{`${nameOfInformation}`}</p>
        ));
    }}
</Query>
</ApolloProvider>

Result

I always get following error: JSON.parse: unexpected character at line 1 column 1 of the JSON data.

When I change the code so that the endpoint is the endpoint in Apollo Launchpad, the query returns the correct result and no error is thrown.

Is there any way I could see what the data that is returned and causes the error looks like? Or is there anything I am doing wrong in receiving the data? I appreciate any help with this! Thanks for looking into this!

Upvotes: 1

Views: 3830

Answers (1)

Karem_GO
Karem_GO

Reputation: 21

The Problem was on the Server: If you configured your GraphQL Endpint over HTTP, your class must have the following Annotations:

@Path("/your-path-here")
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_JSON)
public class yourClass {... }

In my case the incomming Requests weren't recognized as JSON, which was the reason for the error.

Upvotes: 1

Related Questions