reactjs - 如何使用react-adopt动态设置突变变量？

在我的组件中，我正在使用react-adopt来组成graphql查询和突变，以使我的渲染道具不会太混乱。我有以下代码：

这是我的变异，它需要一个参数-planID。

const CREATE_ORDER_MUTATION = gql`
  mutation CREATE_ORDER_MUTATION($planID: String!) {
    createOrder(planID: $planID) {
      planID
      name
      description
      subscriptionType
      images
      subscriptionType
      pricePerMonth
}
}

这是采用功能，它需要几个突变，其中之一是createOrder。 Apollo的工作方式是我需要在此处将变量prop传递给createOrder组件。问题是，我目前没有planID。 planID仅在实际组件内部可用。

const Composed = adopt({
  toggleCart: <Mutation mutation={TOGGLE_CART_MUTATION} />,
  createOrder: <Mutation mutation={CREATE_ORDER_MUTATION} />,
});

我的组件看起来像这样。我在这里有planID，但是如何将其作为突变的参数传递呢？

render() {
const { plan } = this.props;
return (
  <Composed>
    {({ toggleCart, createOrder }) => {
      const handleAdd = () => {
        toggleCart();
        Router.push('/waschingmachine');
        createOrder();
      };
      return (
        <StyledPlan>
          <h1>{plan.name}</h1>
          <p>{plan.description}</p>
          <img src={`static${plan.images[0]}`} alt="blue1" />
          <h2>{plan.pricePerMonth / 100} EUR</h2>
          <div className="buttons">
            <Link
              href={{
                pathname: '/plan',
                query: { id: plan.id },
              }}
            >
              <button type="button">info</button>
            </Link>
            <button onClick={handleAdd} type="button">
              Select Plan
            </button>
          </div>
        </StyledPlan>
      );
    }}
  </Composed>
);
}

如果没有办法以这种方式解决它，您将如何以不同的方式来解决？

最佳答案

可以通过选项调用在渲染的子代中传递的mutate函数。
选项可以包括在GraphQL突变字符串中使用的变量。 [1]。

这意味着您可以像这样调用createOrder变异函数。

createOrder({ variables: { planID: 'some plan id' } });

鉴于planID的动态性质，有多种方法可以实现此目的。其中之一是使用数据属性，如下所示：

可以在按钮上为计划ID设置data属性。

<button onClick={handleAdd} data-planid={plan.id} type="button">
      Select Plan
</button>

可以重构handleAdd以从目标数据集属性获取planid并使用createOrder变量调用planID。

const handleAdd = event => {
    const planID = event.target.dataset.planid;
    toggleCart();
    Router.push('/waschingmachine');
    createOrder({ variables: { planID } });
};

另一个方法是在按钮的planID属性中调用handleAdd时将其直接传递给onClick。

<button onClick={() => handleAdd(plan.id)} type="button">
      Select Plan
</button>

然后更新处理程序

const handleAdd = planID => {
    toggleCart();
    Router.push('/waschingmachine');
    createOrder({ variables: { planID } });
};

两种方法都需要权衡。对于较早的方法，将planid在DOM中设置为属性，以后可以读取。
对于下一个，为N个计划创建了N个处理程序，并将它们保存在内存中。