使用 apollo Query 传递 Apollo 客户端缓存数据

Posted

技术标签:

【中文标题】使用 apollo Query 传递 Apollo 客户端缓存数据【英文标题】:Passing Apollo Client cache data with apollo Query 【发布时间】:2019-03-24 03:06:59 【问题描述】:

我有两个疑问:

const GET_FILTERS = gql`
  query getFilters 
    filters @client 
      id
      title
      selected
    
  
`

const GET_POSTS = gql`
  query getPosts 
    posts 
      id
      author
      status
    
  
`

第一个使用apollo-link-state 从本地状态获取数据,第二个是外部调用。

我有一个 HOC 用于获取这样的帖子设置:

const withPosts = (Component) => (props) => (
  <Query
    query=GET_POSTS  
  >
    (loading, data, error) => 
      if(loading) return null
      if(error) return null
      return <Component ...data ...props/>
    
  </Query>
)

帖子的获取很好,但我想做的是在每次调用GET_POSTS 查询时添加从GET_FILTERS 查询返回的任何内容?

我可以做的一件事是将withPost 包装到另一个中,比如说withFilters HOC,并将结果作为变量传递给GET_POSTS 查询,但我一直想知道是否有任何其他访问方式通过某种上下文获取数据,例如 cache.readQuery 仅使用 withPost HOC。

【问题讨论】:

如果你用上一个的内容进行refetch查询怎么办? 【参考方案1】:

Apollo 为HOC pattern 提供了“本机”工具,您可以通过compose 进行许多(命名)查询和突变来增强组件。恕我直言,它比使用查询/突变组件更具可读性和功能。

您可以通过data.fetchMore 将查询(过滤器)值作为变量传递 - 当然您可以将查询组件用于“内部查询”。

查询'cache-first' fetchPolicy选项可以使用,不需要直接使用缓存。

【讨论】:

谢谢,这很有帮助。经过一番研究,我完全同意你的观点,即作文是一条可行的路。您能否通过有关如何使用data.fetchMore 的示例来增强您的答案?使用GET_FILTERSGET_POSTS 查询,其中GET_POSTS 采用变量filterscomposegraphql 呈现任意组件Posts 我在apollo-universal-starter-kit找到了很多好的灵感

以上是关于使用 apollo Query 传递 Apollo 客户端缓存数据的主要内容,如果未能解决你的问题,请参考以下文章

Apollo 中 Query 和 Mutation 的区别?

Nuxt(Vue) 使用 $apollo.query 处理 Apollo 错误

上下文未传递给嵌套的 Apollo GraphQL 解析器

如何为 apollo-client 的每个请求设置变量?

Apollo 的 Query 道具的不同实现

如何从 vue-apollo 中访问 this.$route?