在 apollo-client 突变后，如何将反应组件的道具传递给选项？答案

【问题标题】：How do you pass a react component's props down to options after apollo-client mutation?在 apollo-client 突变后，如何将反应组件的道具传递给选项？
【发布时间】：2018-07-13 06:30:02
【问题描述】：

apollo-client 突变后如何将 React 组件的 props 传递给选项？

我正在使用 react 和 apollo-client。在一个组件中，我试图运行一个删除突变，之后我想从本地存储中删除该项目而不执行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-client 文档中看到了这个例子： 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 can't access queryVariables in update: after a mutation

【问题讨论】：

标签： javascript reactjs graphql apollo-client

【解决方案1】：

在这里阅读另一个答案Apollo can't access queryVariables in update: after a mutation

当我在突变之前创建 options 对象时，我意识到我可以将 this.props 中的 fundId 传递到更新函数中。

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

【讨论】：