Hi @UHDB725UG, I may be misunderstanding you but no, moving components around is a cinch

the (new) parent just needs to compose the child component’s query and :initial-state (which has a map notation shorthand)

since the client database is normalized, the rest will just work

is there a particular use-case you are worried about?

Sorry but I'm still a bit confused. Let's say I have the following component tree: Root -> A -> B -> C -> D I want to add component E which has the query [:foo] as a child of D. Doesn't this mean that I must now modify D, C, B, A, and Root to also query for [:foo]?

@UHDB725UG no, in the example you mentioned you would only change query of D

Hmm, I still don't quite get it. By modifying D aren't I also required to modify C? That's what the docs make it sound like here http://book.fulcrologic.com/#_feeding_the_data_tree "In this way an arbitrary component in the UI tree is not querying for its data directly in a side-band sort of way, but is instead being composed in from parent to parent all the way to the root." In my example if D does not already have the data for :foo from existing props then doesn't it need to be passed in from C and so on up to root?

no because components read queries from each other, so in the Root you will have {:link-to-a (fp/get-query A)}, on A you will have {:some/link-to-b (fp/get-query B)}... and that goes on, the deep children of A is unknown to the root, each component only knows about its direct children, so if something indirect changes the componet doesn't have to care about it, makes sense?

Ah that makes much more sense now. Thanks!

Does that mean that you don't always have props names with semantic meaning? For example if A is a "TodoList" naming its props "todos" won't make sense because its props will be more like "todos-and-foo-and-whatever-else-children-need".

yeah, I think it helps if you really separate the things out, on the things we are discussing there are 3 things to have separated: 1. component names, this is just the component name, and for our purposes here it always have an associated query as well 2. there are "value properties", labels that point to final values (like :todo/title) 3. there are "link properties", properties that actually point to other entities, this can be to-one or to-many, eg: :user/all-todos, :user/last-interacted-todo so usually the parent will use 3 to point to something, while the component itself will declare what it needs from that resource, and the chain keeps going until you finish representing your entire application.

another interesting thing to know, in Fulcro when you use fp/get-query, that's not the same as just getting the query value, fp/get-query vector will also have meta-data pointing to the original component (you can check it by running: (meta (fp/get-query SomeComponent))), this is important to know because Fulcro uses this information to normalise the data, so keep in mind that the full root query will have the whole page requirement, but also pointers that can tell what component asked for what part

just one thing to add, todos-and-foo-and-whatever-else-children-need you should not name props like that, that’s how you break encapsulation

for child component called TodoList, name it’s factory function ui-todo-list and it’s query key {:todo-list (prim/get-query TodoList)}

the parent does not need to worry about what subcomponents or top level links TodoList (or it’s children) need, parent is only concerned with delegating to it’s direct child

that’s the whole point of co-located queries, data requirements are specified only where the data gets used

Thanks for all the help and clarifications. Things make a lot more sense now. I just need to spend some more time playing with Fulcro to digest all the concepts from those epic docs haha.

yeah that book’s more of a reference manual than a tutorial 😅

Have not tested it, and have no opinion. You make the array of segments, and return things that can match them from the targets. D.R. is not considered a “compete product” and is certainly open to suggestions/improvements…that’s why it is incubator

Awesome. I’ve tried "" and it works as I suspected/wanted.

Is there a version of current-route that is compatible with SSR?

you’d have to test/write…I’ve not done any SSR verifications against incubator

the ns isn’t that big

ok

i’ve built my own from scratch in the past, it’s possible but a lot of work to make it polished and feature complete

workspaces is an open source fulcro app, which uses react-grid-layout for drag/drop/resizing

https://github.com/nubank/workspaces

you can checkout it’s source and see what’s involved, that’s probably the approach i’d take, if possible

also it’s a good example app of how to do fulcro the right way, it’s author @U066U8JQJ knows his stuff!

I'm new to Fulcro but I have a lot of experience with various React drag and drop libraries. If your use case is simple "react-beautiful-dnd" is probably your best bet. If you need more flexibility "react-dnd" is fantastic but significantly more complex.

DnD that works well across all desktop and mobile browsers is a pretty tricky problem especially if you want stuff like nested drop targets and auto-scrolling. React-dnd was the only library I found that could pull off everything I needed in a JS project.

thanks for the feedback y’all – really appreciate it. I think for ease of interop I’m going to take a crack at integrating react-beautiful-dnd which is on cljsjs and seems to have a more straightforward api

@U04V5HFPU FYI if you’re using shadow-cljs you don’t even need to bother with cljsjs

you can use javascript packages directly

if you use lein to generate the project base, it includes a readme with instructions for starting the server and client from the command line

both run nrepl servers (if the server doesn’t by default it can be configured, i know shadow-cljs does)

then you can have cider connect to those nrepl servers

the usual cider setup, which means you need to add the cider/piggieback middleware to your app

i use intelliJ now but used to use emacs with fulcro all the time

As someone new to Emacs, Spacemacs has enabled me to get started http://spacemacs.org

it wouldn’t be trivial, but certainly something that fulcro’s architecture makes palatable…

by default fulcro mutations are optimistic on the client

all remote interactions are reified, so you can serialize, store, and replay them

and they are guaranteed to happen sequentially

the websockets code even has an auto retry option (but then you’ll want to make sure your mutations are idempotent)

so all the necessary tools are there, but you’ll have to put them together yourself, does that answer your question?

Yep. Thank you very much!

Another quick question about this. What info about remote interactions can be stored? If you want to resolve things sometime in the future I think you need to capture user intentions (actions) not just data modifications. There may be conflicts when playing back actions when a user comes online and the semantics of each action/intention would be needed to properly resolve those.

@UHDB725UG sorry, just saw this now. So that part is left for you to solve, since it’s very application specific. You can have something like a multi-play video game where last edit wins and conflicts don’t matter or a collaborative google docs like editor where conflict resolution can get very complex.

or the middle case (I’m actually building something like that right now) where you update data only if it has not changed

could be a problem with follow on reads missing?

hot code refresh forces a re-render from root

whereas client mutations only re-render starting at the component where the mutation was invoked

The mutation I’m calling is using the parent component as the argument to prim/transact!. I was under the impression that the re-render would be triggered on the parent component (which would trigger part of it’s UI, the dom/select to show the correct option)

in that case yes, transacting on the parent should trigger a re-render on the child

i can’t think of anything else, must be something i’m not seeing, do you have a gist?