Nested same query with different fields for progressive loading, is it a good idea?

apollo
1

I’m wondering if this is a good idea.
for example i have some collections with nested properties: user_collection, foo_collection, bar_collection, and my user structure may look like this

user{ 
  some_property
  foo{
    some_property
    bar{
      some_property
    }
  }
}

and it get nicely resolved by the resolvers, but i may wait a bit before showing anything.

So i think i could do something tricky like this:
i create 3 queries, add progressively the child props.

const CURRENT_USER = gql`
    {
        currentUser{
            _id
            some_property
        }
    }
`;

const CURRENT_USER_WITH_FOO = gql`
    {
        currentUser{
            _id
            some_property
            foo{
                some_property
            }
        }
    }
`;

const CURRENT_USER_WITH_FOO_BAR = gql`
    {
        currentUser{
            _id
            foo{
                some_property
                bar{
                    _id
                    some_property
                }
            }
        }
    }
`;

then i create a nested Query component like this

<Query query={CURRENT_USER}>
    {({data, loading, error})=>{
        doSomethingsWithUser();

        return (
            <div>
                {print_partial_user(data.currentUser)}

                <Query query={CURRENT_USER_WITH_FOO}>
                    {({data, loading, error})=>{
                        doSomethingsElseWithUser();
                        doSomethingsWithFoo();

                        return (
                            <div>
                                {print_partial_foo(data.currentUser.foo)}

                                <Query query={CURRENT_USER_WITH_FOO_BAR}>
                                    {({data, loading, error})=>{
                                        doSomethingsElseWithUser();
                                        doSomethingsElseWithFoo();
                                        doSomethingsWithBar();

                                        return (
                                            <div>
                                                Server struggled???
                                            </div>
                                        )
                                    }}
                                </Query>
                            </div>
                        )
                    }}
                </Query>
            </div>
        )
    }}
</Query>

so in this way the data get printed progressively, and the nested queries will(maybe) read the parent collection data from cache. Or it’s a horrible idea?

2

Not sure about the efficiency of your DB structure but those look like aggregated queries to me. Have a look here and maybe get some inspiration: Grapher + Apollo Test Benchmarks (200X improvements in some cases)