React и Apollo, используя локальное состояние для управления уведомлениями о сообщениях - PullRequest
Новая
       15

React и Apollo, используя локальное состояние для управления уведомлениями о сообщениях

0 голосов
/ 24 мая 2019

В приложении React и Apollo я пытаюсь использовать локальное состояние в качестве хранилища для управления компонентом «Панель сообщений», который может открываться для отображения пользовательских сообщений.Я не могу понять, как заставить панель сообщений открываться, чтобы показать сообщение об ошибке, когда мутация имеет ошибку.

Я инициирую клиента: 

   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 {...}

Эти запросы и мутации соответствуют следующим типам определений и определителей: 

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

I думаю вышеописанное настроено правильно, и я думаю, что проблема в вызове 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>)
          }

Любые идеи очто здесь не так?

...