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: How to Add a New API and Variables to React Query Builder
description: Configuring the query builder with geographic data fields
privateVideoUrl: https://fullstack.wistia.com/medias/0i3aqrjd0q
code: https://gitlab.com/fullstackio/books/newline-course-apps/jake-boone-building-advanced-admin-reporting-in-react/-/tree/main/code/module_04/lesson_04.02
---

# Preparing a new data set

Now that we have our new API endpoint up and running, we can modify the client to query on the fields from the new data set.

## Dataset switching

In the client code, add a new type to the file `types.ts` called `Dataset`.

```typescript { actualFilename=./protected/src/types.ts endChar=80 endLine=3 startChar=0 startLine=1 statedFilename=client/src/types.ts url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_04/lesson_04.02/protected/src/types.ts }
export type Language = "en" | "es";
export type Dataset = "sales" | "unlocode";
```

Add a state variable to hold the dataset and add a dataset selector to the top of the `return` statement in `App.tsx`.

```typescript { actualFilename=./protected/src/App.tsx endLine=12 startLine=12 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_04/lesson_04.02/protected/src/App.tsx#L12 }
import { Dataset, Language } from "./types";
```

```typescript { actualFilename=./protected/src/App.tsx endLine=43 startLine=43 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_04/lesson_04.02/protected/src/App.tsx#L43 }
  const [dataset, setDataset] = useState<Dataset>("sales");
```

```typescript { actualFilename=./protected/src/App.tsx endLine=100 startLine=97 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_04/lesson_04.02/protected/src/App.tsx#L97 }
      <select value={dataset} onChange={(e) => setDataset(e.target.value as Dataset)}>
        <option value="sales">Sales</option>
        <option value="unlocode">UN/LOCODE</option>
      </select>
```

Add a state variable to hold the new query representation. Switch the `query` and `onQueryChange` props in the `QueryBuilder` component based on the `dataset` selection.

```typescript { actualFilename=./protected/src/App.tsx endLine=38 startLine=34 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_04/lesson_04.02/protected/src/App.tsx#L34 }
  const [queryUNL, setQueryUNL] = useState<RuleGroupType>({
    id: "root",
    combinator: "and",
    rules: [],
  });
```

```typescript { actualFilename=./protected/src/App.tsx endLine=112 startLine=101 statedFilename=client/src/App.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_04/lesson_04.02/protected/src/App.tsx#L101 }
      <QueryBuilder
        fields={fields[dataset]}
        getOperators={getOperators}
        query={dataset === "sales" ? query : queryUNL}
        onQueryChange={(q) => (dataset === "sales" ? setQuery : setQueryUNL)(q)}
        translations={translations[language]}
        combinators={combinators[language]}
        controlElements={{
          combinatorSelector: CombinatorSelector,
          valueEditor: ValueEditor,
        }}
      />
```

If you still have the SQL and JSON representations visible in the application, switch the display based on the selection.

```tsx
<pre>
  {formatQuery(dataset === "sales" ? query : queryUNL, { format: "sql", valueProcessor })}
</pre>
<pre>{formatQuery(dataset === "sales" ? query : queryUNL, "json")}</pre>
```

## Field configuration

In `fields.ts`, import the `Dataset` type and convert the exported object to a `Record` with keys of type `Dataset` and values of type `Field[]`. The sales fields should be under the `sales` key. Add the UN/LOCODE fields under the `unlocode` key. Use the `inputType` `"number"` for the `id`, `latitude`, and `longitude` fields, and use `"date"` for the `date` field.

```typescript { actualFilename=./protected/src/fields.ts endLine=304 startLine=84 statedFilename=client/src/fields.ts url=https&#x3A;//gitlab.com/fullstackio/books/building-advanced-admin-reporting-in-react/module_04/lesson_04.02/protected/src/fields.ts#L84 }
const fields: Record<Dataset, Field[]> = {
  sales: [
    {
      name: "order_id",
      label: "Order ID",
      inputType: "number",
    },
    {
      name: "region",
      label: "Region",
      valueEditorType: "select",
      values: regions,
    },
    {
      name: "country",
      label: "Country",
    },
    {
      name: "item_type",
      label: "Item Type",
      valueEditorType: "select",
      values: itemTypes,
    },
    {
      name: "sales_channel",
      label: "Sales Channel",
      valueEditorType: "select",
      values: [
        { name: "Offline", label: "Offline" },
        { name: "Online", label: "Online" },
      ],
    },
    {
      name: "order_priority",
      label: "Order Priority",
      valueEditorType: "select",
      values: priorities,
      refData: prioritiesRefData,
    },
    {
      name: "order_date",
      label: "Order Date",
      datatype: "date",
      cellRenderer: dateCellRenderer,
    },
    {
      name: "ship_date",
      label: "Ship Date",
      datatype: "date",
      cellRenderer: dateCellRenderer,
    },
    {
      name: "units_sold",
      label: "Units Sold",
      inputType: "number",
      type: "rightAligned",
    },
    {
      name: "unit_price",
      label: "Unit Price",
      inputType: "number",
      type: "rightAligned",
    },
    {
      name: "unit_cost",
      label: "Unit Cost",
      inputType: "number",
      type: "rightAligned",
    },
    {
      name: "total_revenue",
      label: "Total Revenue",
      inputType: "number",
      type: "rightAligned",
    },
    {
      name: "total_cost",
      label: "Total Cost",
      inputType: "number",
      type: "rightAligned",
    },
    {
      name: "total_profit",
      label: "Total Profit",
      inputType: "number",
      type: "rightAligned",
    },
  ],
  unlocode: [
    {
      label: "Identifier",
      name: "id",
      inputType: "number",
      type: "rightAligned",
    },
    {
      label: "Country",
      name: "country",
    },
    {
      label: "Location",
      name: "location",
    },
    {
      label: "Name",
      name: "name",
    },
    {
      label: "Name w/o diacritics",
      name: "name_without_diacritics",
    },
    {
      label: "Subdivision",
      name: "subdivision",
    },
    {
      label: "Status",
      name: "status",
      values: statusValues,
      valueEditorType: "select",
      refData: statusValuesRefData,
    },
    {
      label: "Function",
      name: "function",
    },
    {
      label: "Date",
      name: "date",
      datatype: "date",
      cellRenderer: dateCellRenderer,
    },
    {
      label: "IATA",
      name: "iata",
    },
    {
      label: "Coordinates",
      name: "coordinates",
    },
    {
      label: "Remarks",
      name: "remarks",
    },
    {
      label: "Locode",
      name: "locode",
    },
    {
      label: "Port",
      name: "port",
      valueEditorType: "checkbox",
      cellRenderer: checkMarkCellRenderer,
      defaultValue: true,
    },
    {
      label: "Rail Terminal",
      name: "rail_terminal",
      valueEditorType: "checkbox",
      cellRenderer: checkMarkCellRenderer,
      defaultValue: true,
    },
    {
      label: "Road Terminal",
      name: "road_terminal",
      valueEditorType: "checkbox",
      cellRenderer: checkMarkCellRenderer,
      defaultValue: true,
    },
    {
      label: "Airport",
      name: "airport",
      valueEditorType: "checkbox",
      cellRenderer: checkMarkCellRenderer,
      defaultValue: true,
    },
    {
      label: "Postal Exchange",
      name: "postal_exchange",
      valueEditorType: "checkbox",
      cellRenderer: checkMarkCellRenderer,
      defaultValue: true,
    },
    {
      label: "Multimodal",
      name: "multimodal",
      valueEditorType: "checkbox",
      cellRenderer: checkMarkCellRenderer,
      defaultValue: true,
    },
    {
      label: "Fixed",
      name: "fixed",
      valueEditorType: "checkbox",
      cellRenderer: checkMarkCellRenderer,
      defaultValue: true,
    },
    {
      label: "Border Crossing",
      name: "border_crossing",
      valueEditorType: "checkbox",
      cellRenderer: checkMarkCellRenderer,
      defaultValue: true,
    },
    {
      label: "Latitude",
      name: "latitude",
      inputType: "number",
      type: "rightAligned",
    },
    {
      label: "Longitude",
      name: "longitude",
      inputType: "number",
      type: "rightAligned",
    },
  ],
};

Configuring the query builder with geographic data fields