Gridsome: Add graphql-source plugin

[jakedohm]

Summary

Create a plugin that allows a user to connect a remote GraphQL API endpoint, which then gives them full access to the remote schema.

Basic example

Gastby Source GraphQL: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-graphql

Motivation

• Why are we doing this?: When someone has already put together a GraphQL schema on their DB, it seems fair to assume that Gridsome should be able to use that schema locally, so the user only has to create one schema.
• What use cases does it support?: Anyone who wants to bring in data from a remote GraphQL endpoint.
• What is the expected outcome?: I can install a plugin, pass it a GraphQL endpoint URL, and maybe 1/2 configuration options, and be able to access all of my remote data from within my templates/components.

Implementation

I'm not 100% sure whether the best implementation is to try to "scrape" the remote schema and use a local version of the schema at build time, or just to use the remote schema directly at build time.

[meuschke]

@jakedohm super interested to develop this plugin! I need it for my shopify storefront!
I tried to merge the remote schema but I am not exactly sure what the return type for addSchemaField is.
This code will not work ...

https://gist.github.com/meuschke/1e6f9e1891d2ffec10e6dcf933856a74

Any idea how to merge the schemas correctly ?

Best,
Toni

[hjvedvik]

@meuschke Try the api.createSchema() hook and see if that works for you :)

[jonathanmelville]

Curious if there has been any movement on this.

[jakedohm]

@jonathanmelville not that I know of. I'd be happy to test this out and see how it works.

I'll set up a GraphQL server to integrate it with and report back in a few days.

[jonathanmelville]

@jakedohm Cool. Eager to try Gridsome w/ a CraftCMS/GraphQL data source.

[jakedohm]

@jonathanmelville @meuschke I've got something working!

Here's a Gist for the gridsome.server.js that allows you to pull an external GraphQL schema and "stitch" into the local schema: https://gist.github.com/jakedohm/860f2dadbf00f0d96c8f8d773c476351

BTW, the remote GraphQL schema I integrated into was made with CraftQL. This is great for Craft CMS installs, but should work for any remote schema.

[jonathanmelville]

@jakedohm That's awesome! Thank you for tackling this, I can't wait to play with it this week.

[jakedohm]

Major props to @hjvedvik and the Gridsome team for their help via chat, and the createSchema API which appears to work flawlessly!

[dark88888]

Hi @jakedohm, your solutions seem to work like a breeze. All queries, mutations from GraphQL explore work great.

However, I do have a question:
What would be steps to proceed in order to create the routes to the new generated Schema?
Or, at least what would be the steps to create the routes only for some TypeNames.

const contentType = store.addContentType({
      typeName: 'BlogPosts'
      route: '/blog/:year/:slug' // optional
})

[jakedohm]

@darkrubyist the short answer is: It's hard, but it's being worked on 😄

There's not really a way to create a "content type" from existing content in the GraphQL schema. The Gridsome team is working on some APIs for 0.6 that will help with this, but there's definitely a good amount of work to do to remove this pain point.

The current way to do it would be to _not_ do schema stitching, and do something like this from the Gridsome docs: https://gridsome.org/docs/data-store-api/#fetching-external-data

I'll be working on this, and will report back as I make progress!

[vdilly]

Hi !
I'm very interested in this post too. I'm trying to use Dato CMS with Gridsome. @jakedohm indeed your code is working just fine ! But as you said it doesn't manage the routing.

I managed to get the work done by following the https://gridsome.org/docs/data-store-api/#fetching-external-data doc, fetching datas then create the content types, but it's a long work ...

[hjvedvik]

This PR #309 will let you create pages from the added schema. The API is finished. Just waiting for a few other features for 0.6 before merging it in :)

[narration-sd]

Looks like great work @jakedohm, @hjvedvik , but I was trying take a simple crack for a moment at bringing CraftQL up, since gridsome is getting so capable, and there's something I don't quite see about what you guys are doing.

It seems you're trying to pull the Craft data in so that you can use your own Gridsome GraphQL to query it.
Am I wrong about this (quite possible ;) )

But if so, I'm remembering why I put this aside a while ago (not off my machine!).

Why not just arrange to send pageQueries straight to CraftQL? It's a pretty full-service GraphQL server, for everything Craft can do.

And then it handles its own Schema, the retrieve is just a POST with query and variables and the security headers Jake will already have in there, then the data comes back in GraphQL form, ready for your Store.

You don't need the Schema in that case, unless, again, I'm missing something fundamental here, and all becomes easy?

oder, as certain friends used to say...not sure it translates into Norwegian, but fits the case, since I'm not at all sure...

[jakedohm]

@narration-sd hey! If you use the Gist that I put earlier in this thread, it uses the Schema Stitching pattern, which means it pulls in the remote schema and stitches it into the local schema, but it doesn't fetch all of the remote data.

Then it makes the page-query and other types of queries to the remote CraftQL API at build time.

[narration-sd]

hey, back, @jakedohm -- you're right, it works. A moment's delay due to full Schema reconstruction each time, but for Gridsome's purpose this doesn't subtract from a win.

I had tried your code earlier, but got sidetracked by something unexpected from a server, and then by concept; didn't clock what schema stitching had to mean, while in attention about a certain project you're aware of.

Now I keep expecting the Gridsome page to just immediately show the content edits I make ;) . Well, this advance means that's a prospect likely not long to be arriving.

And Vue is really such fun, coming back to it. Gridsome should have a great future, and not just because I'm a little positively prejudiced about Norway. We can hope also, one of its plugins.

Visual, or it didn't happen:

[ryker-s]

@jonathanmelville @meuschke I've got something working!

Here's a Gist for the gridsome.server.js that allows you to pull an external GraphQL schema and "stitch" into the local schema: https://gist.github.com/jakedohm/860f2dadbf00f0d96c8f8d773c476351

BTW, the remote GraphQL schema I integrated into was made with CraftQL. This is great for Craft CMS installs, but should work for any remote schema.

Your method works like a charm. I got gridsome to pull the schema from my apollo server and was able to create blog posts via JWT authentication.

[sanscheese]

Hey @jakedohm and @hjvedvik I've done the initial setup for this plugin from the gist.
https://github.com/sanscheese/gridsome/tree/feat/plugin-source-graphql/packages/source-graphql

Let me know if would like to work from this, or Jake you've done the heavy lifting on this, so can setup a fresh branch.

[ghost]

🚀