如何通过react-adopt动态设置变量中的变量? [英] How to dynamically set variables in mutation with react-adopt?
问题描述
在我的组件中,我正在使用react-adopt来组成graphql查询和变异,以便我的渲染道具不会太混乱.我有以下代码:
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:
这是我的变异,它带有一个参数-planID.
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
}
}
这是take函数,它需要几个突变,其中之一是createOrder.Apollo的工作方式是我需要在此处将变量prop传递给createOrder组件.问题是,我目前没有planID.planID仅在实际组件内部可用.
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} />,
});
我的组件看起来像这样.我在这里有planID,但是如何将其作为突变的参数传递呢?
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?
推荐答案
可以通过选项调用在呈现的子级中传递的mutate函数.选项可以包括在GraphQL突变字符串中使用的变量. [1]
The mutate function passed in the rendered children can be called with options. Options can include variables used in the GraphQL mutation string. [1].
这意味着您可以像这样调用 createOrder
变异函数.
This means that you can call the createOrder
mutation function like so.
createOrder({ variables: { planID: 'some plan id' } });
鉴于planID的动态性质,有多种实现方法.一种方法是使用如下数据属性:
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:
可以在按钮上为计划ID设置 data
属性.
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
从目标数据集属性获取 planid
,并使用 planID
变量调用 createOrder
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 } });
};
另一种方法是在 onClick
属性中调用按钮时将 planID
直接传递给 handleAdd
.
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>
然后更新处理程序
const handleAdd = planID => {
toggleCart();
Router.push('/waschingmachine');
createOrder({ variables: { planID } });
};
两种方法都需要权衡.对于较早的方法,将planid在DOM中设置为属性,以后可以读取.对于下一个,为N个计划创建了N个处理程序,并将它们保存在内存中.
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屋!