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

时间:2019-09-04 20:34:51

标签: react-native lambda graphql react-apollo apollo-server

我有一个在React native中运行的Apollo GraphQL客户端。它连接到运行graphQL的lambda实例。我的问题是我正在尝试向服务器发送一个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
}
}"}

邮递员的正常请求。

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

本机应用程序中的代码

// 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
    }
  }
`;

1 个答案:

答案 0 :(得分:2)

大多数通过HTTP接受请求的GraphQL服务器正在侦听两种不同类型的内容(用the Content-Type header表示):%application/graphql。您的服务器似乎只监听application/json正文的请求。

application/graphql的问题在于GraphQL execution由最多三个可由客户端提供的参数组成:

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

这使查询文档完全是静态的。但是,如果请求的内容仅是GraphQL查询,则其他参数需要放在其他地方。从理论上讲,它们可以作为GET参数提供,但通常所有客户端都使用JSON格式提供here概述的所有三个。

正如Daniel指出的那样,您可以对所选的框架/技术使用GraphQL服务器实现来为您处理。 或者,您必须自己对请求的标头做出反应(这可能是一个很好的练习,但是您可能会错过图书馆作者想到的一个极端情况)。