Recommended approach to integrating Ash with the React Query Builder

Ash Forum Ash Questions / Help
,
1

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!

2

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

A small note about it in the docs: Ash.Filter — ash v2.17.21

Edit: I assume you aren’t using liveview?

3

k, I had stumbled on Ash.Query.html#filter_input/2 Ash.Query — ash v2.17.21 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?

4

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.

5

Here’s an example implementation of Filter form

1 Like
6

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

7

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!

6 Likes
8

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? :innocent:

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!

9

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 :joy: