如何使用react-adopt动态设置变异中的变量? [英] How to dynamically set variables in mutation with react-adopt?

问题描述

在我的组件中，我使用 react-adopt 来组合 graphql 查询和突变，这样我的渲染道具就不会变得太混乱.我有以下代码:

这是我的突变，它需要一个参数 - planID.

const CREATE_ORDER_MUTATION = gql`突变 CREATE_ORDER_MUTATION($planID: String!) {创建订单(计划ID:$计划ID){计划ID名称描述订阅类型图片订阅类型每月价格}}

这是采用函数，它需要进行一些更改，其中之一是 createOrder.Apollo 的工作方式是我需要将变量 prop 传递给这里的 createOrder 组件.问题是，此时我没有计划 ID.planID 仅在实际组件内部可用.

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

我的组件看起来像这样.我在这里有可用的 planID，但是我如何将它作为参数传递给突变?！

render() {const {计划} = this.props;返回 (<组成>{({toggleCart, createOrder }) =>{const handleAdd = () =>{切换购物车();Router.push('/洗衣机');创建订单()；};返回 (<风格化计划><h1>{plan.name}</h1><p>{plan.description}</p><img src={`static${plan.images[0]}`} alt="blue1"/><h2>{plan.pricePerMonth/100} EUR</h2><div className="按钮"><链接href={{路径名:'/计划'，查询:{ id: plan.id },}}><button type="button">info</button></链接><button onClick={handleAdd} type="button">选择方案

</StyledPlan>);}}</组成>);}

如果没有办法以这种方式解决它，你会如何以不同的方式来解决它?

解决方案

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

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

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

鉴于 planID 的动态特性，有多种方法可以实现这一点.其中之一是使用如下数据属性:

可以为按钮上的计划 ID 设置 data 属性.

选择方案

可以重构

handleAdd 以从目标数据集属性中获取 planid 并使用 planID 变量调用 createOrder.

const handleAdd = event =>{const planID = event.target.dataset.planid;切换购物车();Router.push('/洗衣机');createOrder({ 变量: { planID } });};

另一种是在按钮的 onClick 属性中调用时，将 planID 直接传递给 handleAdd.

handleAdd(plan.id)} type="button">选择方案

然后更新处理程序

const handleAdd = planID =>{切换购物车();Router.push('/洗衣机');createOrder({ 变量: { planID } });};

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

In my component, I am using react-adopt, to compose graphql queries and mutations, so that my render props don't get too messy. I have the following code:

This is my mutation, it takes one argument - planID.

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

This is the adopt function, it takes a couple of mutations, one of which is createOrder. The way Apollo works is that I need to pass variables prop to createOrder component here. The problem is, I don't have the planID at this point. planID is available only inside of the actual component.

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

My component looks like this. I have the planID available here, but how can I pass it as an argument to mutation?!

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>
);
}

If there is no way to solve it this way, how would you approach it differently?

解决方案

The mutate function passed in the rendered children can be called with options. Options can include variables used in the GraphQL mutation string. ^[1].

This means that you can call the createOrder mutation function like so.

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

Given the dynamic nature of planID, there are a number of ways to implement this. One of which is to use data attributes as below:

A data attribute can be set on for the plan id on the button .

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

handleAdd can be refactored to get the planid from the target dataset attribute and invoke createOrder with planID variable.

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

Another is to directly pass planID to handleAdd when calling it in the onClick prop for the button.

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

Then update the handler

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

There are tradeoffs to both approaches. For the earlier approach, the planid are set in the DOM as attributes and can be read later. While for the later one, N handlers are created for N plans and are kept in memory.

这篇关于如何使用react-adopt动态设置变异中的变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！