javascript - 无需访问服务器即可获取缓存数据的计数

Question

假设我有以下 React 组件:

import { Query } from 'react-apollo'

const MovieListContainer = () => (
  <Query query={QUERY}>
    {
      ({ loading, error, data }) => {
        if (loading) return (<p>Loading...</p>)
        if (error && !data) return (<p>Error...</p>)
        return <MovieList movies={ data.movies }
      }
    }
  </Query>
)

本质上，这用于从 GraphQL 缓存中获取要显示的电影列表(如有必要，则访问服务器)。我想最大限度地减少用户看到“正在加载”屏幕的时间，因此在初始化我的应用程序时我可能会执行以下操作:

import { MOVIE_QUERY } from './queries'

const client = new ApolloClient({
  uri: 'http://example.com:3000/graphql'
})
// Query the movies immediately, and refresh every 30 seconds
client.query({ query: MOVIE_QUERY })
client.watchQuery({query: MOVIE_QUERY }, pollInterval: 30000)

const App = () => (
  <ApolloProvider client={client}>
    <Layout />
  </ApolloProvider>
)

这个效果很好。问题是，现在假设我想制作另一个组件来显示列表中的电影数量......

const MovieTab = ({ count }) => {
  <Tab>
    <span>Movies</span>
    <Badge>{ count }</Badge>
  </Tab>
}

如何创建一个容器来将 MovieTab 挂接到 Apollo 缓存以获取电影列表，而不会导致数据库命中(如有必要，在徽章中显示“??”)？我尝试过的一些事情:

• 将其包装在查询中，其中查询类似于movies { id }。我已将此作为答案发布，但我仍然不喜欢它。
• 将其包装在查询中，其中查询为MOVIE_QUERY。似乎违背了使用 GraphQL 只获取所需数据的想法。
• 将其包装在 ApolloConsumer 中以访问客户端，然后调用 readQuery 来获取电影列表。这保证了我不会访问数据库，但在缓存实际充满数据之前不会工作。

Answer 1

这是我目前的做法:

const QUERY = gql`
movies { id }
`

const MovieTabContainer = () => (
  <Query query={ QUERY } fetchPolicy='cache-only'>
    ({ data }) => {
      const count = data.movies ? data.movies.length : '??'
      return (
        <MovieTab count={ count } />
      )
    }
  </Query>
)

通过指定获取策略仅缓存，我们将立即传递数据(这将是一个空对象)。我们可以将此视为我们还不知道计数的迹象。一旦通过执行完整电影查询填充了缓存，MovieTab 组件将重新呈现以包含实际长度。