0

同じページに 2 つの反応コンポーネントがあり、

  • コンポーネント 1 ユーザーのリストを照会する
  • コンポーネント 2 新しいユーザーを作成するイベントをサブスクライブする

コンポーネント 2 のサブスクリプションの結果に基づいてコンポーネント 1 の結果を更新する方法がわかりません。
コンポーネント 1:

class Comp1 extends React.Component {

    render() {
        return (
            <div>
            {this.props.data.loading? <span>loading…&lt;/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>
                    );
    }
}
4

2 に答える 2

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、サブスクリプション イベントで呼び出される機能があります。結果のデータが良好な場合は、ストアを更新できます。たとえば、新しい値を users 配列にプッシュします。

于 2017-03-31T06:22:02.087 に答える