reactjs - 在 React Apollo 中处理成功/错误响应消息

Question

我希望在突变发生后显示一条成功/错误消息，以通知用户他们的突变成功/不成功。

我来自 Redux 背景，这很容易 - 我会做一个 <Response />该组件将位于应用程序的全局某个位置(例如，靠近应用程序的根目录，因此它将出现在所有屏幕上)，并且该组件将连接到 Redux 存储，因此调度的任何消息都会导致响应组件出现。

对于 Apollo，我不确定执行此操作的最佳方法。假设我有一个待办事项应用程序，其组件结构如下:

• ResponseComponent(父级 - 应用程序的其他位置 - 我希望它能够接收来自 AddTodoComponent 突变的响应消息)

• TodoComponent(父级)

  • AddTodoComponent(子级)

  • ViewTodos(子)

我正在接近它，因此添加待办事项的突变将被放置在 AddTodoComponent 中组件和查询待办事项的查询将在 ViewTodos 中成分。由于update()，该列表会自动更新。调用突变，但是我如何发送一条响应消息以在应用程序的其他地方显示？

我已经探索过制作一个 HoC，它可以很好地显示执行突变的直接组件的响应消息，但如果调用突变的组件深度为多个组件级别，则这将不起作用。我也考虑过采用标准的 React 方式并通过组件树向上传递函数回调，但这对我来说似乎是一种代码味道。

谢谢

Answer 1

使用 react-apollo 进行全局错误处理非常简单。显示成功消息并不多。

错误:

Apollo 允许您在初始化客户端时提供 onError 回调。如果您使用的是apollo-boost，那么这就像提供onError选项一样简单。该回调接收一些参数，包括 graphQLErrors，其中包含 graphQL 响应中包含的错误。您可以检查它是否存在，然后适本地显示错误。

import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: `${process.env.REACT_APP_API_URI}/api/v0`,
  credentials: 'include',
  clientState: {
    resolvers,
    defaults
  },
  onError: ({ graphQLErrors, networkError, response }) => {
    if (graphQLErrors) {
      // Do something with the errors
    } else if (networkError && networkError.statusCode === 401) {
      // This also causes a browser refresh, which clears the cache.
      window.location = '/login';
    }
  },
});

如果您没有使用apollo-boost，那么您将需要使用apollo-link-error .

成功:

我还没有找到在全局范围内处理这个问题的方法。同时，当请求成功完成时，Mutation 组件会接受 onCompleted 属性。回调将 graphQL 响应作为其参数传递，因此如果您在响应中包含成功消息，则可以将其与以下内容一起使用:

class MyComponent extends Component {
  onCompleted(resp) {
    // Display using resp.message
  }

  render() {
    return (
      <Mutation mutation={ MUTATION } onCompleted={ this.onCompleted }>
        {(doMutation) => (
          doMutation({ variables: { a: b } })
        )}
      </Mutation>
    );
  }
}

如果有人有更好的方法来处理全局成功消息，我很想听听。