Question

当我从GraphiQL发布变异但从我的应用程序的客户端无效时，以下请求有效。

我在控制台中收到“POST http://localhost:3001/graphql 400（错误请求）”错误。

const post = {
  userId: store.user.id,
  imageURLs: store.post.request.aws.imageURLs,
  tags: store.post.tags,
  link: store.post.link,
};

const query = `mutation CreatePost($post: PostInput) {
  createPost(post: $post) {
    user,
    tags,
    imageURLs,
    link
  }
}`;

return fetch('/graphql', {
  method: 'post',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query,
    variables: {
      post,
    },
  }),
  credentials: 'include',
})

有谁知道发生了什么事？

Answer 1

你所拥有的很多东西似乎没问题，除了你在输入有效载荷上有突变功能并输入：

mutation CreatePost($post: PostInput) { ... // CreatePost is not needed

这是一个快速工作的示例，可以更好地解释使用InputObject进行突变所需的内容，并对请求使用fetch / node-fetch：

<强> fetching.js

let postUpdate = {
  id: randomInt,
  name: newPost.name
};

let url = 'http://localhost:4001/graphql';
let query = `mutation ($postUpdate: PostInput) {
  updatePost(postArgs: $postUpdate) { id, name }
}`;

let mutateInit = {
  mode: 'cors',
  method: 'post',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    query,
    variables: {
      postUpdate
    },
  })
};

fetch(url, mutateInit)
.then(res => res.text())
.then(out => {
  console.log('Mutate response:', out);
});

<强> Schema.js

...
const PostInput = new GraphQLInputObjectType({
  name: 'PostInput',
  description: 'Mutation Input',
  fields: () => ({
    num: {type: new GraphQLNonNull(GraphQLInt)},
    name: {type: new GraphQLNonNull(GraphQLString)}
  })
});

const Mutation = new GraphQLObjectType({
  name: 'PostMutations',
  description: 'Mutations for the Posts',
  fields: () => ({
    updatePost: {
      type: Post,
      args: {
        postArgs: { type: PostInput }
      },
      resolve: (value, { postArgs }) => {
        let post = Object.assign({}, postArgs);
        return post;
      }
    }
  })
});
...

基于其他示例，似乎存在一些模糊变量的问题，可能会导致很多人混淆。通过此示例，我们现在可以看到实际查询中所需的不同变量。为了更有意义，让我们看一下这个查询引用的内容：

mutation ($<mutation_payload>: <Input Type>) { <mutation_function>(<function_argument_name>: $<mutation_payload>) { <returned fields> } }

只要这些都正确地解析了上述部分，获取查询应该顺利进行。如果他们不这样做，你会发现自己有各种各样的问题，范围从“当有效载荷没有到达应有的位置时，不能返回null为非可空”，而是抱怨有关GraphQL查询本身的错误，因为某些东西像输入一样丢失类型。

Graphql Mutation适用于Graphiql但不适用于客户端

1 个答案: