Clojurians Log v2
re-frame
So grateful for re-frame and all the resources around it. I'm writing my first SPA and having a blast.
2đź’Ş
Yes, exactly! And also yes, re-frame is amazing 🙂
đź‘Ť it is kind if you both to say, thanks
Any examples of the re-frame way to have a datatable like view of potentially large (more than you would want to cache locally) data coming from a server. The view would have options that would allow for sorting and searching which would happen on the server causing the page data in the browser to be refreshed. More interested in how to handle the fetching/paging into the re-frame app-db and how to orchestrate it all rather than the views themselves, though that would be good too. Thanks for any tips or pointers to examples!
I’ve implemented a pretty full-featured data table in my app. Unfortunately I can’t share the code but I can describe the basic principles.
I’ve broken it down into three pieces of data.
First I have what I call the “model”. It contains the URL of the endpoint that can fetch me a page of data and data about how to render each column. Next is the “view state”, which contains things the user can change: sort column and order, page size, current page index, etc. Finally, there’s the “content” that comes back from the endpoint, which contains the row data for the current page and a count of the total number of rows.
I put the model in a CLJC file and the other two in app DB. I made the decision to only have one data table per page so that my data is always at a known path, which simplifies all my event handlers.
For each data table in my app I create an endpoint that accepts the view state and returns a new content structure. I just POST the view state, but you could just as well serialize the state into a query parameter and do a GET.
I pass the model to the view component. It subscribes to the view state and content and renders accordingly.
When I first display a page containing a data table, I dispatch the event that posts to my endpoint and populates the content slot on successful return.
When the user interacts with the data table, e.g. clicking a header to change the sort order or clicking to view the next page, I dispatch an event to update the view state, then re-do the call to the endpoint to refresh the content.
That’s the essence of it. You can add stuff around that, e.g. showing a spinner while data is being loaded, adding filters to your view state, etc., but it’s all just expanding on those ideas.
Hope this helps.
1🙏@jkrasnay Thanks for the info. Will chew on that. We’re using graphql/aws appsync for the backend, but it sounds like the style you are describing should work similarly.
Would still love to see code on how others have approached this in re-frame
For some reason, GitHub says that the latest release is v0.10.7.
I’ve implemented a pretty full-featured data table in my app. Unfortunately I can’t share the code but I can describe the basic principles.
I’ve broken it down into three pieces of data.
First I have what I call the “model”. It contains the URL of the endpoint that can fetch me a page of data and data about how to render each column. Next is the “view state”, which contains things the user can change: sort column and order, page size, current page index, etc. Finally, there’s the “content” that comes back from the endpoint, which contains the row data for the current page and a count of the total number of rows.
I put the model in a CLJC file and the other two in app DB. I made the decision to only have one data table per page so that my data is always at a known path, which simplifies all my event handlers.
For each data table in my app I create an endpoint that accepts the view state and returns a new content structure. I just POST the view state, but you could just as well serialize the state into a query parameter and do a GET.
I pass the model to the view component. It subscribes to the view state and content and renders accordingly.
When I first display a page containing a data table, I dispatch the event that posts to my endpoint and populates the content slot on successful return.
When the user interacts with the data table, e.g. clicking a header to change the sort order or clicking to view the next page, I dispatch an event to update the view state, then re-do the call to the endpoint to refresh the content.
That’s the essence of it. You can add stuff around that, e.g. showing a spinner while data is being loaded, adding filters to your view state, etc., but it’s all just expanding on those ideas.
Hope this helps.
1🙏@jkrasnay Thanks for the info. Will chew on that. We’re using graphql/aws appsync for the backend, but it sounds like the style you are describing should work similarly.
Would still love to see code on how others have approached this in re-frame
@p-himik where in GitHub are you seeing this version? Perhaps in the README, via a clojars badge?
Thanks, i created an issue. We'll fix it.