Question

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

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

有了Apollo，我不确定这样做的最好方法。让我们说我有一个todo应用程序，它具有以下组件结构：

ResponseComponent（父级 - 应用程序的其他位置 - 我希望此接收来自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中处理成功/错误响应消息

1 个答案: