fulcro 2019-03-28 | Slack Archive

magra09:03:35

Hi, I could use some guidance, please. I am trying to implement the link query as in the developers guide chapter 5.8. If I use it on root like so [ {:current-user (prim/get-query Person)} ] it works like a charme. If I use it on a component inside nested routers like so [ {[:current-user '_] (prim/get-query Person)} ] it works in the ui but the query gets sent to the server, which doesn't like this. Where/how is the idiomatic way to handle this?

claudiu09:03:45

Haven't tried it on link props but should work the without option in loads http://book.fulcrologic.com/#LoadOptions

claudiu09:03:33

Also this for more complex scenarious http://book.fulcrologic.com/#_morphing_mutations

magra09:03:02

@U3LP7DWPR Thanks! I will try that!

magra10:03:14

@U3LP7DWPR without worked like a charm! Thanks!

claudiu10:03:03

@U15BH4U4V You're welcome 🙂

fatihict13:03:54

You can also use the :ui/ prefix which prevents the query from being sent to the server instead of using without in a load

tony.kay14:03:39

You can also use a new option when you build the client that lets you transform queries before they’re sent…and include a standard elision set. See make-fulcro-client docstring:

tony.kay14:03:40

:query-transform-default (optional) A (fn [query] query) that is used as the default :update-query for data-detch/load parameters. This can be used to customize things like preventing certain keywords from ever appearing in the remote version of a component’s query. See fulcro.client.elide-query-nodes for an idea of a common helper.

neupsh15:03:27

hello, when using a :css [] in a component, do i have access to the value? Can i have css that changes depending on the value of the component?

tony.kay23:03:57

nope…way too much rendering overhead. CSS can only be based on global values

👍 4

neupsh15:03:25

or do i have to define different css classes to begin with and use appropriate class name for the dom element ?

neupsh15:03:08

I was trying to do something like this (seems like the values are not accessible there)

neupsh15:03:08

(defsc Person [this                                         ;; this
               {:keys [person/name person/age]}             ;; props
               {:keys [onDelete]}                           ;; computed (for callbacks)
               {:keys [person] :as css-name-map}]
  {:initial-state (fn [{:keys [name age] :as params}] {:person/name name :person/age age})
   :ident (fn [] [::id :person/name])
   :query [:person/name :person/age]
  :css [[:.person (merge {
                          :background-color "lightgrey"
                          }

                    (if (> 50 age) {:border-bottom "none"}))]]}
  (dom/li
    (dom/div  #js {:className person}
      (dom/h5 (str name " (age: " age ") ")
        (dom/button {:onClick #(onDelete name)} "X")))))

neupsh15:03:06

I was wondering what is the best way to achieve this dynamic css based on the value of the component

claudiu19:03:47

Personally going with having multipe classes and just selecting them on the component {:classnames []} based on props. Works well with the ideea of caching them so you don't pay the perf penalty when props change. For simple stuff I sometimes just add {:style {:color color}} directly on the element.

neupsh19:03:15

yes, i ended up with doing the same, where i define multiple classes and then use the appropriate class based on the value

claudiu19:03:30

On that topic, case u missed it , some nice ideas here https://medium.com/@wilkerlucio/a-guide-to-organizing-styles-on-fulcro-apps-b280d2dfee6b

👍 4

neupsh19:03:45

This may be a foolish question coming from a novice so please take it easy 🙂 When working with fulcro, how do you create components for composed objects that are not created as fulcro components? For example, if there was a library that creates a "Grid" Record object which has a collection of "Cells" record objects. And say there is some factory function in the library which when called can create a pre-initialized "Grid" object, how do i use them in a fulcro app? Do I still defsc a Cell component and another Grid component or just a Grid component and use the grid record as value without a cell component at all?

neupsh19:03:21

I want to keep "behaviors" for these object along with them, so i feel like it makes sense to create two components Cell and Grid, but I am lost on how do I work with the data in these components

claudiu20:03:48

by not fulcro do you mean js/npm libraries ?

neupsh20:03:19

clojure(script) library which creates a Record with defrecord

claudiu20:03:22

Guess it depends on u're use-case and stuff. Not really sure I understand what you're trying to do. If you just use it at the beginning you could just put the data that it generates in the fulcro state when the app starts client-did-mount with a transaction.

tony.kay23:03:24

The book covers integrating with normal js libs…did you read that?

tony.kay23:03:32

http://book.fulcrologic.com

neupsh01:03:19

Yes i am reading it 🙂 Thank you so much for the detailed book. I am actually confused on how to properly used clojurescript datastructures in my app. Lets say I already have a clojure(script) namespace which creates a Grid record that has a list of another records Cell. Now to visualize it in the UI i think i will be creating Cell component and a Grid component as well. Is it correct way of doing things? I will probably have something tomorrow or over weekend to work on an example. Having hard time to find time working on clojure/script since this is not used at my workplace at all 😛

hmaurer14:03:59

@U3MRWH35M Yep this is fine. I would use defsc for every component; the question is more whether those components should have an ident or not

hmaurer14:03:24

That’s hard to answer without the full context of what you are trying to do though

2019-03-28

Channels