seachbar 기능을 위해 react-apollo를 사용하여 client.query의 응답으로 상점 업데이트

Question

버튼을 눌렀을 때 검색 할 Graphcool 백엔드가 있습니다. 내 이해하려면 : react-apollo에서 graphql 컨테이너를 사용하면 구성 요소가 즉시 한 번 쿼리를 만들 것입니다.

이것은 내가 원하는 것이 아닙니다. 나는 버튼을 눌렀을 때에 만 검색하려고한다.

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

내 질문 : 어떻게 그것을 반환 응답 가게를 업데이트하나요 나는 withApollo 용기 나 쿼리과 같이 할 수 있다는 것 알고 있어요? 내가 잘못된 방향으로가는거야?

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을 사용 (당신이 있다면 반응 네이티브 사용).

내가 실제로 그렇게하고 싶다면 내 가게를 업데이트하는 방법을 알아 냈습니다. 그것은 거의 상태를 업데이트처럼

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

:

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

당신이 다음 방법과 같이 확인 :이 작업을 위해 구성 요소는 react-apollo에서 모두 graphql 및 withApollo 고차 구성 요소에 의해 포장 될 필요가있을 것이다 redux 감속기에서.