Apollo-Server-Express GraphQL请求变量接收异常问题排查求助

根因定位与解决方案 #

1 最高概率根因：Resolver函数参数签名错误

Apollo Server所有Resolver的固定函数签名为 (父级返回值, 入参对象, 上下文, 元信息)，共4个入参，所有客户端传入的参数都会被整合到第二个入参对象中。
你遇到的「所有参数被打包到password变量、email为undefined」的现象，完全符合Resolver参数顺序写反的特征，错误写法示例：

// 错误示例：错误将第一个参数命名为email、第二个参数命名为password
const resolvers = {
  Query: {
    signIn: (email, password) => {
      // 此处email实际是第一个参数：父级返回值，默认就是undefined
      // 此处password实际是第二个参数：所有入参的集合对象，包含email、password两个属性
      // 如果你业务代码里是从password对象中取email和password字段使用，就会出现返回结果正常，但参数变量名不符合预期的情况
    }
  }
}

修复方法：从第二个入参中解构所需字段即可

// 正确写法
const resolvers = {
  Query: {
    signIn: (_, { email, password }) => {
      // 此处可正常获取独立的email、password参数
    }
  }
}

2 其他可能根因及修复方案

• 请求封装方法入参格式错误
  检查你使用的requests.post方法的参数要求，大部分HTTP库的post方法第一个参数为请求URL，第二个参数才是请求体。如果你的封装符合该规则，修改客户端代码：

signIn: (email: string, password: string) => requests.post('/你的GraphQL接口地址', {
  query: `
    query ($email: String!, $password: String!) {
        signIn(email: $email, password: $password) {
            _id
            name
            email
            avatar
            admin
            rents{
                _id
            }
            createdAt
            updatedAt
          }
        }
    `,
  variables: { email, password }
})

• 服务端Schema入参类型不匹配
  检查服务端Schema中signIn的入参定义，如果是要求传入单个Input对象而非两个独立String参数，需要同步客户端查询写法与变量结构。
  示例Schema：

input SignInInput {
  email: String!
  password: String!
}
type Query {
  signIn(input: SignInInput!): User
}

对应客户端修改：

signIn: (email: string, password: string) => requests.post({
  query: `
    query ($input: SignInInput!) {
        signIn(input: $input) {
            _id
            name
            email
            avatar
            admin
            rents{
                _id
            }
            createdAt
            updatedAt
          }
        }
    `,
  variables: { input: { email, password } }
})

• Body解析中间件冲突
  确认express服务的JSON解析中间件注册顺序早于Apollo Server中间件，避免请求体解析异常：

const app = express();
// 必须先注册JSON解析中间件
app.use(express.json());
// 再注册Apollo Server中间件
const server = new ApolloServer({ typeDefs, resolvers });
await server.start();
server.applyMiddleware({ app });

内容的提问来源于stack exchange，提问作者Hristo hristov