Gatsby: Graphql usage on client-side app

[i8ramin]

Hi, I am curious to know if the Gatsby Graphql layer can be used outside of server-side rendering of pages. For example, could it be used client-side with a SPA setup to query data from an graphql API endpoint? If so, any examples or docs available?

[i8ramin]

Hi any updates on this one?

[DSchau]

It sure can! I have an example here where I create a Gatsby application that renders Github issues, and then once the app is launched, it adds a listener to Github's GraphQL API with apollo.

Check it out! In particular, the gatsby-ssr is probably most helpful. Additionally, I'd recommend checking out #3650, as the question is relatively similar.

(Note that this is a Gatsby v1 application, so if you're on v2, some things may change; general idea is the same though!)

Going to close this as answered, but thank you for the question, and please re-open if you have any other questions or if we can help further.

[jlengstorf]

For future Googlers, here's a working example of Apollo + Gatsby V2: https://github.com/jlengstorf/gatsby-with-apollo

[DSchau]

@jlengstorf is it worth moving that to the examples directory in gatsbyjs/gatsby?

[jlengstorf]

@DSchau good point, yeah. If you want to move it, feel free. I can get to it probably after the GraphQL Summit otherwise.

[axe-z]

apollo-client should have been the default way to go here, sadly i'm on day 1 here, and seems it's not.

[DSchau]

@axe-z sorry, what exactly do you mean by that? The example @jlengstorf linked uses apollo-boost (which is a simplified variant of apollo-client).

[axe-z]

ok I see, i'm learning with the default install, like I said i'm on day1, no apollo-react or boost in the modules. Not sure why it's not apollo by default . It's the obvious choice. Tks anyway. I'm not on the right repo obviously now ;) Is this updated enough ?

[Ciantic]

I actually agree with @axe-z the apollo should be more integrated. Sure if your site is only static site apollo is not that interesting, but most sites do use some sort of dynamic queries.

Now it's hassle to get it working similarily as useStaticQuery e.g. the gatsby-plugin-typegen of course does not support apollo's useQuery by default so I need to find two different ways to generate types.