I'm trying to get this apollo-link-state to work for my app which relies on a tremendous amount of nested data. I went this route because front loading all that data takes 20seconds, can't have that. So, i figure to load the bare minimal, and then when a user moves thruout the site, I make the necessary calls and merge it into cache.
Here is the problem. I have to define A DEFAULT data set, AND then I have to create the query for it. Is it really necessary to have a query that expects hundreds of data points, THEN define defaults for all of that.....That is soooo much work just to cache data. Every example I see about apollo-link-state is some silly 2 liner and everyone says "see how easy it is..", yeah, but its wholly not practical UNLESS I am missing something here... what are my options...
So, in my client file, I have
const defaults = {
id: '',
session: {
id: '',
user_id: '',
first_name: '',
last_name: '',
admin: '',
advertisers: {
/// bunch of values
administrators: {
// bunch of values
permissions: {
// bunch of values
}
}
},
products: {
automotive: {
// bunch of nested object with values
},
sports: {
// bunch of nested object with values
},
entertainment: {
// bunch of nested object with values
},
},
};
const resolvers = {};
const cache = new InMemoryCache();
const stateLink = withClientState({ cache, defaults, resolvers });
const apolloClient = new ApolloClient({
cache,
link: ApolloLink.from([stateLink, new HttpLink({
uri: `${config.url}/graphql`,
credentials: 'include'
})]),
addTypename: true,
dataIdFromObject
});
That defaults is not even half of what I need.
Then in my query, I call what I am willing to front load, then add @client to those I will "merge in on the client" side... BUT, now I have to manage two seperate files to achieve and there is alot of redundancy.. But my query is just a GIANT file because I need to cache everything there because as a user moves thru the site, they need different items from different parts of the query.
So, when I run this, it errors out because it expects EVERYTHING to be in that defaults that is in the SESSION_QUERY... keeping two seperate, gigantic, needs seems so......ugggggh. I must be missing something.
<Query query={SESSION_QUERY}>
{({ loading, error, data }) => {
// render appropriate component depending on loading/error state
console.log("IN QUERY:::: ", loading, error, data, this.props.client.readQuery({ query: SESSION_QUERY }));
return null;
}}
</Query>
Now, I am getting errors because the "default" needs literally everything in it... I just don't see how this is maintainable.... apollo couldn't think of a better way? What am I missing?
