Apollo GraphQL 客户端格式化请求不正确

Question

我在 React Native 中有一个 Apollo GraphQL 客户端运行。它连接到一个 lambda 实例运行 graphQL。我的问题是我正在尝试向服务器发送一个 mutate 请求（尚未设置查询），并且服务器正在获取以下内容并声明语法错误（Expected Name, found String \"operationName\"）。

当我测试 graphQL 服务器时，请求看起来像下面指定的那些。 Apollo Client 是否没有正确格式化请求（如果是，为什么不）或者它是否按预期运行？

正文从 Apollo 客户端发送到 graphQL lambda：

{
"operationName": "createUser",
"variables": {
    "firstName": "Jane",
    "lastName": "Doe",
    "email": "jane@doe.com",
    "username": "jane_doe.com",
    "provider": "none"
    "jwt": "none"
},
"query": "mutation createUser($firstName: String!, $lastName: String!, $email: String!, $username: String!, $provider: String, $jwt: String!) { 
createUser(firstName: $firstName, lastName: $lastName, email: $email, username: $username, provider: $provider, jwt: $jwt) {
    createdAt
    __typename
}
}"}

来自 Postman 的正常请求。

mutation {
  createUser(firstName: "Jane", lastName: "Doe", email: "jane@doe.com", username: "jane_doe.com", jwt: "none", provider: "none") {
    firstName
  }
}

来自 react-native 应用程序的代码

// The mutation in the render function
<Mutation mutation={createUserMutation}>
  {(createUser, error) => {
    console.log('error-----------', error);
    // If there is an error throw the error
    if (error) {
      console.log('error----------', error);
    }
    if (createUser) {
      // If the response has data load the response data via the createPlayer property.
      return (
        <LoginButton
          onPress={() => {
            this.signIn(createUser);
          }}
        />
      );
    }

    // By default it is loading the result so just return loading...
    return <Text>Loading...</Text>;
  }}
</Mutation>

// The signin function called when the user presses the login button
async signIn(createUser) {
  ...
  try {
    Auth.signIn(un, password)
      .then(data => {
        ...
        this.createUserFunc(
          createUser,
          'Jane',
          'Doe',
          'jane@doe.com',
          'jane_doe.com',
          'none',
          'none'
        );
   }
   ...
}

// The create user function called from the signin function
createUserFunc = (func, firstName, lastName, email, username, provider, jwt) => {
  const newUser = {
    firstName,
    lastName,
    email,
    username,
    provider,
    jwt,
  };
  func({variables: newUser});
};

// The gql syntax mutation
const createUserMutation = gql`
  mutation createUser(
    $firstName: String!
    $lastName: String!
    $email: String!
    $username: String!
    $provider: String
    $jwt: String!
  ) {
    createUser(
      firstName: $firstName
      lastName: $lastName
      email: $email
      username: $username
      provider: $provider
      jwt: $jwt
    ) {
      createdAt
    }
  }
`;

Answer 1

大多数通过 HTTP 接受请求的 GraphQL 服务器正在侦听两种不同类型的内容（用 the Content-Type header 表示）：application/graphql 和 application/json。您的服务器似乎只收听带有 application/graphql body.

的请求

Content-Type: application/graphql 的问题在于 GraphQL execution 最多包含三个可由客户端提供的参数：

查询（必填）
查询的变量值
操作名称

这使查询文档成为完全静态的。但是如果请求的内容只是 GraphQL query，其他的参数就需要去别的地方了。理论上它们可以作为 GET 参数提供，但通常所有客户端都使用 JSON 格式来提供所有三个 here.

正如 Daniel 所指出的，您可以为您选择的 framework/technology 使用 GraphQL 服务器实现来为您处理。或者，您必须自己对请求的 header 做出反应（这可能是一个很好的练习，但您可能会错过库作者已经想到的边缘情况）。

Apollo GraphQL 客户端格式化请求不正确

Apollo GraphQL Client formatting requests improperly

react-native

lambda

graphql

react-apollo

apollo-server