クライアントからの応答でstoreを更新するseachbar関数用のreact-apolloを使用して

Question

私はボタンを押したときに検索したいGraphcoolバックエンドを持っています。私の理解によれば、react-apolloのgraphqlコンテナを使用すると、コンポーネントは即座に一度マウントされたクエリを作成します。

これは私が望むものではありません。私は、ボタンが押されたときだけ検索するつもりです。私はwithApolloコンテナが、私はそうのようなクエリを行うことができますことを承知している：

this.props.client.query({ 
     query: MY_QUERY, 
     variables: { 
      first, // for pagination 
      skip, 
      orderBy, 
      searchText 
     } 
    }); // returns a promise 

は私の質問：どのように私はそれを返す応答でストアを更新しますか？私はこれについて間違った方法をとっていますか？

Answer 1

私はこれについて間違った方法をとっていることに気付きました。私はこの役に立つポストを見つけました：search feature with react-apollo。

私は状態を持っている方が簡単だろうし、その後そのようなレスポンスと状態言っ更新：

this.props.client.query({ 
    query: MY_QUERY, 
    variables: { 
     first, // for pagination 
     skip, 
     orderBy, 
     searchText 
    }, 
}).then(result => this.setState({ thingsToRender: result.data.thingsToRender }); 

あなたがいるなら、あなたはもちろん、（その上にマッピングして、オブジェクトをレンダリングするかFlatListを使用します反応したネイティブを使用して）。

私は実際にそうしたいと思ったら私の店を更新する方法を知った。コンポーネントは、このためにreact-apolloから仕事に両方graphqlとwithApollo高次成分によってラップされる必要があります：

compose(
    withApollo, 
    graphql(SOME_QUERY) 
)(MyComponent) 

あなたがそうのようなメソッドを作る：

onSearchButtonPress = async() => { 
    const { first, skip, orderBy, searchText } = this.state; 

    const result = await this.props.client.query({ 
    query: MY_QUERY, 
    variables: { 
     first, 
     skip, 
     orderBy, 
     searchText 
    } 
    }); 
    const items = result.data.items; 
    this.props.data.updateQuery(prev => ({ 
    ...prev, 
    allItems: _.uniqBy([...prev.allItems, ...items], o => o.id) 
    // lodash uniqBy helper method helps with removing older items 
    // with the same id (essentially updating them) 
    }); 

それはほとんどの状態を更新するようなものです還元還元剤中に存在する。