1

So, I'm basically still pretty new to the whole npm/react.js (let alone react.rb) ecosystem, and I'm wondering if it would be possible to use reactrb with the gatsby static site generator.

I've been attempting to get opal/reactrb support through opal-webpack, but have been running into some issues (see this issue for some backstory https://github.com/cj/opal-webpack/issues/36). Specifically where I got stuck was trying to get it to play nice with bundler.

Is combining reactrb components with gatsby something that's even feasible? I'm hoping the answer is yes.

hayley
  • 11
  • 1
  • Not sure actually... haven't seen reactrb before. What you'll need to find out is if you can include reactrb components in a JS project. From what I've seen poking around, all the documentation assume you're writing *everything* in Opal. If that's the case — that Opal/React.rb only work standalone, then you wouldn't be able to use them with Gatsby. You can btw, use Coffeescript/CJSX with Gatsby which gives a bit more of a Ruby flavor. – Kyle Mathews Jul 25 '16 at 02:07

2 Answers2

1

Sorry for the very late response. Reactrb has been renamed ruby-hyperloop and yes, you can certainly use it with Gatsby and any static site generator. The Hyperloop website is built with Middleman for example.

The best way to integrate Hyperloop into a static site generator is by using Hyperloop.JS https://github.com/ruby-hyperloop/hyperloop-js which has not server footprint at all.

Please see the Hyperloop website for examples and tutorials: http://ruby-hyperloop.io/

BarrieH
  • 373
  • 3
  • 11
0

You can fetch data into Gatsby form any kind of source. You need to create a source plugin. The answer from @BarrieH is accurate, but could be slightly misleading.

You cannot query directly from an external GraphQL API into a component. Gatsby works by loading all your data into its own nodes system, then you pull data from those nodes into your components. This is what allows Gatsby to compile your data to static JSON files on disk, pre-fetch data for other pages, and so on.

Here's the relevant docs: https://www.gatsbyjs.org/docs/create-source-plugin/

chmac
  • 11,757
  • 3
  • 32
  • 36