In this course we teach you how to create admin reports with React using a query builder. Admin reporting is a broad topic, and getting started can be overwhelming.

In five modules, we cover configuration of the query builder, setting up a server, displaying data in a grid, chart, and map, as well as some more advanced uses of the query builder. It's about three hours long and comes with code samples.

The course is taught by Jake Boone, who uses React Query Builder in real, mission-critical applications for a large engineering and construction firm.

In this course, we'll be using React Query Builder to create admin reports with complex filtering, bulk editing, data grids, charts, and maps.

Building Advanced Admin Reporting in React

---
title: Create SQL Queries With React formatQuery and valueProcessor
description: Preparing for the server setup by processing the output of the query builder into database-ready SQL
privateVideoUrl: https://fullstack.wistia.com/medias/cwzge3ch9u
code: https://gitlab.com/fullstackio/books/newline-course-apps/jake-boone-building-advanced-admin-reporting-in-react/-/tree/main/code/module_03/lesson_03.01
---

# Formatting the query

## The `formatQuery` function

In this lesson we'll focus on the `formatQuery` function exported by `react-querybuilder`. `formatQuery` is useful for displaying different representations of the query, namely the internal JSON format (`"json"`), the internal format with rule identifiers stripped out (`"json_without_ids"`), SQL format (`"sql"`; the `WHERE` clause only), and a parameterized format useful for interacting with APIs.

Besides the format of the query representation, `formatQuery` has a couple of other options that can be set. `valueProcessor` is a function that will process rule values, and `quoteFieldNamesWith` will quote field names with the provided quote character in SQL mode.

## The `valueProcessor` function

The `valueProcessor` function is useful when your database engine requires special handling of certain value types. For example, the Oracle RDBMS does not have a native Boolean column type, so people typically use `VARCHAR2` with the values `'Y'` and `'N'` representing `true` and `false`, respectively. The default `valueProcessor` function will use `TRUE` and `FALSE`, so we would need to convert that to `'Y'` and `'N'`. Another value type that typically needs special handling is the date type. Most database engines have their own special syntax or functions for dates.

To demonstrate the capabilities of the `valueProcessor` function, we'll wrap the `defaultValueProcessor` from `react-querybuilder` and adjust the output to show what really happens to date fields on the server. Create a file called `valueProcessor.ts` in the `client/src/` folder.

Preparing for the server setup by processing the output of the query builder into database-ready SQL