Not showing data with react.rb

Question

I'm just trying to use ReactRB with reactive-record.

So the deal is in render part I think. When I'm setting param :user, type: User in React Component class, I can't see any data in my table. Of course Model User in public folder, as this requirement in ReactRB.

Well, in console I see that server is fetching nothing, but right data returned.

What I'm missing? Thanks for the help!

The key for answer is in this screenshot

The details are that the data comes back from the server as a json blob reactive-record decodes it, but counts on the fact that if you try to json parse a simple string, it raises an error. opal 0.10 no longer raises standard error, so the whole thing just hangs up.

Answer 1

Just thinking about this... there is a known problem in Opal https://github.com/opal/opal/issues/1545 and this causes a problem in reactive-record. Please make sure that you are not using opal 0.10

Answer 2

One thing to keep in mind is that reactive-record lazy loads records, and attributes. So unless someplace in your render, you access a particular record/attribute that attribute will not show up on the client.

Its hard to tell more without a bit more of your code posted, but here is some help:

Lets say your component looks like this:

class Foo < React::Component::Base
  param :user, type: User
  def render
    "user.name = #{user.name}"
  end
end

and someplace either in a controller or in a layout you do this:

render_component '::Foo', {user: User.first}

You might try something very simple like this, just to get familiar with how things work.

What happens should be this: You will render your view and a placeholder for the first User will be sent to the component, during rendering the component looks for that user's name attribute, which it does not have, so that is queued up to fetch from the server. Rendering will complete, and eventually the data will come down from the server, the local model's data will be updated, and components displaying that data will be rerendered.

During prerendering all the above happens internal to the server, and when the component has been rendered the final html is delivered along with all the model data that was used in rendering the component. So on first load if all is working you will not see any fetches from the server.

So if you try out the above small example, and then go into your javascript console you can say things like this:

Opal.User.$first()

and you will see the underlying model data structure returned (I am translating from JS into ruby above... ruby methods all start with $)

You can then do this:

Opal.User.$first().$name() 

And you can even do this (assuming there are at least 2 user models):

Opal.User.$find(2).$name()

You should have something like "DummyValue" returned, but then there will be a server fetch cycle in the console, then if you repeat the above command you will get back the actual value!!!

This may not be the best forum for more details, if you need to drop by https://gitter.im/reactrb/chat for more help