如何使阿波罗链接状态正常化？

Question

给定一个返回多个级别响应的查询，例如Github的GraphQL API上的这个查询

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

如何将主题规范化，并使用阿波罗链接状态将其存储到存储区

{
  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
      ...
}

以及所有实体apollo-cache-inmemory。

Answer 1

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