反应：Apollo 客户端：无法在现有状态转换期间更新

debugcn 发表于 Dev

三角洲

我正在尝试制作一个包装 Apollo Client 的 Query 组件的组件。我正在使用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`.

我没有看到解决这个问题的明显方法，我不明白为什么如果客户端作为渲染道具提供并且无法使用......我一定错过了一些简单的东西，但我看不到它是什么

三角洲

答案原来是客户端在onError函数中可用，就像this使用apollo-link-error https://www.apollographql.com/docs/link/links/error.html 一样

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

// 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])
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。