我希望在突变发生后显示一条成功/错误消息,以通知用户他们的突变成功/不成功。
我来自 Redux 背景,这很容易 - 我会做一个 <Response />
该组件将位于应用程序的全局某个位置(例如,靠近应用程序的根目录,因此它将出现在所有屏幕上),并且该组件将连接到 Redux 存储,因此调度的任何消息都会导致响应组件出现。
对于 Apollo,我不确定执行此操作的最佳方法。假设我有一个待办事项应用程序,其组件结构如下:
- ResponseComponent(父级 - 应用程序的其他位置 - 我希望它能够接收来自 AddTodoComponent 突变的响应消息)
TodoComponent(父级)
AddTodoComponent(子级)
ViewTodos(子)
我正在接近它,因此添加待办事项的突变将被放置在 AddTodoComponent
中组件和查询待办事项的查询将在 ViewTodos
中成分。由于update()
,该列表会自动更新。调用突变,但是我如何发送一条响应消息以在应用程序的其他地方显示?
我已经探索过制作一个 HoC,它可以很好地显示执行突变的直接组件的响应消息,但如果调用突变的组件深度为多个组件级别,则这将不起作用。我也考虑过采用标准的 React 方式并通过组件树向上传递函数回调,但这对我来说似乎是一种代码味道。
谢谢
最佳答案
使用 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>
);
}
}
如果有人有更好的方法来处理全局成功消息,我很想听听。
关于reactjs - 在 React Apollo 中处理成功/错误响应消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49534474/