[with-apollo] using data from apollo cache

[aamorozov]

https://github.com/vercel/next.js/blob/canary/examples/with-apollo/pages/index.js

In the example above, the queries are made within getStaticProps, but the page component is not using them after fetching. I've tried setting it up locally and it works if i do:

export async function getStaticProps() {
  const apolloClient = initializeApollo();
  const { data } = await apolloClient.query({
    query,
    variables: { slug },
  });
  return { props: { data } };
}

I am able to access the data returned from queries. But if i follow the example and try accessing apollo's cache i get a bunch of root queries instead of resolved data:

export async function getStaticProps() {
 const apolloClient = initializeApollo();
 await apolloClient.query({
   query,
   variables: { slug },
 });
 return { props: { initialApolloState: apolloClient.cache.extract() } };
}

[lfades]

initialApolloState is used by _app.js in the example to hydrate the Apollo store, once it's hydrated the query you used in the page will not make another fetch call as the data would be available already.

[aamorozov]

Thank you! That makes sense. I guess the question i have is if it's a recommended way to do it in SSG, i.e. the first example with getting the data and then passing it to page as a prop

[lfades]

@aamorozov That's okay too, not very common with Apollo because if the store is not populated you'll repeat the request in the client.

[Dannymx]

@aamorozov That's okay too, not very common with Apollo because if the store is not populated you'll repeat the request in the client.

If we have queries in components of the page, do we still have to call/cache those queries first in getStaticProps? Isn't that kind of repetitive? Let's say my page has 10 components and each component makes a query call or two, I would have to also call those queries in getStaticProps and it will get complex and hard to maintain quickly. What's the best approach to this?

[alex-r89]

I was using this method to fetch data, and it seemed to be working well. However, I couldn't get it working during build - the call to my graphql backend would return a 500 internal service error.

I still have no idea why this is. The graphql backend is on Digitial ocean, not vercel, but the call works perfectly via https/on the client.

Just a heads up as you may be heading on the same path.