[英]How do you pass props to a React component after importing it dynamically?
[英]How do you pass a react component's props down to options after apollo-client mutation?
在apollo-client
突变后,如何将反应组件的道具传递给选项?
我正在使用与apollo-client
react
。 在一个组件中,我试图运行一个delete突变,此后我想从本地存储中删除该项目,而无需执行refetchQueries
。 为了做到这一点,我一直在使用options.update
命令。
为了更新商店,我需要我要删除的对象的父ID。 它在react组件中可用,我只需要找到一种方法即可将其传递给options.update
函数。
const { fundId } = this.props;
const variables = { documentId: document.id };
const options = { variables }
this.props.deleteFundDocument(options)
.then( response => console.log("Document successfully deleted", response) )
.catch( e => console.log("Document not deleted", e) )
export default graphql(FundDocumentQL.deleteFundDocument, {name: 'deleteFundDocument', options: FundDocumentQLOptions.deleteFundDocument})
)(DocumentDisplay)
这是我从FundDocumentQLOptions传递给选项的内容,因为您可以看到我从localStorage那里获得了FundId,这有点怪。 我宁愿尝试将其正确传递。
const deleteFundDocument = {
update: (proxy, {data: {deleteFundDocument}}) => {
try {
if (localStorage.getItem('documentViewerFundId')) {
const fundId = localStorage.getItem('documentViewerFundId');
let data = proxy.readQuery({query: FundDocumentQL.allFundDocuments, variables: {fundId: fundId}});
console.log('data.allFundDocuments 1', data.allFundDocuments);
// console.log('documentId', documentId);
console.log('variables.documentId', variables.documentId);
const newDocuments = data.allFundDocuments.filter( item => {
return item.id !== deleteFundDocument.id;
});
console.log('newDocuments', newDocuments);
data.allFundDocuments = [...newDocuments];
console.log('data.allFundDocuments 2', data.allFundDocuments);
proxy.writeQuery({query: FundDocumentQL.allFundDocuments, data, variables: {fundId: fundId}});
}
} catch (e) {
console.log(e);
}
}
};
我在apollo客户端文档中看到了此示例: https : //www.apollographql.com/docs/react/basics/mutations.html#graphql-mutation-options-variables
export default graphql(gql`
mutation ($foo: String!, $bar: String!) {
...
}
`, {
options: (props) => ({
variables: {
foo: props.foo,
bar: props.bar,
},
}),
})(MyComponent);
我看到了这个答案: Apollo无法访问update中的queryVariables:发生突变后
在这里阅读其他答案Apollo无法访问update中的queryVariables:发生突变后
我意识到我可以在突变之前创建options
对象时,将fundId
的this.props
传递给update函数。
const { fundId } = this.props;
const variables = { documentId: document.id };
const options = {
variables: variables,
update: (proxy, { data: { deleteFundDocument } }) => FundDocumentQLOptions.deleteFundDocument(proxy, deleteFundDocument, fundId)}
this.props.deleteFundDocument(options)
.then( response => console.log('Document successfully deleted', response) )
.catch( e => console.log('Document not deleted', e) )
export default graphql(FundDocumentQL.deleteFundDocument, {name: 'deleteFundDocument'})(DocumentDisplay)
从FundDocumentQLOptions
const deleteFundDocument = (proxy, deleteFundDocument, fundId) => {
try {
let data = proxy.readQuery({query: FundDocumentQL.allFundDocuments, variables: {fundId: fundId}});
// console.log('data.allFundDocuments 1', data.allFundDocuments);
data.allFundDocuments = data.allFundDocuments.filter( item => {
return item.id !== deleteFundDocument.id;
});
// console.log('data.allFundDocuments 2', data.allFundDocuments);
proxy.writeQuery({query: FundDocumentQL.allFundDocuments, data, variables: {fundId: fundId}});
} catch (e) {
console.log(e);
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.