如何在apollo-link-state中标准化状态?

时间:2018-09-07 16:20:37

标签: graphql apollo react-apollo graphql-js apollo-client

给出一个查询,该查询返回多个级别的响应,例如,该查询在Github's GraphQL API上:

query {
  viewer {
    starredRepositories(first: 100) {
      edges {
        node {
          repositoryTopics(first: 100) {
            edges {
              node {
                id
                topic {
                  id
                  name
                }
              }
            }
          }
        }
      }
    }
  }
}

如何使用apollo-link-state规范主题并将其存储在商店中?

{
  topics: [Topic]
}

当前我的商店设置如下:

import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { withClientState } from 'apollo-link-state';

const cache = new InMemoryCache();

const store = withClientState({
  cache,
  defaults: {
    topics: [],
  },
  resolvers: {},
  typeDefs: `
    type Topic {
      id: String!
      name: String!
    }

    type Query {
      topics: [Topic]
    }
  `,
});

const client = new ApolloClient({
  cache,
  links: ApolloLink.from([
    // Other links ... ,
    store,
    // Other links ... ,
  ]),
});

检查我的缓存会显示ROOT_QUERY

{
  topics: { ... },
  viewer: User
    starredRepositories({"first":100}): StarredRepositoryConnection
      ...
}

以及所有实体normalized by apollo-cache-inmemory

1 个答案:

答案 0 :(得分:0)

据我了解,规范化数据完全超出了Apollo查询或缓存的范围。您将要创建某种辅助函数,以在从缓存中获取对象后根据需要展平该对象。与Redux不同,没有中间件可以在其上处理动作并将其存储在缓存中。至少据我所知。我确实找到了duplicate references,尽管它可能会给您您想要的东西。对我来说,我会坚持简单地将查询包装在带有帮助函数的组件中,以便在返回之前通过graphql_normalizr normalizr通过规范化的架构运行获取的对象。