@react-awesome-query-builder/sandbox-next

Demo app built with Next.js.
Uses MUI widgets by default.
Enabled SSR with saving and loading query value and query config from session.

Run locally

From the root of cloned repository:

pnpm sandbox-next

Or copy sandbox_next dir and run inside it:

npm run preinstall
npm i
npm start

In first case local @react-awesome-query-builder/* packages will be used.
In second case @react-awesome-query-builder/* packages will be downloaded from NPM.

Then open http://localhost:3002 in a browser.
Feel free to play with code in components/demo, lib, pages.

Run in sandbox

(if it freezes on "Initializing Sandbox Container" please click "Fork")

(installing dependencies can take a while)

Directory structure

• pages
  • index - Implements getServerSideProps() to enable SSR, returns jsonTree and zipConfig from session data
  • api - Server-side API
    • tree - API to get/save jsonTree to session, and to convert tree to various formats like JsonLogic, SQL, MongoDb, SpEL
    • config - API to get/save zipConfig to session
    • autocomplete - API for autocomplete (see asyncFetch in CONFIG)
• lib
  • config_base - Creates basic config on server-side
  • config - Creates extended config on server-side (ready to compress and then pass to SSR)
  • config_update - Simple function to be used in updateConfig() in DemoQueryBuilder
  • config_ser - It's just a test to show ability to serialize an entire config to string and deserialize back
• data - Contains JSON with initial query value, JSON with data for autocomplete
• components/demo - DemoQueryBuilder component
  • config_ctx - Config context for DemoQueryBuilder

Description

Session data

Session data contains:

• jsonTree - query value in JSON format, got from Utils.getTree()
• zipConfig - compressed query config in JSON format, got from Utils.compressConfig()

Session data is saved to Redis (for deploying to Vercel with Upstash integration) or tmp json file (for local run), see lib/withSession.ts if you're interested in session implementation.

jsonTree

Initial jsonTree (if missing in session data) is loaded from data/init_logic.
See getInitialTree().
With POST /api/tree query value can be saved to session data, and loaded from session with GET /api/tree.
Response will contain result of converting provided tree into various formats (like Utils.jsonLogicFormat(), Utils.sqlFormat() - done on server-side).

zipConfig

Initial zipConfig (if missing in session data) is generated on server-side as follows:

• based on CoreConfig (imported from @react-awesome-query-builder/core)
• added fields, funcs and some overrides in lib/config_base
• added UI mixins (asyncFetch, custom React components, factory overrides) in lib/config
• compressed with Utils.compressConfig()

See getInitialZipConfig().

Response of GET /api/config?initial=true shows initial zip config.
Response of GET /api/config shows current zip config in session.
With POST /api/config compressed config can be saved to session data.

DemoQueryBuilder

DemoQueryBuilder component can use server-side props:

• It uses Utils.decompressConfig(zipConfig, MuiConfig, ctx) to create initial config to be passed to <Query>. ctx is imported from config_ctx
• Initial tree (to be passed as value prop for <Query>) is a result of Utils.loadTree(jsonTree)

On onChange callback it calls POST /api/tree to update tree on backend and also export tree to various formats on server-side.
On click on button update config it modifies config in state with config_update, compresses it and sends to POST /api/config to save zipConfig on backend.
On click on button stringify config it runs a test to show ability to serialize an entire config to string with serialize-javascript package and deserialize back with eval, see config_ser.