React与GraphQL场景下处理购物车数组 实现订单Mutation入参格式适配

调整方案 #

1. 修正Apollo Mutation定义 #

你原来的Mutation入参类型不符合多商品提交的需求，直接把整个订单项数组作为变量传入即可，注意输入类型要和后端定义的结构保持一致：

const CREATE_ORDER_MUTATION = gql`
  mutation createOrder(
    $orderedItems: [OrderedItemInput!]!
    $paymentMethod: String!
    $address: String!
  ) {
    createOrder(
      orderedItems: $orderedItems
      paymentMethod: $paymentMethod
      address: $address
    ) {
      id
      orderedItems {
        qty
        products {
          id
          name
          sku
          description
        }
      }
    }
  }
`;

注意：如果后端定义的订单项输入类型名不是OrderedItemInput，或者商品ID对应的字段名不是product，请对应修改为后端要求的命名

2. 修改前端数据处理逻辑 #

不需要单独拆分数量和商品ID两个数组，直接遍历购物车数据生成符合要求的订单项结构即可：

const [cartItems, setCartItems] = useContext(CartContext);
const [createOrder, { data, loading }] = useMutation(CREATE_ORDER_MUTATION);

function onSubmit() {
  // 生成符合入参要求的订单项数组
  const orderedItems = cartItems.map(item => ({
    qty: item.quantity,
    product: item.id
  }))

  createOrder({
    variables: {
      orderedItems,
      paymentMethod: paymentMethod,
      address: address,
    },
  })
}

原写法问题说明 #

• 原来的Mutation把qty定义为单个Int类型、products定义为单个String类型，完全不支持多个商品的数组入参场景
• 拆分两个独立数组的逻辑冗余，直接按结构映射购物车项的写法更简洁，也不会出现两个数组下标对应错误的问题

内容的提问来源于stack exchange，提问作者Mohammad Khan