Как обновить результаты запроса компонента на основе результатов подписки другого компонента?

Question

У меня есть 2 реагирующих компонента на одной странице,

• Компонент 1 запрашивает список пользователей
• Компонент 2 подписаться на событие создания нового пользователя

Я не могу найти способ обновить результаты компонента 1 на основе результатов подписки компонента 2.
Component1:

class Comp1 extends React.Component {

    render() {
        return (
            <div>
            {this.props.data.loading? <span>loading…</span>
        : <span> //show the list of users </span>       }
        </div>
                    );
    }
}

export default graphql(queryAllUsers)(Comp1) ;

Компонент2:

class Comp2 extends React.Component {
   constructor(props) {
     super(props);
        this.state = {
        newUserCreated: false
            }
   }
 subscribeToNewUser() {
    this.subscription = this.props.data.subscribeToMore({
        document: subscribeToNewUsersQuery,
        variables: {//        },
    });
    }
    render() {
        return (
            <div>
            {this.state.newUserCreated}
        </div>
                    );
    }
}

Answer 1

Решение состоит в том, чтобы использовать функцию редуктора с запросом первого компонента:

class Comp1 extends React.Component {
  render() { ... }
}

export default graphql(queryAllUsers, {
      options: (ownProps) => {
        return ({
            variables: { ...
            },
            reducer: (previousResult, action) => {
              if (action.type === "APOLLO_SUBSCRIPTION_RESULT" && action.operationName === "subscribeToNewUsersQuery") {
                //update the previousResult
                return previousResultWithNewData;
              } else return previousResult;
            })
        }
      })(Comp1);

Answer 2

Я думаю, что самый простой способ - это использовать запрос и в первом компоненте и добавить к нему подписку через subscribeToMore функция.

Может выглядеть так:

...

subscribeToNewUser() {
    this.subscription = this.props.queryAllUsers.subscribeToMore({
      document: subscribeToNewUsersQuery,
      variables: { /* your variables */ },
      updateQuery: (previousResult, { subscriptionData }) => {
        const changedItem = subscriptionData.data.<subscriptionName>;
        if (changedItem !== undefined && changedItem !== null) {
          return // update previous result
        }
        return previousResult;
      },
    });
  }


  ...

  export default graphql(queryAllUsers, {
    name: "queryAllUsers"
  })
  ...
  (Comp1)

В этом у вас есть updateQuery функциональность, которая будет вызываться при подписке. Когда получающиеся данные будут хорошими, вы можете обновить хранилище, например, передать новое значение в массив пользователей