Skip to main content
Version: Next

Recipes

Every snippet on this page was run against the current source and the output shown is exact. All snippets work on the server with @react-querybuilder/core (react-querybuilder re-exports the same functions). See Export and Import for full option references.

Shared setup​

The export recipes use this query and fields:

import type { Field, RuleGroupType } from '@react-querybuilder/core';

const fields: Field[] = [
  { name: 'firstName', label: 'First name' },
  { name: 'lastName', label: 'Last name' },
  { name: 'age', label: 'Age', inputType: 'number' },
  { name: 'isMusician', label: 'Is a musician', valueEditorType: 'checkbox' },
];

const query: RuleGroupType = {
  combinator: 'and',
  rules: [
    { field: 'firstName', operator: 'beginsWith', value: 'Stev' },
    { field: 'age', operator: 'between', value: [18, 65] },
    {
      combinator: 'or',
      rules: [
        { field: 'lastName', operator: 'in', value: ['Vai', 'Vaughan'] },
        { field: 'isMusician', operator: '=', value: true },
      ],
    },
  ],
};

Export (formatQuery)​

sql​

Inline values. Not for untrusted input; prefer parameterized. Add parseNumbers: true to emit unquoted numbers.

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'sql');
Output
(firstName like 'Stev%' and age between '18' and '65' and (lastName in ('Vai', 'Vaughan') or isMusician = TRUE))

parameterized​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'parameterized');
Output
{
  "sql": "(firstName like ? and age between ? and ? and (lastName in (?, ?) or isMusician = ?))",
  "params": ["Stev%", 18, 65, "Vai", "Vaughan", true]
}

parameterized_named​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'parameterized_named');
Output
{
  "sql": "(firstName like :firstName_1 and age between :age_1 and :age_2 and (lastName in (:lastName_1, :lastName_2) or isMusician = :isMusician_1))",
  "params": {
    "firstName_1": "Stev%",
    "age_1": 18,
    "age_2": 65,
    "lastName_1": "Vai",
    "lastName_2": "Vaughan",
    "isMusician_1": true
  }
}

mongodb_query​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'mongodb_query');
Output
{
  "$and": [
    { "firstName": { "$regex": "^Stev" } },
    { "age": { "$gte": 18, "$lte": 65 } },
    { "$or": [{ "lastName": { "$in": ["Vai", "Vaughan"] } }, { "isMusician": true }] }
  ]
}

mongodb​

Deprecated; use mongodb_query.

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'mongodb');
Output
{
  "$and": [
    { "firstName": { "$regex": "^Stev" } },
    { "age": { "$gte": 18, "$lte": 65 } },
    { "$or": [{ "lastName": { "$in": ["Vai", "Vaughan"] } }, { "isMusician": true }] }
  ]
}

elasticsearch​

Experimental.

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'elasticsearch');
Output
{
  "bool": {
    "must": [
      { "regexp": { "firstName": { "value": "Stev.*" } } },
      { "range": { "age": { "gte": 18, "lte": 65 } } },
      {
        "bool": {
          "should": [
            {
              "bool": {
                "should": [{ "term": { "lastName": "Vai" } }, { "term": { "lastName": "Vaughan" } }]
              }
            },
            { "term": { "isMusician": true } }
          ]
        }
      }
    ]
  }
}

jsonlogic​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'jsonlogic');
Output
{
  "and": [
    { "startsWith": [{ "var": "firstName" }, "Stev"] },
    { "<=": [18, { "var": "age" }, 65] },
    {
      "or": [
        { "in": [{ "var": "lastName" }, ["Vai", "Vaughan"]] },
        { "==": [{ "var": "isMusician" }, true] }
      ]
    }
  ]
}

cel​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'cel');
Output
firstName.startsWith("Stev") && (age >= 18 && age <= 65) && (lastName in ["Vai", "Vaughan"] || isMusician == true)

spel​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'spel');
Output
firstName matches '^Stev.*' and (age >= 18 and age <= 65) and ((lastName == 'Vai' or lastName == 'Vaughan') or isMusician == true)

jsonata​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, { format: 'jsonata', parseNumbers: true });
Output
$contains(firstName, /^Stev/) and (age >= 18 and age <= 65) and (lastName in ["Vai", "Vaughan"] or isMusician = true)

ldap​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'ldap');
Output
(&(firstName=Stev*)(&(age>=18)(age<=65))(|(|(lastName=Vai)(lastName=Vaughan))(isMusician=true)))

cypher​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'cypher');
Output
firstName STARTS WITH 'Stev' AND 18 <= age AND age <= 65 AND (lastName IN ['Vai', 'Vaughan'] OR isMusician = true)

gql​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'gql');
Output
firstName STARTS WITH 'Stev' AND 18 <= age AND age <= 65 AND (lastName IN ['Vai', 'Vaughan'] OR isMusician = true)

sparql​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'sparql');
Output
STRSTARTS(?firstName, "Stev") && ?age >= 18 && ?age <= 65 && (?lastName IN ("Vai", "Vaughan") || ?isMusician = "true"^^xsd:boolean)

gremlin​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'gremlin');
Output
.has('firstName', startingWith('Stev')).has('age', between(18, 65)).or(__.has('lastName', within('Vai', 'Vaughan')), __.has('isMusician', true))

natural_language​

Display only. Never parse it back.

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, { format: 'natural_language', fields });
Output
First name starts with 'Stev', and Age is between '18' and '65', and (Last name is one of the values ('Vai' or 'Vaughan'), or Is a musician is true) is true

prisma​

Pass as where. No valueSource: 'field' support.

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'prisma');
Output
{
  "AND": [
    { "firstName": { "startsWith": "Stev" } },
    { "age": { "gte": 18, "lte": 65 } },
    { "OR": [{ "lastName": { "in": ["Vai", "Vaughan"] } }, { "isMusician": true }] }
  ]
}

drizzle​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'drizzle');

Returns (columns, operators) => SQL | undefined. Pass as a relational query where, or call with (table, getOperators()) from drizzle-orm.

sequelize​

import { Op } from 'sequelize';
import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, { format: 'sequelize', context: { sequelizeOperators: Op } });

Returns a Sequelize where object (Op from sequelize).

tanstack_db​

import * as tanStackDbOperators from '@tanstack/db';
import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, { format: 'tanstack_db', context: { tanStackDbOperators } });

Returns refs => expression for .where() in a TanStack DB live query (tanStackDbOperators = @tanstack/db module or picked operators).

json​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'json');
Output
{
  "combinator": "and",
  "rules": [
    {
      "field": "firstName",
      "operator": "beginsWith",
      "value": "Stev"
    },
    {
      "field": "age",
      "operator": "between",
      "value": [18, 65]
    },
    {
      "combinator": "or",
      "rules": [
        {
          "field": "lastName",
          "operator": "in",
          "value": ["Vai", "Vaughan"]
        },
        {
          "field": "isMusician",
          "operator": "=",
          "value": true
        }
      ]
    }
  ]
}

json_without_ids​

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, 'json_without_ids');
Output
{
  "combinator": "and",
  "rules": [
    { "field": "firstName", "operator": "beginsWith", "value": "Stev" },
    { "field": "age", "operator": "between", "value": [18, 65] },
    {
      "combinator": "or",
      "rules": [
        { "field": "lastName", "operator": "in", "value": ["Vai", "Vaughan"] },
        { "field": "isMusician", "operator": "=", "value": true }
      ]
    }
  ]
}

diagnostics​

Annotated tree + flat diagnostics. Pass fields for field/type checks.

import { formatQuery } from '@react-querybuilder/core';

formatQuery(query, { format: 'diagnostics', fields });
Output
{
  "query": {
    "combinator": "and",
    "rules": [
      {
        "field": "firstName",
        "operator": "beginsWith",
        "value": "Stev",
        "valid": true,
        "path": [0],
        "level": 1
      },
      {
        "field": "age",
        "operator": "between",
        "value": [18, 65],
        "valid": true,
        "path": [1],
        "level": 1
      },
      {
        "combinator": "or",
        "rules": [
          {
            "field": "lastName",
            "operator": "in",
            "value": ["Vai", "Vaughan"],
            "valid": true,
            "path": [2, 0],
            "level": 2
          },
          {
            "field": "isMusician",
            "operator": "=",
            "value": true,
            "valid": true,
            "path": [2, 1],
            "level": 2
          }
        ],
        "valid": true,
        "path": [2],
        "level": 1
      }
    ],
    "valid": true,
    "path": [],
    "level": 0
  },
  "diagnostics": [],
  "stats": {
    "totalRules": 4,
    "totalGroups": 2,
    "validRules": 4,
    "invalidRules": 0,
    "validGroups": 2,
    "invalidGroups": 0
  },
  "fieldSummary": {
    "firstName": { "ruleCount": 1, "invalidCount": 0 },
    "age": { "ruleCount": 1, "invalidCount": 0 },
    "lastName": { "ruleCount": 1, "invalidCount": 0 },
    "isMusician": { "ruleCount": 1, "invalidCount": 0 }
  }
}

Import (parsers)​

Parsers return a RuleGroupType without ids. Most parsers return list values (in, between) as comma-separated strings unless you pass { listsAsArrays: true }. Pass { fields } to drop unknown fields, and { independentCombinators: true } for RuleGroupTypeIC. Use prepareRuleGroup before passing the result to a controlled <QueryBuilder query>.

parseSQL​

import { parseSQL } from '@react-querybuilder/core/parseSQL';

parseSQL(
  "SELECT * FROM t WHERE firstName LIKE 'Stev%' AND (lastName IN ('Vai', 'Vaughan') OR age BETWEEN 18 AND 65)"
);
Output
{
  "combinator": "and",
  "rules": [
    { "field": "firstName", "operator": "beginsWith", "value": "Stev" },
    {
      "combinator": "or",
      "rules": [
        { "field": "lastName", "operator": "in", "value": "Vai, Vaughan" },
        { "field": "age", "operator": "between", "value": "18, 65" }
      ]
    }
  ]
}

parseMongoDB​

import { parseMongoDB } from '@react-querybuilder/core/parseMongoDB';

parseMongoDB('{"$and":[{"firstName":{"$regex":"^Stev"}},{"age":{"$gte":18,"$lte":65}}]}');
Output
{
  "combinator": "and",
  "rules": [
    { "field": "firstName", "operator": "beginsWith", "value": "Stev" },
    { "field": "age", "operator": "between", "value": "18,65" }
  ]
}

parseJsonLogic​

import { parseJsonLogic } from '@react-querybuilder/core/parseJsonLogic';

parseJsonLogic(
  '{"and":[{"startsWith":[{"var":"firstName"},"Stev"]},{"<=":[18,{"var":"age"},65]}]}'
);
Output
{
  "combinator": "and",
  "rules": [
    { "field": "firstName", "operator": "beginsWith", "value": "Stev" },
    { "field": "age", "operator": "between", "value": "18,65" }
  ]
}

parseCEL​

import { parseCEL } from '@react-querybuilder/core/parseCEL';

parseCEL('firstName.startsWith("Stev") && (age >= 18 || isMusician == true)');
Output
{
  "combinator": "and",
  "rules": [
    { "field": "firstName", "operator": "beginsWith", "value": "Stev" },
    {
      "combinator": "or",
      "rules": [
        { "field": "age", "operator": ">=", "value": 18 },
        { "field": "isMusician", "operator": "=", "value": true }
      ]
    }
  ]
}

parseSpEL​

import { parseSpEL } from '@react-querybuilder/core/parseSpEL';

parseSpEL("lastName == 'Vai' and age >= 18");
Output
{
  "combinator": "and",
  "rules": [
    { "field": "lastName", "operator": "=", "value": "Vai" },
    { "field": "age", "operator": ">=", "value": 18 }
  ]
}

parseJSONata​

import { parseJSONata } from '@react-querybuilder/core/parseJSONata';

parseJSONata('$contains(firstName, "Stev") and age >= 18');
Output
{
  "combinator": "and",
  "rules": [
    { "field": "firstName", "operator": "contains", "value": "Stev" },
    { "field": "age", "operator": ">=", "value": 18 }
  ]
}

parseCypher​

Only WHERE conditions are kept; property access (p.age) stays in field.

import { parseCypher } from '@react-querybuilder/core/parseCypher';

parseCypher("MATCH (p:Person) WHERE p.firstName STARTS WITH 'Stev' AND p.age >= 18 RETURN p");
Output
{
  "combinator": "and",
  "rules": [
    { "field": "p.firstName", "operator": "beginsWith", "value": "Stev" },
    { "field": "p.age", "operator": ">=", "value": 18 }
  ]
}

parseGQL​

import { parseGQL } from '@react-querybuilder/core/parseCypher';

parseGQL("MATCH (p:Person) WHERE p.age >= 18 AND p.lastName IN ['Vai', 'Vaughan']");
Output
{
  "combinator": "and",
  "rules": [
    { "field": "p.age", "operator": ">=", "value": 18 },
    { "field": "p.lastName", "operator": "in", "value": ["Vai", "Vaughan"] }
  ]
}

parseGremlin​

import { parseGremlin } from '@react-querybuilder/core/parseGremlin';

parseGremlin("g.V().has('firstName', startingWith('Stev')).has('age', between(18, 65))");
Output
{
  "combinator": "and",
  "rules": [
    { "field": "firstName", "operator": "beginsWith", "value": "Stev" },
    { "field": "age", "operator": "between", "value": [18, 65] }
  ]
}

parseSPARQL​

Only FILTER conditions are kept; variables keep their ? prefix.

import { parseSPARQL } from '@react-querybuilder/core/parseSPARQL';

parseSPARQL(
  'SELECT ?p WHERE { ?p ex:age ?age . FILTER(STRSTARTS(?firstName, "Stev") && ?age >= 18) }'
);
Output
{
  "combinator": "and",
  "rules": [
    { "field": "?firstName", "operator": "beginsWith", "value": "Stev" },
    { "field": "?age", "operator": ">=", "value": 18 }
  ]
}

JSON Schema (getQueryJsonSchema)​

JSON Schema for queries matching fields, for LLM structured output/tool inputs or Ajv. Loose mode shown for brevity; the default full mode also constrains operators and values per field. Check the result with the diagnostics format. See JSON Schema.

import { getQueryJsonSchema } from '@react-querybuilder/core';

getQueryJsonSchema(fields, { mode: 'loose', operators: ['=', 'in'] });
Output
{
  "$defs": {
    "group": {
      "type": "object",
      "properties": {
        "combinator": { "type": "string", "enum": ["and", "or"] },
        "rules": {
          "type": "array",
          "items": { "anyOf": [{ "$ref": "#/$defs/rule" }, { "$ref": "#/$defs/group" }] }
        },
        "not": { "type": "boolean" }
      },
      "required": ["combinator", "rules"]
    },
    "rule": {
      "type": "object",
      "properties": {
        "field": { "type": "string", "enum": ["firstName", "lastName", "age", "isMusician"] },
        "operator": { "type": "string", "enum": ["=", "in"] },
        "value": {}
      },
      "required": ["field", "operator", "value"]
    }
  },
  "$ref": "#/$defs/group"
}