重用从另一个查询中缓存的数据

时间:2019-03-04 20:28:14

标签: apollo react-apollo apollo-client

给出一个简单的graphql模式,如下所示:

type Contact {
    id: ID!
    name: String
}

type Query {
    RecentContacts: [Contact]
    Contact(id: ID!): Contact
}

如果我查询最近的联系人:

const GET_RECENT_CONTACTS = gql`
    query RecentContacts {
        RecentContacts {
          id
          name
        }
    }`

<Query client={client} query={GET_RECENT_CONTACTS}>
    {({loading, error, data}) => { /* etc... */ }}
</Query>

并接收数据,例如ID为1和2的联系人,其缓存方式如下:

ROOT_QUERY
    RecentContacts: [Contact]
        0:  Contact:1
              id: 1
              name: Jack
        1:  Contact:2
              id: 2
              name: Jill

是否有一种方法可以让Apollo知道它可以将已经缓存的条目用于查询Contact(id: 1)Contact(id: 2),而无需发出另一个网络请求,而只需要取回已存在的数据。缓存?

具体来说,我希望此查询在查询RecentContacts之后不必发出网络请求,因为它所需的数据已经在缓存中(尽管从调用返回到另一个查询) :

const GET_CONTACT = gql`
    query Contact($id: ID!){
        Contact(id: $id){
          id
          name
        }
    }

<Query client={client} query={GET_CONTACT} variables={{id: 1}}>
    {({loading, error, data}) => {/* etc... */}}
</Query>

1 个答案:

答案 0 :(得分:1)

您可以使用cache redirects来做到这一点。这是修改后的文档以适合您的模式的示例:

import { InMemoryCache } from 'apollo-cache-inmemory';

const cache = new InMemoryCache({
  cacheRedirects: {
    Query: {
      User: (_, args, { getCacheKey }) =>
        getCacheKey({ __typename: 'User', id: args.id })
    },
  },
});