Fork me on GitHub
#fulcro
<
2017-12-20
>
tony.kay01:12:12

Working on adding a “data scrub” preview to Fulcro Inspect

tony.kay01:12:57

Need to figure out the CSS…probably a bit of restructuring of Inspect itself…but this shows the idea.

LL01:12:54

@tony.kay If put data in `:initial-state of the defsc, the defcard-fulrco will display the normalized db,

(defsc The-Id [this {:keys [:db/id : :]}]
  {:query [:db/id : :]
   :ident [: :db/id]}
  #_(dom/div nil value))

(def ui-the-id (prim/factory The-Id {:keyfn :db/id}))

(defsc All-Ids [this {:keys [:all-ids]}]
  {:query         [:all-ids {:all-ids (prim/get-query The-Id)}]
   :initial-state (fn [_] {:all-ids
                           [
                            {
                             :db/id
                             17592186045442
                             :
                             "124"
                             :
                             {
                              :db/id
                              17592186045431
                              :db/ident
                              :qs.id.market/深圳
                              }
                             }
                            {
                             :db/id
                             17592186045440
                             :
                             "123"
                             :
                             {
                              :db/id
                              17592186045430
                              :db/ident
                              :qs.id.market/上海
                              }
                             }
                            ]})}
  (dom/div nil (do (js/console.log "aa") (js/console.log all-ids)))
  #_(dom/div nil
    (mapv ui-the-id all-ids)))

(defcard-fulcro card1
  #_(df/load app :all-ids All-Ids)
  All-Ids
  {}
  {:inspect-data true
   :fulcro       {:networking       cs-net
  )

tony.kay01:12:52

yep…that’s how it is supposed to work

LL01:12:59

but if use df/load to load data in :started-callback of defcard-fulcro, the :inspect-data true just display the original data without normalization.

(defsc The-Id [this {:keys [:db/id : :]}]
  {:query [:db/id : :]
   :ident [: :db/id]}
  #_(dom/div nil value))

(def ui-the-id (prim/factory The-Id {:keyfn :db/id}))

(defsc All-Ids [this {:keys [:all-ids]}]
  {:query         [:all-ids {:all-ids (prim/get-query The-Id)}])}
  (dom/div nil (do (js/console.log "aa") (js/console.log all-ids)))
  #_(dom/div nil
    (mapv ui-the-id all-ids)))

(defcard-fulcro card1
  #_(df/load app :all-ids All-Ids)
  All-Ids
  {}
  {:inspect-data true
   :fulcro       {:networking       cs-net
                  :started-callback (fn [app]
                                      (wn/install-push-handlers cs-net app)
                                      (df/load app :all-ids All-Ids))}}
  )

tony.kay01:12:39

my guess is that you’re returning the wrong shape from the server

tony.kay01:12:06

mege will always merge the data that comes back. Normalization doesn’t work unless the shape of the response matches the shape of the query.

tony.kay01:12:27

I think you probably want (df/load app :all-ids The-Id)

tony.kay01:12:44

because my guess is that you’re returning a vector of The-Id instances

tony.kay01:12:21

All-Ids is your root, but your vector has things that look like The-Id. See ppl make this mistake as beginners often

tony.kay01:12:30

esp with bad component names (you confuse yourself with the names of things)

LL01:12:59

yes, I just return a vector.

tony.kay01:12:23

but a vector of what?

LL01:12:40

a vector of The-Id

tony.kay01:12:46

A vector of things that contain the stuff in The-Id I bet

tony.kay01:12:18

so you have told load you’re loading the All-Id component, but you didn’t return an All-Id data structure, you returned a vector of The-Id component data structures

tony.kay01:12:34

It cannot read your english or mind…only your code

tony.kay01:12:32

Think of load (without target) as a load of an edge on the root node (to-one or to-many)

LL01:12:40

because the :inspect-data true display the return data which add :all-ids key automatically.

tony.kay01:12:59

:all-ids is part of your root node

tony.kay01:12:11

which has type All-Id (you wrote it)

tony.kay01:12:38

You’re not loading All-Id…you’re loading an edge that points to one or many The-Id things

tony.kay01:12:16

But you told load that you were going to load a (nested) All-Id on that edge instead

tony.kay01:12:32

Read (load app :edge Component) as “Load one or more Component into the root edge called :edge”

tony.kay01:12:49

Server must return one or a vector of Component

tony.kay01:12:52

(load this :people Person) “Load one or more Person into root edge :people” (load this :people Person {:target [:x 2 :people]}) “Load one or more Person into root edge :people, then relocate it to the given path”

LL01:12:58

@tony.kay sorry for my english, and Thank you very much.

tony.kay01:12:12

no need to apologize 🙂

tony.kay01:12:29

It’s easy to get confused until things are practiced

LL02:12:12

yes, you right, I need more practice.

mitchelkuijpers14:12:40

With fulcro 2 something seems wrong with follow-on reads, we noticed that for the form support it does not really seem to work if you add the query for the form-root key it won't trigger a re-render. So we fixed that by creating an ident and using that. But now we have something that is depending on :my-nav-bar/width and we query for that on two places and it simply isn't triggerin a refresh of that element. we can fix this by just adding idents for everything but that really sucks. Is there some obvious thing we might be doing wrong?

mitchelkuijpers14:12:16

To my knowledge it should find all rendered things find that follow-on-read key and re-render everything that depends on that key

tony.kay17:12:26

One caveat: the data for that key has to have actually changed. The follow-on read should trigger a check for that, but a refresh will only happen if the data has actually changed.

tony.kay17:12:09

Otherwise, you found a bug.

tony.kay17:12:04

It is possible, if you're not giving components Idents that something is wrong with the rendering refresh. I always give my components Idents if they depend on data, because otherwise their mutations are not location Independent.

tony.kay17:12:17

Note that render optimization doesn't happen unless your components have idents. Refreshing a component without an ident will force a root re-render.

tony.kay17:12:19

And why would a form, assumedly representing persistent entity data, not have an ident?

mitchelkuijpers18:12:49

It has an ident but the trick with form-root key does not seem to work

mitchelkuijpers18:12:59

Will see if I can reproduce

tony.kay18:12:54

Thanks. I'm on my phone right now, or I'd spin up and give it a shot. If I don't hear from you I will try to reproduce it when I get the chance.

tony.kay18:12:10

I tried removing the idents from the targeted mutation refresh demo and it works fine . so I'm unable to reproduce your problem.

mitchelkuijpers19:12:18

No problem will test it out tommorow, I'm also on my phone ;-)

souenzzo23:12:07

There is a WIP fulcro version? I will try to do one to learn fulcro.

tony.kay20:12:19

RC4-SNAPSHOT updated on Clojars. To fix the form refs bug I removed legacy code I inherited from Om next that was wrapping inputs. I think it was just for fixing an old react bug with IE. They seem to work better without the wrapping, but just in case, I’ve added a compile-time option that you can enable to get the “old” version. Just set the JVM option -DwrappedInputs on the JVM running the compile, and it will use the old DOM wrapped input code from Om Next.

tony.kay20:12:47

According to this, the React bug is fixed: https://github.com/facebook/react/issues/7027