本文介绍了如何在 React 中的 Apollo 客户端变异组件中包装 GraphQL 变异的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在将 Apollo 突变组件与查询组件一起包装时遇到问题.如果您查看 updateCell 函数,我可以获得该行的 oldValue、newValue 和 ID.如何使用 Apollo 客户端变异组件将值传递给 ADDCOST 变异.
下面是我的代码:
预先感谢您提供任何提示.
const APPROVALCHAIN_QUERY = gql`{vApprovalChainApproverCountList{应用程序ID应用名称集合名称许可证类型成本审批人}}`;const ADDCOST_MUTATION = gql`突变($成本:字符串!){更新成本(成本:$ 成本){应用程序ID成本}}`;类 ApprovalChain 扩展组件 {使成为() {返回 (<查询查询={APPROVALCHAIN_QUERY}>{({ 加载,错误,数据 }) =>{如果(加载)返回<p>正在加载...</p>;如果(错误)返回<p>{error.message}</p>;const 链 = JSON.parse(JSON.stringify(data.vApprovalChainApproverCountList));返回 (<div><h1>审批链</h1><引导表keyField =applicationId"数据={链}列={列}cellEdit={cellEditFactory({模式:点击",模糊保存:真,需要帮助 ------------->>>**updateCell:** (oldValue, newValue, row) =>{console.log(row.applicationId, oldValue, newValue);},})}/>
);}}</查询>);}}导出默认审批链;
解决方案
用 Mutation 组件包装它应该可以工作.尝试这样的事情:
class ApprovalChain 扩展组件 {使成为() {返回 (<查询查询={APPROVALCHAIN_QUERY}>{({ 加载,错误,数据 }) =>{if (loading) return <p>Loading...</p>if (error) return {error.message}
const 链 = JSON.parse(JSON.stringify(data.vApprovalChainApproverCountList))返回 (<div><h1>审批链</h1><突变突变={ADDCOST_MUTATION}>{addCost =>(<引导表keyField =applicationId"数据={链}列={列}cellEdit={cellEditFactory({模式:点击",模糊保存:真,updateCell: (oldValue, newValue, row) =>{console.log(row.applicationId, oldValue, newValue)addCost({ variables: { cost: newValue } });}})}/>)}</突变>
)}}</查询>)}}导出默认 ApprovalChain
I am having an issue wrapping the Apollo mutation component along with the query component. If you look at the updateCell function I am able to get the oldValue, newValue, and ID for the row.How can I pass the values to ADDCOST mutation using Apollo client mutation component.
Below is my code:
Thanks in advance for any tips.
const APPROVALCHAIN_QUERY = gql`
{
vApprovalChainApproverCountList{
applicationId
applicationName
collectionName
licenseType
cost
approvers
}
}
`;
const ADDCOST_MUTATION = gql`
mutation($cost: String!){
updateCost(cost: $cost){
applicationId
cost
}
}
`;
class ApprovalChain extends Component {
render() {
return (
<Query
query={APPROVALCHAIN_QUERY}
>
{({ loading, error, data }) => {
if (loading)
return <p>Loading...</p>;
if (error)
return <p>{error.message}</p>;
const chain = JSON.parse(JSON.stringify(data.vApprovalChainApproverCountList));
return (
<div>
<h1>ApprovalChain</h1>
<BootstrapTable
keyField="applicationId"
data={chain}
columns={columns}
cellEdit={cellEditFactory({
mode: 'click',
blurToSave: true,
Need Help ------------->>>**updateCell:** (oldValue, newValue, row) => {
console.log(row.applicationId, oldValue, newValue);
},
})}
/>
</div>
);
}}
</Query>
);
}
}
export default ApprovalChain;
解决方案
Wrapping it up with a Mutation component should work. Try something like this:
class ApprovalChain extends Component {
render() {
return (
<Query query={APPROVALCHAIN_QUERY}>
{({ loading, error, data }) => {
if (loading) return <p>Loading...</p>
if (error) return <p>{error.message}</p>
const chain = JSON.parse(
JSON.stringify(data.vApprovalChainApproverCountList)
)
return (
<div>
<h1>ApprovalChain</h1>
<Mutation mutation={ADDCOST_MUTATION}>
{addCost => (
<BootstrapTable
keyField="applicationId"
data={chain}
columns={columns}
cellEdit={cellEditFactory({
mode: 'click',
blurToSave: true,
updateCell: (oldValue, newValue, row) => {
console.log(row.applicationId, oldValue, newValue)
addCost({ variables: { cost: newValue } });
}
})}
/>
)}
</Mutation>
</div>
)
}}
</Query>
)
}
}
export default ApprovalChain
这篇关于如何在 React 中的 Apollo 客户端变异组件中包装 GraphQL 变异的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!