时间戳

首页 > 解决方案 > Apollo GraphQL 客户端格式请求不正确

react-native - Apollo GraphQL 客户端格式请求不正确

问题描述

我有一个在 react native 中运行的 Apollo GraphQL 客户端。它连接到运行graphQL的 lambda 实例。我的问题是我正在尝试向服务器发送变异请求（尚未设置查询），并且服务器正在获取以下内容并声明语法错误（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
    }
  }
`;

标签： react-nativelambdagraphqlreact-apolloapollo-server

解决方案

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

问题Content-Type: application/graphql在于GraphQL 执行由客户端提供的最多三个参数组成：

  1. 查询（必填）
  2. 查询的变量值
  3. 操作名称

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

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

推荐阅读