How to normalize state in apollo-link-state? - graphql

Question

Given a query that returns a response with many levels, for example this query on Github's GraphQL API:
query {
viewer {
starredRepositories(first: 100) {
edges {
node {
repositoryTopics(first: 100) {
edges {
node {
id
topic {
id
name
}
}
}
}
}
}
}
}
}
How can you normalize the topics and store it into a store using apollo-link-state?
{
topics: [Topic]
}
Currently my store is set up as follows:
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 ... ,
]),
});
Inspecting my cache shows the ROOT_QUERY:
{
topics: { ... },
viewer: User
starredRepositories({"first":100}): StarredRepositoryConnection
...
}
As well as all the entities normalized by apollo-cache-inmemory.

Answer 1

To my understanding normalizing data is completely outside of the scope of Apollo queries or cache. You're going to want to create some sort of helper function to flatten the object as needed once it has been fetched from the cache. Unlike Redux there isn't middleware where an action can be processed on it and stored in cache. At least to my knowledge. I did find graphql_normalizr which might give you what you want though. For me I would stick with simply wrapping the Query in a component with a helper function to run the fetched object through a normalized schema via normalizr https://github.com/paularmstrong/normalizr/issues/108 before being returned.