在 apollo 客户端中重新获取查询

Posted 2023-03-08

【中文标题】在 apollo 客户端中重新获取查询

【英文标题】：Refetch query in apollo client

【发布时间】：2017-07-24 22:18:15

【问题描述】：

所以我正在尝试构建一个小型搜索应用程序。我遇到的问题是当文本输入的状态发生变化时我无法重新获取查询。这是代码

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 :|

【参考方案1】：

可能是这样的

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

getRemoteData();

【讨论】：

添加一些描述。逻辑比仅仅一段代码更有帮助。