如何在 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 的规范化模式运行获取的对象。