apollo-client in next.js with `next-with-apollo` VS the approach shown in next.js docs FAQ (no use of `getDataFromTree`)

Question

Contrast in "apollo-client in next.js" approaches chosen in next-with-apollo npm library and the approach shown in next.js docs.

The link of approach chosen by next.js for apollo client: https://github.com/vercel/next.js/blob/canary/examples/with-apollo/lib/apolloClient.js

In next.js doc approach:

• no third-party library next-with-apollo is used
• no get-data-from-tree is used
• Moreover i found this approach more meaningful and elegant inner-working of client side redering and SSR of apollo-client in next.js. I strongly like this

Some cons in next-with-apollo approach

• in next-with-apollo docs, it is stated that in withApollo API, the parameter getDataFromTree of intialState defaults to undefined by implementaion and its stated "It's recommended to never set this prop, otherwise the page will be a lambda without Automatic Static Optimization "
• get-initial-props is used which is not recommended by next.js for optimization reasons general thing. Why to consider third party library if there is non-third party way and suggested officially unless it has drawbacks?

It made me really curious to see many are using next-with-apollo and rarely seen the usage of the approach shown in next.js docs? I'm curious whether approach in next.js docs has any drawbacks (which i strong think of not having any)?

• does the approach shown in next.js has some drawbacks?
• does next-with-apollo has more efficiencies? if so what r those more efficiencies for which it is wise not to choose next.js doc approach. I wanna be sure that if i'm rejecting next.js doc approach (currently im choosing it) i'm not doing any wrong

So which is better for both client-side data fetching and server-data fetching to support both CSR and SRR?

Answer 1

I found the answer by posting in next.js community:

Here it goes:

next.js doc's apollo examples avoid using getDataFromTree because it traverses the react tree twice in order to trigger all the queries and collect their result afterwards.

The drawback of using the approach on the next.js doc's apollo examples is since you don't use getDataFromTree, you have no way to know which queries your inner components are using. So you need to remember to prefetch everything you need on getStaticProps/getServerSideProps and match the exact same queries/variables

next.js doc's apollo examples way is recommended instead of getInitialProps so I would always use them unless one has some very specific reason not to