Apollo Gatsby and GraphCool Integration Help


#1

I’m attempting to tackle the above stack (plus Netlify) with limited success.

My goal is to statically render known data at build time (e.g. products), add data through a client query at run time (e.g. user state), and be able to augment the statically rendered content if it changes (e.g. a GraphCool subscription changes the product price from $1 to $2)

I’ve gotten as far as the server querying GraphCool at build time and rendering pages. But hydrating the Apollo client store has proven challenging.

Can anyone point towards a good resource that might be able to help? I’ve read the Apollo docs. They’re helpful, but slightly off point.

Any ideas are hugely appreciated!


#2

I’ve started work on a source plugin for Gatsby to do just that. But unfortunately, I ran out of time. You can find the background, and more info on source plugins, in this thread:


#3

Thanks! Plugins are above my paygrade. :slight_smile: Instead, I just hacked the Gatsby-node file. But I’m at a loss to properly configure Gatsby-ssr and Gatsby-browser.

For anyone that’s curious, here’s what I did in Gatsby-node.


#4

It doesn’t look like you can call async functions from SSR. I opened this issue.


#5

I feel like I may be talking to myself. :slight_smile:

But I think this is a really powerful stack! Kyle said he would take a PR it. I hacked Gatsby and got it t work (see the issue), but I’m not good enough to get a PR into a library this complex. I’m hoping that someone who does will take on my mission!

I’ve got it working in development. Gatsby queries Graphcool for products. Gatsby then passes the page components to Apollo. Apollo walks the tree and finds all graphql queries, runs them, hydrates the store, and renders it on the server. Gatsby then writes the output as raw HTML. Then at runtime, Apollo sends Graphcool the same queries as run at build time and updates/diffs accordingly. Combine that with Netlify and a Graphcool web hook for rebuild, and this is insanely powerful! I’m really excited about it.


#6

Hey LawJolia,

it sounds really exciting what you’re doing there!
Indeed like Kim said, someone would need to sit down to create a Graphcool Source Plugin for Gatsby.

I haven’t looked into the API for Gatsby Source Plugins yet, but either use that API or use a general approach of schema stitching:


There’s also a nice blog post by Sashko about that topic: https://dev-blog.apollodata.com/graphql-schema-stitching-8af23354ac37

Maybe these resources help :slight_smile:

Anyone who is interested in this, there is definitely the opportunity to create the Gatsby Graphcool Source Plugin, which could be pretty powerful as you would have all the Gatsby niceness (nice SSR, preloading etc) + the powerful Graphcool API :slight_smile:


#7

Hi @tim!

Thanks for your feedback!

A plugin is a cleaner alternative, but it’s not needed. My logic is stuffed into gatsby-node.js, and it’s not too hack-y.

I’m making a Gatsby/Apollo/GraphCool starter hack kit that I hope to have online later today. Hopefully that will illuminate my ideas more explicitly.


#8

I know last I checked a couple weeks ago, someone was working on a gatsby plugin for graphcms. And they were discussing how it could easily be used for other graphql backends. So I think that would be a good starting point.

If someone is looking into writing this, I would check in on their discord channel.


#9

@LawJolla It’s still on my list… However, my shortlist got a bit long… I think a plugin is the only way to go. And they will probably not accept a PR for something that’s ‘hacked’ into the main codebase. However, if it works for you, that’s great! Creating the plugin isn’t really that hard. It’s just a matter of defining a query, and by parsing that query deciding on the structure of the data.


#10

According to Kyle in the issue posted above, he will take converting gatsby-ssr into async.

I’ll have a post up later that details my thoughts so I can better figure out where I’m going wrong! :slight_smile:


#11

Here’s my blog! It’s a little long winded to appeal to the uninitiated. Scroll down to “How to Make the Damn Thing Work”

Thank you for any feedback!


#12

For anyone that’s following along from home, I sent a PR to Gatsby for SSR data fetching, and Kyle is willing to take it. Hopefully it’ll be in Gatsby proper soon!


#13

any updates in this area?

Trying to integrate the demo website generated with prisma with gatsby but is not straight forward.