Introducing Querity React Components: Streamline Your Frontend Query Interfaces

In a previous article I introduced Querity, a Java library designed to simplify querying both SQL and NoSQL databases using a unified language. Querity makes exposing data through REST APIs effortless.

Building upon that foundation, I’m excited to announce Querity React Components , a set of React components that bring the same ease of use to your frontend applications.

Available on npm:

@queritylib/react

and of course GitHub:

https://github.com/queritylib/querity-react

Why Querity React Components?

Integrating query capabilities into frontend applications can be challenging: queries for real world use-cases can get complex, and creating an interface to support that kind of complexity can take some effort.

With Querity React Components , you can easily create user interfaces that allow users to construct and execute queries, seamlessly interacting with your Querity-powered backend.

Key Components

The library offers two primary components:

• QuerityField : A text input component for entering and validating queries.
• QuerityBuilderUI : A visual interface for visually building complex queries without manual input.

Installation

To get started, install the package using npm or yarn:

npm install @queritylib/react

or

yarn add @queritylib/react

Usage

Wrap your application with the QuerityComponentsProvider to provide necessary components and styles:

import {useState} from 'react';
import {
  QuerityComponentsProvider,
  defaultQuerityComponents,
  QuerityField,
  QuerityBuilderUI
} from '@queritylib/react';
import '@queritylib/react/themes/default/style.css';

function App() {
  return (
    <QuerityComponentsProvider value={defaultQuerityComponents}>
      <QueryInterface />
    </QuerityComponentsProvider>
  );
}

function QueryInterface() {
  const [query, setQuery] = useState('');
  const [data, setData] = useState([]);

  const fetchData = async (query: string) => {
    const response = await fetch(`/api/data?q=${query}`);
    // error handling omitted
    const responseData = await response.json();
    setData(responseData.items);
  }

  return (
    <>
      <QuerityField
        value={query}
        placeholder="Enter your query"
        onChange={(q) => setQuery(q)}
        onEnter={() => fetchData(query)}
        onInvalidQuery={(error) => console.error('Invalid query:', error)}
      />
      <QuerityBuilderUI
        query={query}
        onChange={(q) => setQuery(q)}
      />
      <table>
        <tr>
          <th>ID</td>
          <!-- other headers omitted -->
        </tr>
        {data.map((item) => (
          <tr>
            <td>${item.id}</td>
            <!-- other columns omitted -->
          </tr>
        ))}
      </table>
    </>
  );
}

export default App;

In this setup:

QuerityField provides a text input for users to enter queries, with handlers for change events, submissions, and validation errors.

QuerityBuilderUI offers a visual interface for constructing queries, with the possibility of infinitely nesting the conditions and a handler for query changes.

As you can see, the two components can communicate with each other via a shared state, so the changes to one are reflected on the other.

The optional import of the default theme (@queritylib/react/themes/default/style.css) gives a nice look-and-feel to the components. Alternatively, you can create a custom stylesheet and avoid this import (see next section).

Here’s how QuerityBuilderUI looks with the default theme :

Querity React Components styled with default theme

Customization

Querity React Components are designed to be flexible and can be customized to fit your application's styling needs. By overriding the default components provided to the QuerityComponentsProvider, you can integrate with various CSS frameworks like Tailwind CSS , MUI , or Bootstrap.

For example, to customize components with Tailwind CSS:

import {
  QuerityComponentsProvider,
  defaultQuerityComponents,
  QuerityField,
  QuerityBuilderUI
} from '@queritylib/react';

const customComponents = {
  ...defaultQuerityComponents,
  Input: (props) => <input {...props} className={`${props.className} border p-2`} />,
  Select: (props) => <select {...props} className={`${props.className} border p-2`} />,
  Button: (props) => <button {...props} className={`${props.className} bg-gray-200 p-2 cursor-pointer mr-1`} />,
  Checkbox: (props) => (
      <label className="inline-flex items-center cursor-pointer">
        <input type="checkbox" {...props} className="sr-only peer"/>
        <div 
            className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
        <span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">{props.label}</span>
      </label>
  )
};

function App() {
  return (
    <QuerityComponentsProvider value={customComponents}>
      <QueryInterface />
    </QuerityComponentsProvider>
  );
}

// ...

A final look to the result:

Querity React Components styled with Tailwind CSS

In a similar way, you could instead integrate MUI components, that have a totally different way of declaration.

Querity React Components makes the job easy!

See it in action at Querity Demo… and of course find the code in the querity-demo GitHub repo.

Conclusion

If you enjoyed this post about @queritylib/react, please don’t forget to

give it a⭐ on Github!

Querity React Components bridge the gap between your frontend and Querity-powered backend, enabling the creation of sophisticated query interfaces with minimal effort. By leveraging these components, you can provide users with powerful tools to interact with data, enhancing the overall user experience.

Explore the full documentation and get started with Querity React Components today:

@queritylib/react on npm

If you missed the first article about the Java backend with Querity, you can find it here: Easily query SQL and NoSQL databases in your Java application with one single language.