Recommended approach to integrating Ash with the React Query Builder

lardcanoe

I’m adding a visual query builder, and https://react-querybuilder.js.org/ seems like the most robust one.

It will be used with Ash resources, some of which will have embedded schemas.

I’m looking for a gut reaction, or recommendation, on the best way to hook these up.

First is mapping Ash resources to its field format, which is like:

const fields: Field[] = [
  { name: 'name', label: 'Name', datatype: 'text' },
  { name: 'birthday', label: 'Birthday', datatype: 'date', inputType: 'date' },
  { name: 'guitars', label: 'Guitars', datatype: 'number', inputType: 'number' },
  {
    name: 'favoriteMovie',
    label: 'Favorite Movie',
    datatype: 'text',
    operators: [{ name: '=', label: 'is' }],
  },
];

Second, is taking its output, and mapping that to an Ash Query filter. There are numerous export options, see Export | React Query Builder, and I couldn’t tell which would be the best starting point.

Thank you!

8 comments

/ash #react

0 842 8

2024-01-08 17:20:24 UTC

Showing Posts 1 to 8

Show Best Posts
Show All (oldest first)
Show All (newest first)

zachdaniel

Creator of Ash

Ash actually accepts a map syntax for its filters you’d pass a map into Ash.Filter.parse_input.

A small note about it in the docs: Ash.Filter — ash v3.29.3

Edit: I assume you aren’t using liveview?

Post #1

lardcanoe

k, I had stumbled on Ash.Query.html#filter_input/2 Ash.Query — ash v3.29.3 so I can munge it to conform to that.

I am using Liveview. I just didn’t want to spend a day or two making a simplistic version of the react query builder. Or were you going somewhere else with that? If I manage to get this PoC to beta, maybe I would rip out the react tools with custom liveview ones.

To construct the fields for the builder, something like MyApp.MyResource.spark_dsl_config[[:attributes]] seems like my best starting point. Agree?

Post #2

zachdaniel

Creator of Ash

So, we have the data structure for backing a filter form, but not the UI, meant to be used with live view. It can be a bit complicated to wield, but once you get it working it’s quite useful. Check out Ash.FilterForm. Maybe someone from the community can provide an example implementation/tips. I know @frankdugan3 has used it, among others. Would like to work up an example and better docs, haven’t had the chance.

Post #3

dblack

Here’s an example implementation of Filter form

https://github.com/totaltrash/filter_form_example

Post #4

zachdaniel

Creator of Ash

Oh, right, how could I have forgotten! That’s a great example thanks @dblack

Post #5

jakeboone02

Maintainer of React Query Builder here. I’m not familiar with this framework but this post came up in my Google alerts. If there’s anything I can do or questions I can answer about RQB, let me know!

Post #6

lardcanoe

FilterForm is pretty cool. Thanks for pointing that out!

The one shipped in ash_phoenix seems to be missing relationships. A demo you posted in Zach Daniel posted on LinkedIn shows relationships being used. Any thoughts on how that was accomplished?

The users of this feature are used to writing their own SQL, so I’m tempted to just let them write some JSON which gets converted to a Map that is compatible with Ash.Query.filter and just move one with life and build the UI later. This was one of those “if it is quick to implement, do it, otherwise move on” features.

Ash.Query.filter(resource, [or: [
  [first_name: "Zar"],
  [last_name: "Doz"],
  [or: [
    [high_score: [greater_than: 10]]],
    [high_score: [less_than: -10]]
  ]
]])

That being said, can user text input, like first_name == "Zar" and last_name in ["Doz", "Daz"] and high_score > 10 be passed to any of the Ash filter or expr functions, or is that bonkers?

Thank you to everyone!

Post #7

zachdaniel

Creator of Ash

Unfortunately no, there is no text based filter parser, although writing one that ships with ash core is doable. But not going to happen any time soon