如何在 GraphQL 突变的 fetch 请求中格式化你的 body？

Question

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

我已经定义了一个“办公室”模型。这是文档的样子：

{
  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

您在“我的办公室”之后缺少一个右括号，以指示您的论点列表的结尾。

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

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