Recipes

Export to a Prisma Where Clause

Format an existing builder query as a Prisma filter.

What this recipe builds

A short example that converts existing Builder data.
Prisma where wrapper output.
A focused conversion example for apps that already have a filter UI.

Loading the interactive recipe demo...

Install and imports

Install / imports

npm install @vojtechportes/react-query-builder

Fields and initial query

Typed field configuration

const fields: IBuilderFieldProps[] = [
  { field: 'status', label: 'Status', type: 'TEXT' },
  { field: 'total', label: 'Total', type: 'NUMBER' },
];

const query: DenormalizedQuery = [
  {
    type: 'GROUP',
    value: 'AND',
    isNegated: false,
    children: [
      { field: 'status', operator: 'EQUAL', value: 'PAID' },
      { field: 'total', operator: 'LARGER_EQUAL', value: 100 },
    ],
  },
];

Builder implementation

React implementation

import '@vojtechportes/react-query-builder/styles.css';
import React from 'react';
import {
  Builder,
  type DenormalizedQuery,
  type IBuilderFieldProps,
} from '@vojtechportes/react-query-builder';
import { formatQuery } from '@vojtechportes/react-query-builder/formatQuery';

const fields: IBuilderFieldProps[] = [
  {
    field: 'status',
    label: 'Status',
    type: 'TEXT',
    operators: ['EQUAL', 'NOT_EQUAL'],
  },
  {
    field: 'total',
    label: 'Total',
    type: 'NUMBER',
    operators: ['EQUAL', 'LARGER_EQUAL', 'SMALLER_EQUAL'],
  },
];

const initialQuery: DenormalizedQuery = [
  {
    type: 'GROUP',
    value: 'AND',
    isNegated: false,
    children: [
      { field: 'status', operator: 'EQUAL', value: 'PAID' },
      { field: 'total', operator: 'LARGER_EQUAL', value: 100 },
    ],
  },
];

export const PrismaExportFilter = () => {
  const [query, setQuery] = React.useState(initialQuery);

  const whereClause = formatQuery(query, 'Prisma', {
    fields,
    wrapWhereClause: true,
  });

  return (
    <>
      <Builder fields={fields} data={query} onChange={setQuery} />
      <pre>{whereClause}</pre>
    </>
  );
};

Format the Prisma filter

const result = formatQuery(data, 'Prisma', {
  fields,
  wrapWhereClause: true,
});

Expected output

{
  "where": {
    "AND": [{ "status": { "equals": "PAID" } }, { "total": { "gte": 100 } }]
  }
}

Validation and safety

Validate and rebuild filters on the server before passing them to Prisma.
Add filters for the current user or organization on the server; never accept those filters from the browser.

Production notes

Keep application fields mapped to exact Prisma model fields.
Test related records, empty values, and lists used by your Prisma schema.

Related guides

Frequently asked questions

What if a Builder operator has no Prisma equivalent?

Support only the operators your app can convert. Show a validation message for unsupported operators instead of creating an incomplete where object.

Where should the Prisma where object be created?

Create and check it on the server before passing it to Prisma Client. A browser preview is useful for learning, but it should not run the database query.