Question

在React和Apollo应用程序中，我试图使用本地状态作为存储来管理“ Message Snackbar”组件，该组件可以打开以显示用户消息。我无法弄清楚当Mutation发生错误时如何打开Message Snackbar来显示错误消息。

我启动客户端：

   new ApolloClient({
    ...
    writeData: cache.writeData({
      data: {
        messageOpen: false,
        messages: [],
      },
    }),
    typeDefs,
    resolvers,
  });

我创建了一个“ SnackBar”组件来显示消息，并将其放置在应用的主布局中，并带有查询和突变定义：

...

const UPDATE_MESSAGE_MUTATION = gql`
  mutation updateMessage($messages: [String]) {
    updateMessage(messages: $messages) @client
  }
`;

class MessageSnackbar extends Component {...}

这些查询和变异对应于以下类型的def和解析器：

export const typeDefs = gql`
  ...
  extend type Mutation {
    toggleMessage: Boolean!
    updateMessage: [String]
  }
`;

export const resolvers = {
        Query: {
         ...
        },
        Mutation: {
          toggleMessage(parent, variables, { cache }) {
            ...
          updateMessage(parent, variables,  {cache} ) {
            // add messages to cache array
            const newMessages = variables.messages
            const data = { data: { messages: [newMessages] } };
            cache.writeData(data);

            // open message
            const dataMssgOpen = { data: { messageOpen: true } };
            cache.writeData(dataMssgOpen);
            return data;
          },
        },
      }

我认为上面的设置正确，我认为问题出在调用Snackbar。例如，如果我在注册过程中出错，我想调用小吃栏打开并显示带有UPDATE_MESSSAGE突变的错误消息。我无法使它正常工作。

<Mutation 
        mutation={SIGNUP_MUTATION} 
        variables={inputs} 
      >
        {(signup, { error, loading }) => {
          if (error) {
            **what to do here**
          }
...

我尝试了许多这样的变体而没有成功（此示例创建了一个无限循环）：

<Mutation 
        mutation={SIGNUP_MUTATION} 
        variables={inputs} 
      >
        {(signup, { error, loading }) => {
          if (error) {
            return(
              <Mutation mutation={UPDATE_MESSAGE_MUTATION} variables={{ messages: error }}>
                {updateMessage => {
                  updateMessage()
                }}
              </Mutation>)
          }

关于这里出什么问题的任何想法吗？

React和Apollo，使用本地状态来管理消息通知

0 个答案: