Kirby 3 + Gatsbyjs

Hello there! :slight_smile:

I am thinking about rebuilding my site with gatsbyjs getting data out of kirby. And I thought maybe one of you did the same before. I thought it might be easy creating pages using json content representations, but it’s not (or maybe I’ve got a knot in my head) :wink:

So I thought, before I invest a lot of time figuring out how to connect gatsby and kirby, I’ll ask you: Did somebody of you already go the step and figured out how to do so? If so, would you provide your solution?

I would like to cleanup my frontend code and I love to think in components, having a folder with a template + scss + tests for each component. Thats’s one reason I’d like to use gatsby. But… I would like to invest the time in moving things into components, rather than sitting there for days figuring out how to get data into gatsby. :grimacing:

The official KQL plugin is probably your friend here

Thank you, I stumbled upon it but the Alpha note putt me off a bit. And I would probably have to write a source plugin for gatsby, translating GraphQl to Kql, wouldn’t I?

I guess so, i am not familiar with Gatsby other than a rough understanding. Yes, the plugin in Alpha but it is pretty solid already and under active development. It wont be Alpha for too much longer :slight_smile:

This might be useful too… its not Gatsby but it is example of using a similar setup…

Also probably worth looking into: https://getkirby.com/plugins/robinscholz/better-rest

It wont be Alpha for too much longer

Ah :slight_smile: then maybe I should give it a try. And the vue-starterkit might indeed be good start to get some ideas and solutions from - thank you! :slight_smile:

Thank you, I had some trouble with the basic auth part, but probably I should invest some more time, I was a bit impatient getting things up and running.

What was your problem with content representations? After all, they give you full control over what you return.

As regards KQL: There should be a new release soon. Don’t know what that will mean for the alpha status.

I think it’s more a problem of the way the data source plugins in gatsby work.

For example: I have a representation for the bloglisting returning the slugs of the child pages. In gatsby I would go through that list of slugs and query detail data of the single pages in the gatsby page template. But using the source plugin I would need a configured endoint for each post, or I would have to build a generic kirby-endpoint which is able to process query params, giving it the page slug and make it return the page json.

That’s when I stopped, because it felt like I was about to rebuild the REST API.

A little late to the party here.
What is the main reason for you to switch to gatsby?

During my main job I work a lot with react and Gatsby, so I am very used to think in components. I like to use atomic design and have markup, styling and the logic for a single component grouped, so I can reuse it easily. Kirby isn’t working like that in the frontend. I have a snippet and somewhere else my sass file and maybe some js etc.

I also think it’s a good idea to have static pages generated on build time for most of the content. Gatsby has this great feature to replace certain blocks within those static pages with dynamic content. This would speed up the site, and make it easy to keep parts dynamic (like comments for example).