Recipes

Convert SQL WHERE to React Query Builder Data

Parse a SQL WHERE clause into editable typed fields and nested builder data.

What this recipe builds

SQL import that turns an existing WHERE clause into editable filters.
Detected fields that you can replace with definitions from your application.
Nested filter data ready to display in the Builder.

Loading the interactive recipe demo...

Install and imports

Install / imports

npm install @vojtechportes/react-query-builder

Fields and initial query

Typed field configuration

const sql = "WHERE status = 'PAID' AND total >= 100";
const parsed = parseQuery(sql.replace(/^WHERE\s+/i, ''), 'SQL');
const fields: IBuilderFieldProps[] = parsed.fields;
const initialQuery: DenormalizedQuery = parsed.data;

Builder implementation

React implementation

import '@vojtechportes/react-query-builder/styles.css';
import React from 'react';
import { Builder } from '@vojtechportes/react-query-builder';
import { parseQuery } from '@vojtechportes/react-query-builder/parseQuery';

const sql = "WHERE status = 'PAID' AND total >= 100";
const parsed = parseQuery(sql.replace(/^WHERE\s+/i, ''), 'SQL');

export const SqlImportFilter = () => {
  return <Builder fields={parsed.fields} data={parsed.data} />;
};

Parse and inspect the result

const sql = "WHERE status = 'PAID' AND total >= 100";
const result = parseQuery(sql.replace(/^WHERE\s+/i, ''), 'SQL');
console.log(result.fields);
console.log(result.data);

Expected output

[
  {
    "type": "GROUP",
    "value": "AND",
    "isNegated": false,
    "children": [
      { "field": "status", "operator": "EQUAL", "value": "PAID" },
      { "field": "total", "operator": "LARGER_EQUAL", "value": 100 }
    ]
  }
]

Validation and safety

Parsing does not make SQL safe to execute.
Use query parameters provided by your database library instead of inserting values directly into SQL strings. Accept only supported fields and operators on the server.

Production notes

Replace the detected field labels and types with definitions from your schema.
Show parse errors and keep the previous valid query while users correct input.

Related guides

Frequently asked questions

What happens when the SQL contains unsupported syntax?

Do not replace the current filter. Show a clear error and let the user edit the SQL or return to the visual Builder.

Can imported SQL be sent directly to the database?

No. Check the parsed filter on the server and use query parameters when creating the database query. Never insert pasted SQL directly into a query string.