How do I verify that the value of a rule is null

[Andy-lm]

Figure: The value of this rule is null and I do not want it to be submitted to the server. How to handle this situation

[jakeboone02]

There are a couple of things you can do to remove "invalid" rules.

formatQuery using a validator method

If you're using the formatQuery method to send a WHERE clause directly to the server, then you can add a validation function to remove invalid rules (or groups). Something like this:

import { formatQuery } from 'react-querybuilder';

const validator = (query) => {
  const result = {};

  const validateRule = (rule) => {
    if (!rule.value) {
      result[rule.id] = false;
    }
  };

  const validateGroup = (rg) => {
    const reasons = [];
    if (rg.rules.length === 0) {
      reasons.push("empty");
    }
    if (rg.id) {
      if (reasons.length) {
        result[rg.id] = { valid: false, reasons };
      } else {
        result[rg.id] = true;
      }
    }
    rg.rules.forEach((r) => {
      if ("rules" in r) {
        validateGroup(r);
      } else {
        validateRule(r);
      }
    });
  };

  validateGroup(query);

  return result;
};

const sql = formatQuery(query, { format: 'sql', validator });

This works for format: 'parameterized' as well.

That function will, for example, turn this:

const query = {
  id: 'root',
  combinator: 'and',
  rules: [
    { field: 'firstName', operator: '=', value: 'Steve' },
    { field: 'lastName', operator: '=', value: '' }
  ]
}

...into this:

(firstName = 'Steve')

The lastName rule is removed from the output because the value is an empty string.

Manually removing null values

If you aren't using formatQuery, then you'll need to process the query object manually. If all you want to do is remove null or empty rules, something like this should do the trick:

const processRule = (r) => (r.value ? r : null);

const processGroup = (rg) => ({
  ...rg,
  rules: rg.rules
    .map((r) => {
      if ("field" in r) {
        return processRule(r);
      }
      return processGroup(r);
    })
    .filter((r) => !!r)
    .filter((r) => ("rules" in r ? r.rules.length > 0 : true))
});

const result = processGroup(query);

I've implemented both processes in this codesandbox example. You can play around with the query builder and see what the output is at the bottom.

[Andy-lm]

Thank you very much. Recursion can solve this problem. I used your component React-QueryBuilder in our company's project.

[jakeboone02]

That's great to hear! Let me know if you need any more help.