0

So I'm trying to build a small search app. The problem I'm encountering is that I can't refetch the query when the state of text input changes. here's the code

getInitialState: function(){
 return {
  searchParams: '' "
 }
},
render: function(){
 return (
   <View style={styles.container}>
     <SearchBar goSearch={this.goSearch}/>
     <SearchResults searchParams={this.state.searchParams} />
   </View>
  )
 },
 goSearch: function(searchParams){
   this.setState({searchParams: searchParams});
  }

So I have this parent component that has searchBar component that's the search bar where user enters the search query, and searchResults component that renders the results. Go Search function as u can see changes the state whenever the text changes in the searchBar component. Now for the searchResults component..

componentWillReceiveProps(nextProps){
if(this.props.searchParams!=nextProps.searchParams){
  console.log("props changed " + nextProps.searchParams)
  this.props.data.refetch();
  console.log(this.props.data.refetch)
}

},

render: function(){
 return ( 
  <View>
   {this.renderPosts()}
  </View>
 )
},

module.exports = graphql(fetchFilterPosts, {
 options: (props) => {
 return {
   variables: {searchParams:props.searchParams}
  }
}
})(SearchResults);

What im trying to do here is that when the state of the parent component changes, It will be passed in the searchResult component as a prop, and it's passed as a variable in the graphQL query. Now the problem is that I can't refetch it when the props change. I have setup componentWillReceiveProps to check if the props changes and refetch the data but it doesn't seem to work. I've Read some articles about subscriptions and updateQueries, but I'm not sure if thats the solution I'm looking for. Need desperate help. Thanks in advance

Codegineers Support
  • 41
  • 1
  • 5
  • You shouldn't have to refetch. If the props change and this changes the variables, react-apollo should automatically refetch the query, unless it's already in the cache. If you want to make sure it fetches from the server even if the data is in the cache, you can pass `forceFetch: true` to the query. – helfer Mar 05 '17 at 01:09
  • it's cached. And ur right, it does refetch it automatically but the query it fetches is the same. How can I removed it from cache? – Codegineers Support Mar 05 '17 at 07:48
  • If the parameters don't change and the data is already in the cache, why do you need to refetch? If you want to refetch the same query because the server data may have changed, you can use the refetch function on ObservableQuery. If the data changes constantly, maybe polling is the right option. Make sure to clarify your question though, so people can provide a good answer. – helfer Mar 06 '17 at 07:45
  • You will need to add `fetchPolicy: 'network-only'` to your options, see: http://dev.apollodata.com/react/api-queries.html#graphql-config-options-fetchPolicy –  Apr 11 '17 at 02:43
  • I run into the same issue, query params changed but apollo didn't do a refetch. I used redux-react-router :| – Quy Tang Nov 27 '17 at 12:02

1 Answers1

0

maybe like this

const getRemoteData=async ()=>(
  const res=await this.props.data.refetch();
  console.log(res)
)

getRemoteData();
Zhang Yung
  • 46
  • 1