@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
- ImplementsgetServerSideProps()
to enable SSR, returnsjsonTree
andzipConfig
from session data -
api
- Server-side API-
tree
- API to get/savejsonTree
to session, and to convert tree to various formats like JsonLogic, SQL, MongoDb, SpEL -
config
- API to get/savezipConfig
to session -
autocomplete
- API for autocomplete (seeasyncFetch
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 inupdateConfig()
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 forDemoQueryBuilder
-
Description
Session data
Session data contains:
-
jsonTree
- query value in JSON format, got fromUtils.getTree()
-
zipConfig
- compressed query config in JSON format, got fromUtils.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) inlib/config
- compressed with
Utils.compressConfig()
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 fromconfig_ctx
- Initial tree (to be passed as
value
prop for<Query>
) is a result ofUtils.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
.