React：Apollo Client：无法在现有状态转换期间更新

Question

我正在尝试制作一个包装 Apollo Client 的查询组件的组件。我正在使用 apollo-link-state 进行本地状态管理，我想要一个错误通知系统来通知用户所有事情。

我的组件看起来像这样...

export class Viewer extends React.Component {
  static propTypes = {
    children: PropTypes.func
  };

  render() {
    const { children } = this.props;
    return (
      <Query query={GET_VIEWER}>
        {({ data, client, error }) => {
          if (error) {
            client.mutate({
              mutation: ADD_NOTIFICATION,
              variables: { message: unpackApolloErr(error), type: 'Error' }
            });
          }

          return children(data.viewer ? data.viewer : user);
        }}
      </Query>
    );
  }
}

但是当它尝试添加带有突变的错误时，我得到了反应错误..

Warning: forceUpdate(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

我没有看到一个明显的解决方法，我不明白为什么如果客户端作为渲染道具提供并且不能使用，它甚至会发生......我一定是遗漏了一些简单的东西，但我看不到它是什么

Answer 1

答案原来是客户端在onError函数中可用this当使用apollo-link-errorhttps://www.apollographql.com/docs/link/links/error.html

我之前尝试过使用onError来访问客户端，但是即使在[=11之后声明了客户端，调用它的范围确实包含客户端并不明显=]处理程序

// client is available here even though it is defined first 
const err = onError({ graphQLErrors }) => {
    this.client.mutate({ mutation: ADD_ERROR, variables: { graphQLErrors }})
}

const client = new ApolloClient({
    cache,
    link: ApolloLink.from([err, httpLink])
})

Answer 2

之所以会出现Warning: forceUpdate，大概是因为Apollo在内部发生突变时会引发forceUpdate。所以突变应该在 render 方法中。

在 Apollo 错误后处理突变的最佳方法是添加一个 onError link，如 https://www.apollographql.com/docs/react/features/error-handling.html#network

中所述

// Add errorLink into Apollo Client
const errorLink = onError(({ graphQLErrors, networkError, operation }) => {
  this.client.mutate({ mutation: ..., variables: {}});
});


const client = new ApolloClient({
  cache,
  link: ApolloLink.from([err, httpLink])
})

React：Apollo Client：无法在现有状态转换期间更新

React: Apollo Client: Cannot update during an existing state transition

reactjs

graphql

react-apollo