Fork me on GitHub
#om
<
2015-10-15
>
adamfrey11:10:55

hey @dnolen, if I have a root component that renders two subcomponents with their own queries, is this an idiomatic way to write the root query, or is there a better way?

(defui Root
  static om/IQuery
  (query
   [this]
   (vec (concat
         (om/get-query Sub1)
         (om/get-query Sub2))))

  Object
  (render
   [this]
   (let [props (om/props this)]
       (sub-1 props)
       (sub-2 props))))

sander11:10:22

@adamfrey: how about static om/IQuery (query [this] [{:sub-1 (query Sub1) :sub-2 (query Sub2)}]), and then render using (sub-1 (:sub-1 props)) etc?

adamfrey11:10:58

@sander: I tried that earlier and that sends the :sub-1 key to be read from my state, so my props end up as {:sub-1 :not-found}

dnolen12:10:13

@adamfrey: queries where you don’t know the name of the key in the component that passes along the info is not idiomatic.

dnolen12:10:37

this occasionally means you will need a couple of forwarding entries in your parser, but this is no big deal IMO

dnolen12:10:54

[{:subquery1 ~(om/get-query Sub1} …]

adamfrey12:10:49

ok, that makes sense. Thanks!

dnolen12:10:01

missing ` there

dnolen12:10:06

in my example

dnolen12:10:11

@thomasdeutsch: 1) in that code :state is a DataScript instance 2) no 3) need an actual question simple_smile

dnolen13:10:57

just released Om 1.0.0-alpha2

thomasdeutsch13:10:18

thank you @dnolen. the actual question is: when i start a om/transact! i get this error message:

clj {:message "No queries exist for component path (om-datascript.core/CounterList om-datascript.core/Counter)", :data {:type :om.next/no-queries}} 
and i do not know what my mistake is 😐 The gist: https://gist.github.com/ThomasDeutsch/d54135ebcdad5c9f3d89

dnolen13:10:16

@thomasdeutsch: right the error is telling you there is no valid query for where that component lives

dnolen13:10:49

in the application that component has a “class path”, (CounterList Counter)

dnolen13:10:00

however queries need to be annotated across joins w/ the type of the component

dnolen13:10:19

but the path expressed by query you have is (CounterList nil Counter)

dnolen13:10:21

Will need to think about how to make it clear there has to be a one to one correspondence

dnolen13:10:35

I’m not currently interested in making this more flexible that’s for sure.

thomasdeutsch13:10:48

so, this is not correct? `[{:app/counters [{:counter-list/items ~subquery}]}]

dnolen13:10:58

you have 3 joins

dnolen13:10:03

one has no type

dnolen13:10:52

well 2 really, since the root doesn’t count

dnolen13:10:08

[{:counter/list/items ~subquery}] has no component associated with it

dnolen13:10:19

put simply

dnolen13:10:27

each join should be backed by some component

thomasdeutsch13:10:08

ok, i understand. right now, i think of a way to change the query ... thanks for the help!

dnolen13:10:30

@thomasdeutsch: so this is good feedback, I think I will probably allow your query to work

dnolen13:10:09

and error out if you have clashing query paths

thomasdeutsch13:10:15

as i understand it now, i need to get the :counter-list/items out of the query. for this i need to write a read method for the counter component? ... hard to get my head around it at the moment.

dnolen13:10:33

@thomasdeutsch: well besides the actual problem you found, I don’t really understand why you are going about this the way you are.

dnolen13:10:49

You’ve modified the DataScript tutorial in such a way that I do not understand your goals.

thomasdeutsch13:10:39

in my example, i simply added a root component, to host 2 counters - that is all.

dnolen14:10:42

@thomasdeutsch: right but the :app/counters read doesn’t make sense.

dnolen14:10:25

well it sort of does, but I probably would try to avoid the hard coded entity bit

dnolen14:10:11

that aside I think your example will just work once 415 is fixed.

thomasdeutsch14:10:08

thanks, this is a great feedback. i do not know why i used :app/counters in my example. I think it is simply because of the read method. i need to wrap my head around this.

dnolen14:10:08

well I used :app/counters in my tutorial, I’ll probably change that if it continues to be a source of confusion for people.

thomasdeutsch14:10:03

as soon as it "clicks" for me, i will give a short feedback what caused the confusion in my case.

dnolen14:10:28

this is specific to DataScript and other local custom stores that can actually support Pull

dnolen14:10:06

I hadn’t thought about this issue since, I’ve been focused on remote stuff ATM.

dnolen14:10:21

@thomasdeutsch: in anycase, my assessment is that there’s nothing actually wrong with your code

dnolen14:10:32

as in I might not do it that way - but it should “Just work"

sander14:10:03

any (early) ideas already about how to prerender om.next components on the server? right now i'm thinking, just like in om.current, about using ReactDOMServer.renderToString in a nodeJS process, and making sure the generated html includes initial transit/edn for the client-side local cache. (not sure if my formulation makes sense)

bbss14:10:25

I get Uncaught TypeError: React.initializeTouchEvents is not a function after upgrading to alpha2

dnolen14:10:39

@monjohn: you’re using an outdated version of Om Next - please use alpha2

dnolen14:10:04

@bbss: doesn’t sound like an Om thing, I just bumped to React 0.14 so you’ll have to sort out any React issues that may have caused.

bbss14:10:56

I noticed the bump, let me see if I have anything special going on.

dnolen15:10:10

@sander pre-rendering is definitely a React level concern, Om doesn’t provide anything in this regard over React

dnolen15:10:36

@sander some people have gone the Node route others Nashorn. IMO, it’s just more effort than it’s worth

dnolen15:10:58

pre-render using something else, only use React for the parts that are changing

bbss15:10:07

I guess it's probably devcards

sander15:10:59

@dnolen: ok thanks, makes sense

monjohn15:10:29

@dnolen: Updated to alpha2 and now get ‘Cannot read property of add of null’ with this line from the transact* function: (.add (:history cfg) id @(:state cfg))

dnolen15:10:55

@monjohn: make sure you’ve cleaned your build

dnolen15:10:08

I’ve used alpha2 on a number of things and haven't seen that

dnolen15:10:17

every transaction has to go through that line

monjohn15:10:12

@dnolen: Hmmm. I did ‘lein clean’ and wiped out target directory, and still getting error. Is there something else I need to clean up? I am using devcards, if that might be a problem.

dnolen15:10:22

@monjohn: pretty sure devcards doesn't support React 0.14. Would avoid for now

monjohn16:10:45

@dnolen: unfortunately, that wasn’t it. Got same error outside of devcards. I’ll keep messing with it.

thomasdeutsch16:10:53

Is it because of issue #416 (DataScript pull queries return results without data paths meta) , that after a mutation, the query from the sub-component is used? https://gist.github.com/ThomasDeutsch/7d153c6192f41dbbc75e

thomasdeutsch16:10:57

when i not have a :default reader, i get this error:

Error: No method in multimethod 'om-datascript.core/read' for dispatch value: :db/id

spinningtopsofdoom16:10:24

@thomasdeutsch: You're Counter component is querying :db/id :counter/title :counter/count for the keys you'll need to wrap the query into something like {:app/counter [:db/id :app/title :app/count]} and pass the Counter id is as a parameter

spinningtopsofdoom16:10:48

any "top" level keys in a query (i.e. [:id {:post [:title :body]}] has :id and :post as top level keys) are the dispatch values for the parser multimethods if you're using om/dispatch as the dispatch function

thomasdeutsch16:10:20

oh, i get it. in my case, i have 2 counters. do i need to implement om/Ident for every counter, go get the id for the counter query?

spinningtopsofdoom16:10:24

om/ident is only for the case where you're using an atom as a datastore. You'll need to get the id for each counter

thomasdeutsch16:10:59

as far as i understand: on the first render, everything is passed down from the root. when i mutate an entity, the child will render again, but at this point, i do not know where to get the identity from....

thomasdeutsch16:10:48

... you say that i have to pass the counter id as a parameter - but when the component rerenders, i do not know where to get the id from - i need to look into it a bit more.

spinningtopsofdoom16:10:54

Try adding this to your counter component

static om/IQueryParams
(params [this]
   {:id (:db/id (om/props this))})
that should give you the datascript id as a query parameters when the rerender query gets run

dnolen17:10:43

@thomasdeutsch: the fixes I just made make your earlier gist work as it should have

dnolen17:10:52

will be cutting another alpha shortly

gardnervickers17:10:27

Hey all, I am using alpha2 with the om.next quick-start. When I get to the first “Naive Design”, where the reconciler is being introduced, I get “Cannot read property ‘render’ of undefined”. I am copying and pasting the code into my namespace right from the github article. Anyone have any ideas? Did anything change recently to invalidate the quick-start?

monjohn17:10:06

I just ran into this. I didn’t do a ‘lein clean’ after updating. @gardnervickers

monjohn17:10:33

@gardnervickers: Now I am getting the same thing you are: render of undefined

gardnervickers17:10:52

Yea I’m kinda banging my head on the wall here

gardnervickers17:10:20

It was working for me back in 0.9.0-SNAPSHOT, but now when I go to switch back it breaks again 😕

monjohn18:10:23

@dnolen: Is there a reason why js/ReactDOM is not present when trying to do the Naive Design of the quickstart with alpha2?

dnolen18:10:54

@monjohn: are you following the tutorial exactly

dnolen18:10:02

do not do any steps not covered in the tutorial

dnolen18:10:07

no custom project.clj or anything else

dnolen18:10:52

and just released Om 1.0.0-alpha3, thanks to @thomasdeutsch for pointing out some query bugs

dnolen18:10:12

@gardnervickers: these problems all sound like dirty build issues

dnolen18:10:19

or trying to use devcards or some other thing

dnolen18:10:02

before a deploy I run through a few tutorials, do all the tests, and run against a much less trivial example I haven't yet published that works with Datomic

monjohn18:10:39

@dnolen: I just started over, building each folder and file, and ran into the same thing. Pasting the code from the Naive Design section results in the error.

zane18:10:03

Re: No queries exist for component path What's the right way to handle heterogeneous lists of things? Since om/IQuery is static there's no way to conditionally query for different things based on the results of om/props.

dnolen18:10:00

you have to know the query before the application loads - nothing else is going to work for starting up

zane18:10:14

Right. That makes sense to me.

dnolen18:10:15

after the load though you may want dynamic queries and that will work

dnolen18:10:14

this is what set-params! and set-query! is for. There’s another thing called subquery which you should use if you know an important query is going to change

dnolen18:10:25

it lets you pick between the static query and the dynamic query

dnolen18:10:37

depending on whether the component is or isn’t mounted

zane18:10:58

Ah, I think I see.

dnolen18:10:00

you can use refs to say get the query from some component

dnolen18:10:15

I would check out the docstring and let me know if it’s not clear

dnolen18:10:59

@monjohn yeah doesn’t seem like it. Run lein deps :tree

dnolen18:10:33

you should see cljsjs.react 0.14.0, cljsjs.react-dom 0.14.0 and om 1.0.0-alpha3 in your list of deps

monjohn18:10:31

I haven’t updated to alpha3, but otherwise yes.

monjohn18:10:51

@dnolen: Update to alpha3 and it works. Don’t know if that was it or not.

dnolen19:10:24

@monjohn: might have been, the parts are moving fast right now so I would stick to the latest simple_smile

gardnervickers19:10:26

Thanks guys, working for me after update too simple_smile

noonian22:10:23

I had the js/ReactDOM missing error with alpha3, I think its just how cljsjs packages work where they won't be included in your build if they aren't required. You can fix it by requiring cljsjs.react.dom in one of your required files for now.

dnolen22:10:23

@noonian: that’s not the case. om.dom pulls in both cljsjs.react & cljsjs.react.dom. If it’s not working for you there's something wrong with the environment you have setup.

noonian22:10:34

@dnolen: That makes sense. I'm not requiring om.dom (using sablono), but I am requiring om.next which uses js/ReactDOM but doesn't require cljsjs.react.dom.

dnolen22:10:28

@noonian ah, k - I don’t use sablono but that’s worth fixing for that case.

dnolen22:10:41

@noonian I thought you were referring to the tutorials

noonian22:10:39

@dnolen: nope just some stuff I'm playing around with. The tutorials look really good.

dnolen22:10:59

@noonian: thanks, and thanks for the feedback about the DOM issues

noonian22:10:42

@dnolen: you're welcome and thanks for all your work on Om and cljs

dnolen22:10:13

fixed, om.next now pulls in om.dom

mario22:10:52

Just a heads up, I noticed sablono and Om need different React versions in project.clj. Not sure if that actually poses a problem, but you are probably safer not using it for now.