你如何在 GraphQL 突变的获取请求中格式化你的正文？

Question

我是第一次尝试 GraphQL，我正在尝试 POST 一些数据并在 MongoDB 数据库中创建一个新文档。

我已经定义了一个 "Office" 模型。文档如下所示：

{
  fax: 4161234567,
  image: {
    full: 'http://placehold.it/1400x800',
    large: 'http://placehold.it/1000x600',
    medium: 'http://placehold.it/700x400',
    small: 'http://placehold.it/400x200'
  },
  location: {
    address: '123 Street Name',
    city: 'Toronto',
    country: 'Canada',
    countryCode: 'CA',
    state: 'ON',
    suite: null,
    zip: 'H6L 1C8'
  },
  phone: 4161234567,
  slug: 'office-name',
  title: 'Office Name' 
}

我在服务器上使用 Node 和 Express。这是我的突变：

const schema = buildSchema(`
  type Image {
    full: String
    large: String
    medium: String
    small: String
  }

  type Location {
    address: String
    city: String
    country: String
    countryCode: String
    state: String
    suite: String
    zip: String
  }

  input ImageInput {
    full: String
    large: String
    medium: String
    small: String
  }

  input LocationInput {
    address: String
    city: String
    country: String
    countryCode: String
    state: String
    suite: String
    zip: String
  }

  type Office {
    _id: String
    fax: Float
    image: Image
    location: Location
    phone: Float
    slug: String
    title: String
  }

  type Mutation {
    createOffice(fax: Float, image: ImageInput, location: LocationInput, phone: Float, slug: String, title: String): Office
  }
`);

客户端，我有这个：

fetch('http://localhost:4300/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    query: 'mutation { createOffice(fax: 5041234567, image: {full: "http://placehold.it/1400x800", large: "http://placehold.it/1000x600", medium: "http://placehold.it/700x400", small: "http://placehold.it/400x200"}, location: {address: "456 Wilcox Ave.", city: "Montreal", country: "Canada", countryCode: "CA", state: "QC", suite: 2300, zip: "H3A 0A8"}, phone: 5047654321, slug: "my-office", title: "My Office" { phone }  }'
  }),
})
.then((res) => {
  return res.json();
})
.then((res) => {
  console.log(res.data);
});

我收到这些错误：

Syntax Error: Expected Name, found {"

我认为这是我的语法问题：

body: JSON.stringify({
  query: 'mutation { createOffice(fax: 5041234567, image: {full: "http://placehold.it/1400x800", large: "http://placehold.it/1000x600", medium: "http://placehold.it/700x400", small: "http://placehold.it/400x200"}, location: {address: "456 Wilcox Ave.", city: "Montreal", country: "Canada", countryCode: "CA", state: "QC", suite: 2300, zip: "H3A 0A8"}, phone: 5047654321, slug: "my-office", title: "My Office" { phone }  }'
})

我做错了什么？

Answer 1

您在 "My Office" 之后缺少一个右括号来指示参数列表的结尾。

假设您正在为您的 HTTP 服务器使用 apollo-server、express-graphql 或类似的库，您应该有一个 GraphiQL 或 GraphQL Playground暴露的接口，您可以使用它来测试您的查询。如果没有，您也可以使用独立客户端。在任何一种情况下，您都可以在具有自动完成和语法突出显示功能的编辑器中编写和测试查询，从而更容易捕获此类语法错误。

您可能还会发现，在前端编写查询时使用 template literals 会很有帮助，这样可以避免将所有内容都放在一行中。

你如何在 GraphQL 突变的获取请求中格式化你的正文？

How do you format your body in a fetch request for a GraphQL mutation?

fetch

graphql

graphql-mutation