在 React Apollo 中处理 success/error 响应消息

Question

我想在发生突变后显示一条 success/error 消息，以通知用户他们的突变 was/wasn 没有成功。

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

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

ResponseComponent（parent - 在应用程序的其他地方 - 我希望它接收来自 AddTodoComponent 突变的响应消息）
TodoComponent (parent)
- AddTodoComponent (child)
- ViewTodos (child)

我正在接近它，因此添加待办事项的变更将放在 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>
    );
  }
}

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

在 React Apollo 中处理 success/error 响应消息

Handling success/error response messages in React Apollo

apollo

reactjs

react-native

react-apollo