【发布时间】:2023-03-29 02:39:01
【问题描述】:
所以我正在尝试构建一个小型搜索应用程序。我遇到的问题是当文本输入的状态发生变化时我无法重新获取查询。这是代码
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});
}
所以我有这个父组件,它具有 searchBar 组件,即用户输入搜索查询的搜索栏,以及呈现结果的 searchResults 组件。只要 searchBar 组件中的文本发生更改,您就可以看到 Go Search 功能会更改状态。现在是 searchResults 组件..
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);
我在这里尝试做的是,当父组件的状态发生变化时,它将作为prop在searchResult组件中传递,并在graphQL查询中作为变量传递。现在的问题是当道具改变时我无法重新获取它。我已经设置了 componentWillReceiveProps 来检查道具是否发生变化并重新获取数据,但它似乎不起作用。我已经阅读了一些关于订阅和 updateQueries 的文章,但我不确定这是否是我正在寻找的解决方案。需要绝望的帮助。在此先感谢
【问题讨论】:
-
您不必重新获取。如果 props 发生变化并且这改变了变量,react-apollo 应该自动重新获取查询,除非它已经在缓存中。如果您想确保即使数据在缓存中也能从服务器获取,您可以将
forceFetch: true传递给查询。 -
已缓存。没错,它确实会自动重新获取它,但它获取的查询是相同的。如何从缓存中删除它?
-
如果参数没有变化,数据已经在缓存中,为什么需要重新取回?如果你想重新获取相同的查询,因为服务器数据可能已经改变,你可以使用 ObservableQuery 上的 refetch 函数。如果数据不断变化,也许轮询是正确的选择。不过,请务必澄清您的问题,以便人们可以提供一个好的答案。
-
您需要将
fetchPolicy: 'network-only'添加到您的选项中,请参阅:dev.apollodata.com/react/… -
我遇到了同样的问题,查询参数发生了变化,但 apollo 没有重新获取。我使用了 redux-react-router :|
标签: react-native graphql apollo-client graphql-subscriptions