Any SSG examples using Next.js + Apollo?

[adamsoffer]

I'm interested in trying out the new unstable_getStaticProps api using a headless graphql CMS such as Prismic or Contentful. Before I go down this rabbit hole, does anyone have an example of this type of integration they're willing to share?

[timneutkens]

Would recommend not using Apollo and just doing a simple fetch in getStaticProps. But it works if you just add getStaticProps as getInitialProps in _app is still triggered for incremental adoption purposes.

[AryanJ-NYC]

I had great luck migrating away from Apollo Client and using swr and graphql-request.

In case it helps anyone looking here in the future: https://dev.to/aryanjnyc/i-migrated-away-from-apollo-client-to-vercel-swr-and-prisma-graphql-request-and-you-can-too-245b

[janus-reith]

How would you deal with usecases where the client needs to take over e.g. to refetch a query, or to use polling? I guess it would work to use something like graphql request first, pass in the data, then in the actual component set up the apollo query in a typical way, probably a hook now, and ignore that initial data as soon as newly fetched is available, but I was wondering if there is a more seamless approach which does the work once e.g. in the withApollo HOC, while also supporting more edge cases. For example, lets say I have such a specific use case that I dont want to do a separate query on the client, but only have a mutation which would update the cache of existing data that was statically fetched. And then, maybe I even have several of them on separate pages, so on the client I would need to have all necessary data available in the apollo cache.

HOCs wrapping a page will have access to the data which was fetched in getStaticProps of the page, so it would be possible to add to the cache from there. But on the other hand, it would be nice to have a solution where I don't need to specify these queries twice and just have a useQuery somewhere in the Code and that would be fetched on SSG.

[janus-reith]

@trevordmiller Thanks, yes basically I already ended up doing something similar, although in a hook and not a hoc. I realized that usually there was no need to have that initial data present as part of the apollo cache, so I could keep it just that simple aswell.

[adamsoffer]

@trevthewebdev Interesting thanks for sharing. Is there an example of this anywhere? Would be great to get a version of the withApollo example using this SSG technique.

[reachtrevor]

@adamsoffer
My second iteration is working well, no more weird loading states and no exceptions because I can return data['someKey'] if for some reason the query fails.

I have not tried it using withApollo honestly I have a lot of experience with react but I am a beginner with graphQL and apollo. My use case was I wanted statically generated pages backed by strapi (headless cms) the above implementation seemed to accomplish my goals for the time.

[adamsoffer]

@janus-reith mind sharing your hook example? Trying to do something similar myself.

[janus-reith]

@adamsoffer The example @nickluger linked where the initial cache is passed to Apollo seems to be a clean solution, provided that the overhead of using Apollo on the server and extracting the cache is not too much of an overhead compared to something simpler on the server like graphql-request.

My hook doesn't really do anything special. You fetched the initialData, and have it available as a prop on your page function.
There you have something like this where you pass initialData to the hook:
const [initialDataOrFromApollo, refetch, isLoading] = useInitalDataOrApolloData(initialData);

In that hook you have useQuery somewhere and at the end return the apollo query data or just pass through the initial data the hook recieved:

return [
	dataFromUseQuery || initialData,
	refetch
	isLoading
]

So just as the solution @trevthewebdev provided, this doesn't actually take care of having initial data available in apollo, but passing similar data to your components as a substitute.

[nickluger]

Heres a small example: #11957 (comment)

[janus-reith]

I would consider this example the actual answer to this, as it covers the idea of having Apollo with initial data from getStaticProps available.

[adamsoffer]

ah sweet yeah that's what I'm looking for :)