Parsing and Formatting

Overview

Query data can be converted to and from supported external formats.

formatQuery converts builder state to a target syntax.
parseQuery converts supported syntaxes back into builder state.
The documentation sandbox on this page lets you experiment with every supported format live.

Formatting to SQL

import { formatQuery } from '@vojtechportes/react-query-builder/formatQuery';

const sql = formatQuery(data, 'SQL', {
  fields,
  wrapWhereClause: true,
});

// WHERE (CUSTOMER_COUNTRY = 'CZ' AND ORDER_TOTAL BETWEEN 1000 AND 5000)

Parsing from SQL

import { parseQuery } from '@vojtechportes/react-query-builder/parseQuery';

const result = parseQuery(
  "WHERE CUSTOMER_COUNTRY = 'CZ' AND ORDER_TOTAL >= 1000",
  'SQL'
);

console.log(result.fields);
console.log(result.data);

Round-tripping

Some formats are more expressive than others. A round-trip is best when the source expression stays within the subset that maps cleanly to the builder model.

API reference

formatQuery and parseQuery.

Loading the interactive parsing sandbox...