当前位置: 首页 > 知识库问答 >
问题:

阿波罗客户端突变后,如何将react组件的道具传递给选项?

唐睿
2023-03-14

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

我看到了这个答案:阿波罗无法访问更新中的查询变量:突变后


共有1个答案

白昊乾
2023-03-14

在这里阅读其他答案阿波罗无法访问更新中的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。 零件: 用法: 旧版本 我的首选方式是包装组件并将包装器作为路由处理程序传递。 这是您应用了更改的示