SyntaxError：在 Graphiql 中测试时，JSON 中位置 0 处出现意外标记 <

Posted 2023-03-10

【中文标题】SyntaxError：在 Graphiql 中测试时，JSON 中位置 0 处出现意外标记 <

【英文标题】：SyntaxError: Unexpected token < in JSON at position 0 when testing in Graphiql

【发布时间】：2019-05-22 16:02:44

【问题描述】：

我正在学习 GraphQL，并且是这项技术的新手。我无法找出此语法错误的原因。当我在 graphiql 上对其进行测试时，它会引发意外的令牌语法错误

这是我的 server.js：

const express = require("express");
const graphqlHTTP = require("express-graphql");
const schema = require("./schema");

const app = express();
app.get(
  "/graphql",
  graphqlHTTP(
    schema: schema,
    graphiql: true
  )
);

app.listen(4000, () => 
  console.log("Server listening to port 4000...");
);

这是我的架构：

const 
  GraphQLObjectType,
  GraphQLString,
  GraphQLInt,
  GraphQLSchema,
  GraphQLList,
  GraphQLNotNull
 = require("graphql");

// HARD CODED DATA
const customers = [
   id: "1", name: "John Doe", email: "[e-mail]", age: 35 ,
   id: "2", name: "Kelly James", email: "[e-mail]", age: 28 ,
   id: "3", name: "Skinny Pete", email: "[e-mail]", age: 31 
];

// CUSTOMER TYPE
const CustomerType = new GraphQLObjectType(
  name: "Customer",
  fields: () => (
    id:  type: GraphQLString ,
    name:  type: GraphQLString ,
    email:  type: GraphQLString ,
    age:  type: GraphQLInt 
  )
);

// ROOT QUERY
const RootQuery = new GraphQLObjectType(
  name: "RootQueryType",
  fields: 
    customer: 
      type: CustomerType,
      args: 
        id:  type: GraphQLString 
      ,
      resolve(parentValue, args) 
        for (let i = 0; i < customers.length; i++) 
          if (customers[i].id == args.id) 
            return customers[i];
          
        
      
    ,
    customers: 
      type: new GraphQLList(CustomerType),
      resolve(parentValue, args) 
        return customers;
      
    
  
);

module.exports = new GraphQLSchema(
  query: RootQuery
);

有人能指出我正确的方向吗？我无法弄清楚这里的问题？

【参考方案1】：

根据express-middleware 的文档，您应该使用app.use 安装中间件，而不是app.get：

app.use('/graphql', graphqlHTTP(schema, graphiql: true))

这样做将使 GraphiQL 在浏览器中可用，但也允许您向 /graphql 端点发出 POST 请求。通过使用app.get，您可以访问GraphiQL 界面，但无法实际发出POST 请求。当您在 GraphiQL 中发出请求时，它会尝试向您的端点发出 POST 请求，但由于您的应用程序未配置为接收它，因此请求失败。您看到的错误是尝试将缺少路由的通用错误快速抛出解析为 JSON 的结果。

【参考方案2】：

在我的情况下，这个错误消息是由一个愚蠢的错误引起的，所以我的故事可能对某人有用：

我没有使用"query":"graphqlQueryHere ..." 获得 JSON 值，而是发布了普通的 graphQL 查询而不是 JSON。请看看你不这样做。