时间戳

首页 > 解决方案 > GraphQL/ React 在 JSON 数据的第 1 行第 1 列抛出网络错误 JSON.parse：意外字符

json - GraphQL/ React 在 JSON 数据的第 1 行第 1 列抛出网络错误 JSON.parse：意外字符

问题描述

我有一个在 localhost:8080/someApplication/graphql 上运行的 Java GraphQL 端点（CORS 已激活），当我在 Altair（Firefox 插件）中编写查询时，我确实得到了一个有效的响应：

牵牛星

发布 http://localhost:8080/ someApplication /graphql

询问：

{
    someInformation
    {
        nameOfInformation
    }
}

返回：

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

所以查询似乎工作得很好。

反应

我配置了我的 GraphQL 客户端（localhost:3000），如下所示：

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>

结果

我总是收到以下错误：JSON.parse：JSON 数据的第 1 行第 1 列出现意外字符。

当我更改代码以使端点是 Apollo Launchpad 中的端点时，查询返回正确的结果并且不会引发错误。

有什么方法可以查看返回的数据并导致错误的样子？或者我在接收数据时做错了什么？我很感激这方面的任何帮助！感谢您查看这个！

标签： jsonreactjserror-handlinggraphqlapollo

解决方案

问题出在服务器上：如果您通过 HTTP 配置了 GraphQL Endpint，则您的类必须具有以下注释：

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

在我的情况下，传入的请求未被识别为 JSON，这是错误的原因。

推荐阅读