reactjs - 基于动态表单值的 GraphQL 变异 (React/Apollo/Magento)

Question

我在 React 电子商务应用程序中使用 @apollo/client 来处理 Magento GraphQL 突变，并寻找一种基于表单字段值来处理触发突变的最佳方法。

当一堆字段被填充时，我正在使用setShippingAddressesOnCart设置地址，但是如何在表单字段更改时再次利用执行突变，而不会陷入循环/重新渲染？

我将地址字段粘贴到一个对象中：

const address = {
  firstname: fields?.firstName,
  lastname: fields?.lastName,
  street: fields?.street,
  city: fields?.city,
  region: fields?.province?.value,
  postcode: fields?.postcode,
  country_code: fields?.country?.id,
  telephone: fields?.phone,
  ...(fields?.companyName ? { company: fields?.companyName } : null)
};

将其传递给突变钩子：

const [setAddress] = useMutation(SET_BILLING_ADDRESS, {
  variables: { cartId, address }
});

并调用该函数（选择运输方式时）：

useEffect(() => {
  if (
    fields?.shippingMethod &&
    Object.values(address).every(field => field)
  ) {
    setAddress();
  }
}, [address, fields?.shippingMethod]);

但这就是我最终陷入循环类型的情况的地方，并且在任何地址字段发生更改时都无法想出一种有效运行它的方法。

标签： reactjsformsmagentographqlapollo-client