This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-02-21
Channels
- # admin-announcements (3)
- # beginners (15)
- # boot (96)
- # cider (5)
- # cljsjs (2)
- # cljsrn (3)
- # clojure (22)
- # clojure-austin (2)
- # clojure-russia (16)
- # clojured (2)
- # clojurescript (65)
- # css (4)
- # cursive (89)
- # datomic (7)
- # emacs (89)
- # events (1)
- # hoplon (126)
- # leiningen (2)
- # off-topic (2)
- # om (268)
- # onyx (19)
- # parinfer (42)
- # re-frame (5)
- # reagent (30)
- # yada (8)
How are people using normalization with singletons? Is the best thing just to have a top-level db like {:singleton {nil {...}}}
i.e. make the "id" of the ident nil?
@drcode: if it's a singleton, do you need to normalize it at all?
I would like to get the value attribute of a sibling component in a click handler. I know I can use document.getElementById but I was wondering if theres a better way. I tried using a "ref" attribute but I couldnt find the dom node with a given ref string.
@anmonteiro: Interesting question... it's a piece of atomic data that is needed by several UI components and needs to be fetched from the remote as needed... Should I be using the usual normalization mechanism?
@drcode: with only the information provided, I would opt to use links
have you gone through the Links tutorial?
Yes, I agree links would work, I just can't wrap my head around the appropriate way to do remote fetching when links are involved...
in which part?
remember you always have the AST stuff to help you rewrite stuff
@anmonteiro: If I understand what you're suggesting, it is:
1. Child component has link [:singleton _]
in query
2. Parent "read" function says "Oh, one of my children is asking for top level item :singleton
through a link, but I don't have it in the client yet"
3. Parent "read" function generates a remote that includes the top-level :singleton
(My understanding is the parent needs to handle this, because if the child asks, the data returned from the remote will be pathed and not in the top level)
4. Remote sends top level :singleton
to client
@seanirby: I guess what I would do is find the shared parent between the two components, and try to get the value into that parent's state (via a callback sent to the children via om/computed
)
@drcode: partly right, with the exception that you have control in all phases of the process
e.g. you can always override how things get merged when they get back from the remote
@anmonteiro: Yes, I've tried to avoid doing that so far, but I agree that would be an easy way to solve this problem...
there's another alternative
:singleton
is a top-level key in the parent
referred to by [:singleton _]
in the children
you can just elide all the link stuff on children queries when sending them to the server
(or ignore them at the server — probably not the best solution)
because the parent is sending :singleton
anyway in the top-level query
@anmonteiro: OK thanks, lots of great suggestions! I will have to think about which route to take.
@seanirby: refs are only accessible from the component that owns the components with ref
s
anmonteiro: right, I can get the ref string by looking at the refs property of the parent, but I need the component not the ref string
@anmonteiro: One last followup question: What is the benefit of using a link [:singleton _]
instead of simply writing a read
function for :singleton
that simply pulls the value out of the top level of the state? Is it that om/db->tree
can automatically resolve links, saving some parsing work, or is there a deeper reason for using links?
does anyone have any experience with using a database other than Datomic for om projects?
I see that there is one person in this thread, try to build a datomic pull api for sql database
nxqd: yeah I want to use datomic, but I'm a bit inexperienced with server-side programming so I'd like to learn a technology thats a little more widely used if possible (SQL)
hmm, if you want to use sql for now, I'm pretty sure that you would do a lot more things to get it done
maybe i'll just stick with datomic for now and hope someone builds a SQL interface in the meantime
and the problem of backend regarding sql or query api -> sql or datomic is not its concern 😛
in the backend you need datomic or another engine that parse the query expr to sql is none of om next concern.
in the om-next remotes tutorial, the reconciler is passed [:remote :search]
for the :remotes
keyword. I get why :search
is there, but why :remote
?
@seanirby: :remotes
is nothing more than a vector of keywords representing remote services.
In this case only the :search
-remote gets used in the app. You can leave the :remote
-remote out of the equation.
I have an uncontrolled <input>
(ie no :value
specified), and if I do a set-query!
in onChange
it swollows the first character entered in the input. Then it works. If I remove the set-query!
it works fine. Any ideas what goes wrong? (Currently working around by using a controlled input with get/set-state!
)
@marianoguerra: so it looks like its used to introduce the namespace into the key - thanks
@anmonteiro: You mentioned a links tutorial above - can I ask for the link? (Not sure I have seen it yet)
@seanirby: Can't reproduce it now in a minimal setting. I'll try to invesitgate it later. Gotta go now.
@jamesmintram: this one ? https://github.com/omcljs/om/wiki/Thinking-With-Links%21
@iwankaramazow: thanks!
A query: [{:a [:b {:c [:c/prop1 :c/prop2]} {:d [:stuff :other-stuff]}]
Can I do something like
(defmethod read :a
[{:keys [parser query ast] :as env} key params]
{:value (parser env query)})
to properly parse :b :c :d
? (note :c might be a remote and the other two might not be remote ...)
Or do I have to solve this with custom functions ?@iwankaramazow: Did you try it?
Hi, haven’t tried om-next for a couple of months and looks like I forgot everything Can anybody give me an example of remote fetch with ident? I’m using ident and I have data partially available and would like to fetch data from the server in case it’s missing some props in the local state. Problem is that I cannot get ident identifier in send function. Does anyone have an example?
@jannis: it doesn't work, it seems to only fetch to non-remote keys. No idea why and how 🙈
return {:value (parser env query true) }
returns nothing...
@iwankaramazow: You need to recursively return remote to the toplevel
Tony's tutorial has an example of that
Ah ok, thanks for the guidance!
https://github.com/awkay/om-tutorial/blob/master/src/main/om_tutorial/parsing.cljs#L191
So I have been looking at the om next join tutorial by @anmonteiro - and had a question about this sample: https://gist.github.com/jamesmintram/a0c6f9750de986a6f224#file-gistfile1-txt-L31 — If I wanted to add a Root node, which rould render the Item list - what would the Root node’s query look like? I have been trying to do something similar myself, I tried something like:
(defui Root
static om/IQuery
(query [this] [(om/get-query ItemList)]))
and passing (om/props this) as the parameter to ItemList - but I get an error.@jamesmintram: you cant steal queries from components
You need to put the query under its own key, e.g. [{:root (om/get-query ItemList)}]
Just wanted to throw my weekend experiment into producing a relational db remote suitable for om.next
Barely works but might be inspriation for someone.
I'd love to hear that someone has a library for something like ethis.
OK - so I tried that - but that had knock on effects with needing my data to reflect that too. So I would then need {:root {:Items {…..
I guess the better question to ask is, how would the State data look in that sample to support what I am asking?
Yes, the app state needs to match the new shape of the queries
So how would I share the items between multiple subtrees? (Using Links I would guess) - but I am not sure how this would look in a concrete example.
Links only work for top level stuff
You'd want idents in this case
OK thanks! I will go away and bang my head against the wall some more to see if I can finally grok this!
Tony's tutorial says: process-roots only handles joins as new roots. It will not follow the branches of a union nor can it re-root a plain property.
Is there any way to re-root a query including a plain-property?
Hello, everyone! I'm new to om.next, I have a few questions with integration with datascript. If I use datascript as the state storage, how can I merge the response from remote query? writing my customized callback function for send
?
@doglooksgood: yes, override :merge
in the reconciler
om/merge!
@doglooksgood: You should know, there are parts that don't integrate well at the moment. Like set-query and query params.
Which one is better, using om to control remote request, or trying to synchronize the datascript and datomic?
@thiagofm: isn't this a reference to the component?
or you refer to the class
maybe (om.next/react-type some-component) ?
@thiagofm: (type this)
@anmonteiro: thanks!
or om/react-type
that should work too
(type this)
might not work in advanced compilation, I believe
What I wanted to do is: I have a tabbing component, so I save what is the active tab and then render it. I wanted to do it in a nice way, by just saving the factory of the component and passing it forward to be rendered if it's the active
I think it works. om/react-type still works in advanced compilation @anmonteiro ?
Also, is there a way to get the corresponding factory of a component? Or just the factory directly?
@thiagofm: haven't tried in advanced so I can't say for sure
no way to get the factory of a component, that's just a user concern
@thiagofm: if you just want to get the child component, you might want to try react ref
I think I've got what I wanted. The problem now I'm having is more related to my lack of knowledge about clojure 😞
Lets say I have (def tab 'Tab), how do I call (om/factory Tab)? I've tried (om/factory ~tab) but there's something wrong I'm doing
@thiagofm: not sure why you'd need to do that, in any case you need to syntax-quote before unquoting
`(om/factory ~tab)
@anmonteiro: http://pastie.org/10731361 example of code that doesn't work
because a factory is not a react element
(`(om/factory ~active-tab-component) (om/props this)) still gives me TypeError: cljs.core.sequence.call(...).call is not a function
Can anybody give an example of remote fetch where part of the data already available? I’m getting data from the cache and would like to make remote fetch if props are missing in the state. Couldn’t figure it out
I haven’t used it but I think you’d do something like fetch-if-missing
for your leafs, and then recurse-remote
for your branches
@hueyp: Oh, thank you! I’ll have a look
https://awkay.github.io/om-tutorial/#!/om_tutorial.G_Remote_Fetch they are shown here
Hm, the thing that I don’t understand - send function has only query itself. What if I’m using ident like :customer/by-id 22 {:name John} and would like to fetch missing picture. How can I pass this 22 to the send function?
or more general - getting customer by id for example
I ran into trouble having them in components, the indexer was unhappy, but I think that might be changed on master
so - in my read function I should modify query and add needed info there before it’ll be passed to the send function?
yeah, probably I’m doing something wrong. Talking about your example [:customer/by-id 22]
. If I have such query in my component, will 22 be accessible in send function?
the send function just gets the query … that said, when you parse the query, the :key
for the expression [:customer/by-id 22]
is [:customer/by-id 22]
while the :dispatch-key
is :customer/by-id
having that in a component though I couldn’t get to work, but again, I think it might be different on master now
but didn’t work in that it disjointed the componets, the indexer couldn’t connect query to component (sorry for lingo)
Got it, most probably I’ve done something wrong cause in my send I have object like {:remote [:customer/name :customer/second-name]}
without any keys. I guess I should re-read the tutorial
yah, I dunno 😜 you have total control over the AST / merge so you can always make whatever you need to work for you
yeah, thanks! BTW - quick question: I’ve seen people using :some-prefix/prop-name
as a keys for the state. Is it just a convention? Can I use simple :prop-name
?
nice, thanks again. Any suggestion or maybe community already figured out the right way of creating router with om-next?
I don’t think there is the one true way, but there are a few different projects on github
ack, thx
Probably off-topic. I'm using ring on the backend of an om.next app and getting Problem accessing /api. Reason java.lang.AbstractMethodError
for POSTs (where /api is my remote endpoint) GETs are working fine. Anyone encountered this type of error when working with remotes?
I'm println'ing the heck out of my code and feeling dirty doing it
What's a bit maddening is that the mutate that's expected to happen is happening: the correct data is getting persisted to the database. So it seems to be something happening after the mutate completes.
@thiagofm: this is what om/computed
is for
@anmonteiro: the example in the docs for it is pretty poor, can you give a small example given that I need to also pass (om/props this)?
(om/computed (om/props this) {:a 1})
(some-widget (om/computed props {:delete (fn [e] ...) :update (fn [e] ...)})) it's a bit unclear that props is (om/props this), at least for me 😞
the description does make it clear.
@anmonteiro: in that case you don't pass anything to tab-comp
, do you? It's just available in this
via om/get-computed
@grzm: computed returns the props + any computed information you add
Okay, so computed props passes down the props separated from the params/props I've provided
I keep receiveing Error: No queries exist for component path (haxlife.components.window/Window haxlife.components.window/GameWindow haxlife.components.tab/Tab haxlife.components.tab/SkilltreeTabLink) everytime I do om/transact. The component has a query and everythimg, but still doesn't work
thiagofm: does the query in the component get composed all the way down to the root? (it's included in root query?)
I only get this message when I pass props down the stack using computed (or just passing down the props also give me errors)
I had the same error when I was skipping a middle component. Say I had "root -> parent -> child", Root was including child query directly, so the initial render was correct. On re-render, since the parent query wasn't part of the root query, I got the error you're getting.
I've specified a query, for example :foo, and the same query :foo is used by another component
I'm not sure what you mean: all of the queries in each component (and not call components need them) should be included in the root query
Okay. An example: Let's call root component Page. In Page I have (first (om/get-query Content/Title)) and (first (om/get-query Content/Text)) In Content/Title I query the [:title] In Content/Text, for some funny reason, I have [:title]
It looks like a bug to me, because it makes sense to perhaps query the same thing in different places, as long as you specify that in the root component you should have it working
It's just a made up example of how I think I can reproduce that. But here: static om/IQuery (query [this] (first (om/get-query Content/Title)) (first (om/get-query Content/Text)))
if both components query the same stuff, and one is children of the other, you get this error
Shouldn't that look like [{:title
(om/get-query Content/Title) :text (om/get-query Content/Text)}]` or something?
I'll make a better writing over that problem, better than wasting your time, I've found a workaround for it
s/hash/map but yeah, sorry. Things have been working without using a map though, so I didn't have this problem yet
you can do stuff like first, into, etc and create valid queries, but I don’t think it ultimately works with the indexer — it needs certain meta-data on the query
so you can end up with things working but as soon as you transact from a component it is unable to find a query path between the root and the component
I see 😞 I've been using that way because it was the first workable solution I could get, great to know that
you can definitely use into
and the sorts
meta-data is only attached when binding the query and the params
what you can't do is steal queries from child components
which is clearly the case
right, but that's not valid composition anyway
thats kind of what I mean when I don’t know how to compose without it being a join (map)
the DashboardItem query in the unions tutorial uses functions:
(query [this]
(zipmap
[:dashboard/post :dashboard/photo :dashboard/graphic]
(map #(conj % :favorites)
[(om/get-query Post)
(om/get-query Photo)
(om/get-query Graphic)])))
into also maintains metadata though
right
query composition has nothing to do with the default database
I also could do a complex query in datascript, name it :complex-query and then on (query [this] [:complex-query]). This is why I think I won't have this problem
@thiagofm: As a start I'd try to get a few Om Next components with queries and a simple parser against a map or atom app state to work, and add DataScript in a separate step.
AFAIK there is no project yet that translates Om Next queries to DataScript queries yet, so your :complex-query
idea would be a reasonable start. Once that works, it should be fairly straight-forward to generate DataScript queries automatically, with special conversion rules for idents and global links.
Can someone explain what this line in the om-next-demo does? It looks like it's just calling an event. https://github.com/swannodette/om-next-demo/blob/master/todomvc/src/cljs/todomvc/core.cljs#L69
@grzm: returns the event
it's not meant to work, it's incomplete
I'm trying to build two of the same component, but with different props, I get the "Encountered two children with the same key" error. How do I circunvent that?
That's a React error message I believe. You need to tell React how to construct keys.
So if your component instance has an :id
that is different to the other instances you should be right.
Okay, what do you mean by "if your component instance has an :id", how do I specify that?
(def tab-link-comp (om/factory TabLink {:keyfn :name})) like this? Given that I have a :name computed prop