Introduction to React Query Builder

How to Create a React App With React Query Builder Using npm

Add Fields and Operators to React Query Builder

Getting started

How to Build a Multilingual React Site with Query Builder

Customize or Replace Default Component in React Query Builder

How to Configure Built-in Input Types in React Query Builder

How to Customize the React Query Builder ValueEditor Component

Configuration

Create SQL Queries With React formatQuery and valueProcessor

Push a React Query Builder API Server to Heroku With Git

Add a PostgreSQL Database to React Query Builder

How to Fetch Data From a React API

How to Build a Data Table in React With AG Grid

How to Visualize React API Data in a Graph With AG Charts

Integrating with an API

How to Build a New React API Endpoint

How to Add a New API and Variables to React Query Builder

How to Fetch and Display Data With React Query Builder

How to Add a Google Maps Object to a React Site

Geographic data

How to Bulk Edit Data With React Query Builder

How to Add Features to the React onClickUpdate Feature

How to Build Custom ValueEditor Components in React

Bulk edits

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

To get started building the application, we'll need to bootstrap it with 

. Create React App is a tool that helps initialize React projects and it's one of the quickest ways to get started writing a React application.

 directory and changing into that directory:

Next, initialize a git repository within that directory.

 command to generate a new React application using Create React App in a folder called 

 since that's what our remote server will use.

npx create-react-app client --template typescript --use-npm
cd client

(We do it this way, i.e. myapp/client, to get ready for the full application later.)

Finally, let's add some additional dependencies, 

npm i react-querybuilder node-sass@^4.14.1

Once that command is finished, delete the unnecessary files:

@import "~react-querybuilder/dist/query-builder.scss";

- import "./App.css"
+ import "./App.scss"

 to add a little bit of margin to the page.

 /* index.css */
 body {
-  margin: 0;
+  margin: 1rem;
 }

Now we're ready to create a query builder. You can do this in just a few lines of code. Import 

import { QueryBuilder } from "react-querybuilder";

// ...

  return (
    <QueryBuilder
      fields={[{ name: "test", label: "Test" }]}
      onQueryChange={(q) => console.log(q)}
    />
  );

This code will display the query builder in the application and allow the user to create rules and groups of rules, but with only one field (don't worry, we'll fix that in the next lesson). It will also log the internal query representation to the console.

, which means you can't control the behavior of the component with code. The state of the query builder is managed internally and we have no way to capture the inputs and outputs.

, using a state variable to control the query. The state variable will need to be of type 

import { useState } from "react";
import { QueryBuilder, RuleGroupType } from "react-querybuilder";

// ...

const [query, setQuery] = useState<RuleGroupType>({
  id: "root",
  combinator: "and",
  rules: [],
});

return (
  <QueryBuilder
    fields={[{ name: "test", label: "Test" }]}
    onQueryChange={(q) => setQuery(q)}
    query={query}
  />
);

Since we're no longer printing the query out to the console, and we'd still like to see the output, we can print the query out to the screen in JSON and SQL formats by using the 

. We'll discuss this function in more detail in a later lesson.

import React, { useState } from "react";
import { QueryBuilder, formatQuery, RuleGroupType } from "react-querybuilder";

function App() {
  const [query, setQuery] = useState<RuleGroupType>({
    id: "root",
    combinator: "and",
    rules: [],
  });

  return (
    <>
      <QueryBuilder
        fields={[{ name: "test", label: "Test" }]}
        query={query}
        onQueryChange={(q) => setQuery(q)}
      />
      <pre>{formatQuery(query, "sql")}</pre>
      <pre>{formatQuery(query, "json")}</pre>
    </>
  );
}

export default App;

---
title: How to Create a React App With React Query Builder Using npm
description: Setting up the application and adding a query builder
privateVideoUrl: https://fullstack.wistia.com/medias/8t7gibeqcm
isPublicLesson: true
---

# Initializing the query builder

## Setup

To get started building the application, we'll need to bootstrap it with [Create React App](https://create-react-app.dev/). Create React App is a tool that helps initialize React projects and it's one of the quickest ways to get started writing a React application.

Start by making a `myapp` directory and changing into that directory:

```shell
mkdir myapp
cd myapp
```

Next, initialize a git repository within that directory.

```shell
git init
```

Then run the `npx` command to generate a new React application using Create React App in a folder called `client`. We'll use the `typescript` template, and force the use of `npm` since that's what our remote server will use.

```shell
npx create-react-app client --template typescript --use-npm
cd client
```

(We do it this way, i.e. myapp/client, to get ready for the full application later.)

Finally, let's add some additional dependencies, `react-querybuilder` and `node-sass`.

```shell
npm i react-querybuilder node-sass@^4.14.1
```

Once that command is finished, delete the unnecessary files:

-   src/setupTests.ts
-   src/App.test.tsx
-   src/logo.svg
-   src/reportWebVitals.ts
-   public/favicon.ico
-   public/logo\*.png
-   public/manifest.json
-   public/robots.txt

Remove references to `reportWebVitals.ts` from `index.tsx`. Also remove references to `manifest.json`, `logo*.png`, and `favicon.ico` from `index.html`.

Rename `App.css` to `App.scss` and replace the contents with this:

```scss { actualFilename=./protected/src/App.scss endChar=55 endLine=2 startChar=0 startLine=1 statedFilename=client/src/App.scss url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_01/lesson_01.02/protected/src/App.scss }
@import "~react-querybuilder/dist/query-builder.scss";
```

Change the corresponding import in `App.tsx`.

```diff
- import "./App.css"
+ import "./App.scss"
```

We'll also modify `index.css` to add a little bit of margin to the page.

```diff
 /* index.css */
 body {
-  margin: 0;
+  margin: 1rem;
 }
```

## Adding the query builder

Now we're ready to create a query builder. You can do this in just a few lines of code. Import `QueryBuilder` from `react-querybuilder` and replace the `return` statement in `App.tsx` with the following code:

```tsx
import { QueryBuilder } from "react-querybuilder";

// ...

  return (
    <QueryBuilder
      fields={[{ name: "test", label: "Test" }]}
      onQueryChange={(q) => console.log(q)}
    />
  );
```

This code will display the query builder in the application and allow the user to create rules and groups of rules, but with only one field (don't worry, we'll fix that in the next lesson). It will also log the internal query representation to the console.

Now start the application:

```shell
npm start
```

View the app at <http://localhost:3000/> to make sure it's working.

## Making a controlled component

What we have now is called an [uncontrolled component](https://reactjs.org/docs/uncontrolled-components.html), which means you can't control the behavior of the component with code. The state of the query builder is managed internally and we have no way to capture the inputs and outputs.

We want a [controlled component](https://reactjs.org/docs/forms.html#controlled-components), so we'll add the `query` and `onQueryChange` props into the `App` function in `App.tsx`, using a state variable to control the query. The state variable will need to be of type `RuleGroupType`, which we can import from `react-querybuilder`.

```tsx
import { useState } from "react";
import { QueryBuilder, RuleGroupType } from "react-querybuilder";

// ...

const [query, setQuery] = useState<RuleGroupType>({
  id: "root",
  combinator: "and",
  rules: [],
});

return (
  <QueryBuilder
    fields={[{ name: "test", label: "Test" }]}
    onQueryChange={(q) => setQuery(q)}
    query={query}
  />
);
```

Since we're no longer printing the query out to the console, and we'd still like to see the output, we can print the query out to the screen in JSON and SQL formats by using the `formatQuery` function provided by `react-querybuilder`. We'll discuss this function in more detail in a later lesson.

```typescript { actualFilename=./protected/src/App.tsx endChar=543 endLine=25 startChar=0 startLine=1 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_01/lesson_01.02/protected/src/App.tsx }
import React, { useState } from "react";
import { QueryBuilder, formatQuery, RuleGroupType } from "react-querybuilder";

function App() {
  const [query, setQuery] = useState<RuleGroupType>({
    id: "root",
    combinator: "and",
    rules: [],
  });

  return (
    <>
      <QueryBuilder
        fields={[{ name: "test", label: "Test" }]}
        query={query}
        onQueryChange={(q) => setQuery(q)}
      />
      <pre>{formatQuery(query, "sql")}</pre>
      <pre>{formatQuery(query, "json")}</pre>
    </>
  );
}

export default App;
```


Setting up the application and adding a query builder

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Building Advanced Admin Reporting in React

WELCOMEIntroduction

Introduction:

Start Here

Module 1: Getting started

Introduction: (1:18)

Introduction to React Query Builder

Lesson 1:

How to Create a React App With React Query Builder Using npm

Lesson 2: (4:13)

Add Fields and Operators to React Query Builder

Module 2: Configuration

Lesson 1:

How to Build a Multilingual React Site with Query Builder

Lesson 2:

Customize or Replace Default Component in React Query Builder

Lesson 3:

How to Configure Built-in Input Types in React Query Builder

Lesson 4:

How to Customize the React Query Builder ValueEditor Component

Module 3: Integrating with an API

Lesson 1: (5:24)

Create SQL Queries With React formatQuery and valueProcessor

Lesson 2: (12:38)

Push a React Query Builder API Server to Heroku With Git

Lesson 3: (16:28)

Add a PostgreSQL Database to React Query Builder

Lesson 4: (6:10)

How to Fetch Data From a React API

Lesson 5: (11:37)

How to Build a Data Table in React With AG Grid

Lesson 6: (7:05)

How to Visualize React API Data in a Graph With AG Charts

Module 4: Geographic data

Lesson 1:

How to Build a New React API Endpoint

Lesson 2: (7:33)

How to Add a New API and Variables to React Query Builder

Lesson 3:

How to Fetch and Display Data With React Query Builder

Lesson 4:

How to Add a Google Maps Object to a React Site

Module 5: Bulk edits

Lesson 1: (12:16)

How to Bulk Edit Data With React Query Builder

Lesson 2:

How to Add Features to the React onClickUpdate Feature

Lesson 3:

How to Build Custom ValueEditor Components in React

How to Create a React App With React Query Builder Using npm