在apollo客户端发生变异后,如何将react组件的道具传递给选项?
我正在使用与
。在一个组件中,我试图运行一个删除突变,之后我想从本地存储中删除该项目,而无需执行apollo-Client
一起反应refetchQueries
。为了这样做,我一直在使用options.update
命令。
为了更新存储,我需要尝试删除的对象的父ID。它在react组件中可用,我只需要找到一种方法将其传递到选项。更新功能。
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-变异选项变量
export default graphql(gql`
mutation ($foo: String!, $bar: String!) {
...
}
`, {
options: (props) => ({
variables: {
foo: props.foo,
bar: props.bar,
},
}),
})(MyComponent);
我看到了这个答案:阿波罗无法访问更新中的查询变量:突变后
在这里阅读其他答案阿波罗无法访问更新中的queryVariables:突变后
我意识到我可以通过这个。当我在突变之前创建选项对象时,将更新函数中的属性设置为。
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)
来自FundDocumentQOptions
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);
}
};
问题内容: 我需要使用路由器将道具传递到组件。这是我的代码: 如您所见,isAuthenticated我想传递给Login组件的道具。 当我登录道具时, isAuthenticated 道具不存在。我做错了什么?如何正确通过道具?我关注了文档以及其他讨论。据我了解,它应该可以工作。的版本 做出反应路由器 和 反应路由器- DOM 是 4.0.0 问题答案: 像这样传递它: 它应该在“登录组件”中可
我使用的是dev-express中的react-grid库,库中有一个表组件,我们可以向它传递单元格组件,在CustomCell中,我使用的是Material UI中的菜单 在上述情况下,菜单工作良好, 但是我想要传递道具到这个组件,我尝试了以下操作 在这种情况下菜单不工作,我想知道是否有一个替代的方法来实现第二种情况。
我正在使用react语义ui模态对象。打开模态的对象是一个道具。 我想在另一个组件中嵌入模态: 如何传递JSX代码(
问题内容: 一个人如何将没有价值的道具传递给反应成分? 注意-没有为这些道具指定默认道具值。 我似乎找不到关于它的任何引用,但是通过观察这些属性的值(它们在默认情况下会分配给它们)。 问题答案: 编译器将您传递的内容解释为布尔值属性。编写纯HTML时也是如此。没有值的属性被解释为布尔值。由于JSX是用于编写HTML的语法糖,因此具有相同的行为是有道理的。 官方的React文档包含以下内容: 布尔属
问题内容: 可以说我有: 在Tabs组件内部,具有属性 儿童[0](this.props.children)看起来像 儿童[0]。道具看起来像 最终,Children对象看起来像(这是我想要传递的): 问题是这样,如果我这样重写MultiTab 在选项卡组件内部 看起来和上面一样。 好像 我希望该物业看起来像。上面只是打印出Statement函数。 这是一个很奇怪的问题,但是长话短说,我正在使用一
问题内容: 我使用React Router的React.js应用程序具有以下结构: 我想将一些属性传递给组件。 (通常我会这样做) 用React Router做到这一点最简单,正确的方法是什么? 问题答案: 更新 自新版本发布以来,无需使用包装器就可以直接通过组件传递道具。例如,通过使用prop。 零件: 用法: 旧版本 我的首选方式是包装组件并将包装器作为路由处理程序传递。 这是您应用了更改的示