apollo-link-state not practical with HUGE data sets

120 Views Asked by At

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?

0

There are 0 best solutions below