GraphQL - 查询看起来不错，但出现 400 错误

Question

因此，每当我尝试通过突变将产品添加到库存列表时，我都会收到 POST http://localhost:3000/graphql 400（错误请求）。我可以毫无问题地在沙箱中执行突变。而且，检索信息的查询工作得很好。我仔细检查了所有使用的名称，似乎没有任何问题。下面是代码：

来自 App.jsx：

async createProduct(product) {
    const query = `mutation addProduct($product: ProductInputs!) {
      addProduct(product: $product) {
        id
      }
    }`;

    await fetch('/graphql', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ query, variables: { product }})
    });

    await this.loadData();
}

来自 schema.graphql：

enum InventoryCategory {
  Shirts
  Jeans
  Jackets
  Sweaters
  Accessories
}

type Product {
  id: Int!
  category: InventoryCategory!
  name: String!
  price: Float
  imageURL: String
}

"Toned down Product, used as inputs, without server generated values."
input ProductInputs {
  category: InventoryCategory!
  name: String
  price: Float
  imageURL: String
}

##### Top level declarations

type Query {
  productList: [Product!]!
}

type Mutation {
  addProduct(product: ProductInputs!): Product!
}

来自 server.js

const inventoryDB = [];

const resolvers = {
  Query: {
    productList,
  },
  Mutation: {
    addProduct,
  },
};

function productList() {
  return inventoryDB;
}

function addProduct(_, { product }) {
  product.id = inventoryDB.length + 1;
  inventoryDB.push(product);
  return product;
}

有什么明显不正确的地方吗？我似乎无法弄清楚为什么我总是收到 400 错误。我似乎找不到查询（突变）本身的问题。有什么想法吗？

编辑：检索信息的查询工作得很好。请参阅下面的代码：

async loadData() {
    const query = `query {
      productList {
        id
        category
        name
        price
        imageURL
      }
    }`;

    const response = await fetch('/graphql', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ query })
    });

    const body = await response.text();
    const result = JSON.parse(body);
    this.setState({ products: result.data.productList });
}

Answer 1

所以，我找到了问题所在。问题在于价格，GraphQL 期望该价格是一个浮点数，但我发送的是一个字符串。我必须将文本输入转换为正确的格式，瞧，它成功了。对于转换，我使用：

parseFloat(form.price.value.substring(1))

并还使用：

{new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(product.price)}

以确保正确的显示格式。