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

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

我来自一个Redux的背景，这很容易-我会制作一个

组件，它将位于应用程序的全局某个位置（例如，靠近应用程序的根目录，因此它将出现在所有屏幕上），并且该组件将连接到Redux商店，以便发送的任何消息都会导致响应组件出现

对于阿波罗，我不确定最好的方法。假设我有一个todo应用程序，它具有以下组件结构：

• ResponseComponent（父级-应用程序上的其他位置-我希望它接收来自AddTodoComponent的响应消息）
• TodoComponent（父项）
  • AddTodoComponent（子项）

  • ViewTodos（儿童）

我正在接近它，因此用于添加todo的变异将放置在

AddTodoComponent

组件中，用于查询todo的查询将位于

ViewTodos

组件中。由于变异中的

update（）

调用，列表会自动更新，但我如何发送响应消息以显示在应用程序的其他位置

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

---

感谢使用

react apollo

全局错误处理非常简单。显示成功消息没有那么多

对于错误：

Apollo允许您在初始化客户端时提供

onError

回调。如果您使用的是apollo boost，则只需提供

onError

选项即可。回调将接收一些参数，包括

graphqlerors

，其中包含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';
    }
  },
});

如果您没有使用阿波罗助推，则需要使用

为了成功：

我还没有想出一个方法来处理这个全球性的问题。同时，当请求成功完成时，

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>
    );
  }
}

类MyComponent扩展组件{
未完成（resp）{
//使用响应消息显示
}
render（）{
返回(
{（domutate）=>(
域置换（{变量：{a:b}}）
)}
);
}
}

---

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

我试图在Typescript中使用

onCompleted={setStatus（true）}

，它说

Type'void'不能分配给Type'（（data:any）=>void）| undefined'.ts（2322）

@x89我不确定你的

setStatus

看起来像什么，但您需要更改其签名以匹配预期的签名。因此，让setStatus返回一个返回void的函数，而不是让它本身返回void。