如何在apollo-link-state中规范化状态？

Question

给定一个返回具有多个级别的响应的查询，例如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。

Answer 1

据我所知，规范化数据完全超出了Apollo查询或缓存的范围。您将要创建某种辅助函数，以便在从缓存中获取对象后根据需要展平对象。与Redux不同，没有中间件可以在其上处理动作并存储在缓存中。至少据我所知。我找到了graphql_normalizr可能会给你你想要的东西。对我来说，我坚持简单地将Query包装在一个带有辅助函数的组件中，以便在返回之前通过normalizr https://github.com/paularmstrong/normalizr/issues/108通过规范化模式运行获取的对象。