Fork me on GitHub
#fulcro
<
2018-05-09
>
thosmos03:05:27

@wilkerlucio just updated my deps to fulcro 2.5.3 and fulcro-inspect 2.1.0 and I'm getting a strange error when my project loads:

transactions.js:518 Uncaught SyntaxError: missing ) after argument list
core.cljs?rel=1525822233065:396 Installing Fulcro Inspect {}
inspector.cljs?rel=1525822229305:40 Uncaught TypeError: Cannot read property 'TransactionList' of undefined
    at Function.fulcro$client$primitives$IQuery$query$arity$1 (inspector.cljs?rel=1525822229305:40)
    at fulcro$client$primitives$query (primitives.cljc?rel=1525821998357:40)
    at fulcro$client$primitives$get_static_query (primitives.cljc?rel=1525821998357:827)
    at primitives.cljc?rel=1525821998357:987
    at fulcro$client$primitives$get_query_by_id (primitives.cljc?rel=1525821998357:987)
    at Function.fulcro.client.primitives.get_query.cljs$core$IFn$_invoke$arity$2 (primitives.cljc?rel=1525821998357:1023)
    at fulcro$client$primitives$get_query (primitives.cljc?rel=1525821998357:1005)
    at Function.fulcro.client.primitives.get_query.cljs$core$IFn$_invoke$arity$1 (primitives.cljc?rel=1525821998357:1009)
    at fulcro$client$primitives$get_query (primitives.cljc?rel=1525821998357:1005)
    at Function.fulcro$client$primitives$IQuery$query$arity$1 (multi_inspector.cljs?rel=1525822229569:36)

wilkerlucio03:05:29

@thosmos strange, did you tried bursting cache and compiling again?

thosmos03:05:13

browser cache?

wilkerlucio03:05:37

no, the cached js output files

wilkerlucio03:05:58

are you using figwheel or shadow?

wilkerlucio03:05:15

so, probably on resources/js/...

thosmos03:05:22

i thought I did, but trying again

wilkerlucio03:05:39

and if you using Cursive, remember to refresh the lein project

thosmos03:05:32

yes, using Cursive

wilkerlucio03:05:41

I'm asking because I'm right now running a project with those same deps, but I can't reproduce the problem, so a cache issue or classpath issue are the most common problems there

thosmos03:05:57

problem's gone. I guess I didn't "lein clean". sigh. sorry to trouble you.

thosmos03:05:20

do you use shadow-cljs?

wilkerlucio04:05:08

@thosmos no problem 🙂, I'm using shadow on new projects, but still using figwheel on old ones

juri14:05:13

Hi! I have a noob question. I’m learning fulcro. And in my first project i got the Root component, and then an ItemList, Item and FilterMenu component as well. The idea is that there’ll be lots of Items, and setting the filters in the FilterMenu should start a new query for items matching the filters. Right now I’m doing this by means of: (df/load this :filtered-items Item {:target [:item-list/by-id :items :item-list/items] :params props}) I call this from the FilterMenu. So the “props” are simply the filters. However, this seems wrong. FilterMenu shouldn’t know about Item or ItemList. How can I do this better? I haven’t been able to grasp it yet, but would linked queries and/or shared state be something I should look into more for this? *BTW, is this a good place for these kinds of questions? I might have a few more…

juri14:05:13

(linked queries sounds like something that could make the ItemList load stuff on its own when the filters are updated)

tony.kay15:05:41

@juri If you’re trying to be a purist about coupling: pass it a function that does the load..write the function in the context of Item and List…there ya go: no direct coupling.

tony.kay15:05:03

through computed props

tony.kay15:05:30

FilterMenu would just have something like onFilterChange

juri15:05:14

Ah yes, that should work. Thanks!

OliverM18:05:46

I'm having problems with parameterised routing. I'm trying to follow Ch. 13 of the book. I can't get the following minimal example to work:

(defsc Profile [this {:keys [db/id router/page profile]}]
  {:query [:db/id :router/page :profile]
   :ident (fn [] [page id])
   :initial-state {:db/id 3 :router/page :PAGE/profile :profile "None"}}
  (dom/div nil (str "Profile: " profile)))

(defrouter TreeRouter :root/tree-router
  (fn [this props] [(:router/page props) :top])
  :PAGE/profile Profile)

(def ui-tree-router (prim/factory TreeRouter))

(def routing-tree
  (r/routing-tree
    (r/make-route :profile [(r/router-instruction :root/tree-router
                              [:profile :param/profile])])))

(defsc TreeRouterRoot [this {:keys [ui/react-key router]}]
  {:initial-state (fn [p] (merge
                            routing-tree
                            {:router (prim/get-initial-state TreeRouter {})}))
   :query [:ui/react-key {:router (prim/get-query TreeRouter)}]}
  (dom/div #js {:key react-key}
    (dom/a #js {:onClick
                #(prim/transact! this
                   `[(r/route-to {:handler :profile :route-params {:profile 1}})])}
      "Profile 1")
    " "
    (dom/a #js {:onClick
                #(prim/transact! this
                   `[(r/route-to {:handler :profile :route-params {:profile 2}})])}
      "Profile 2")
    (ui-tree-router router)))

OliverM18:05:54

It renders as expected but when I try to switch between profiles, the DB does update to show the route has changed but it crashes on rendering with the error

Uncaught Error: adaptdb.ui.components/TreeRouter-Union.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

OliverM18:05:27

Does anyone know what I'm missing, or are there other examples of parameterised routing in the wild I can look at?