A standalone deployment of the official GraphiQL IDE, with Zendro OAuth2 login and jq/JSONPath meta-query filtering
This is a thin Express server (server.js) that mounts zendro-graphiql at its root, with both of its optional features - OAuth2 login and the jq/JSONPath filter panel - enabled. It talks to a graphql-server running elsewhere (a different origin/host), so unlike graphql-server's own built-in /graphiql, /graphql, /meta_query and /auth/* here are all reverse proxy routes: the browser only ever talks to this app's origin.
This app holds no Keycloak credentials of its own. graphql-server is the only service that needs to know about the identity provider - it already owns authorization (ACL), and now the entire OAuth2 implementation too (utils/auth/ there, independent of the zendro-graphiql package this app itself mounts for the SPA). Login/logout here just reverse-proxies to graphql-server's own top-level /auth/*, the same way /graphql and /meta_query already do; see graphql-server's README, "Acting as an auth backend for other origins", for how that's wired up and why it's still safe to do across origins (the session cookie stays scoped to this app's origin from the browser's point of view - it's never exposed to a different origin, cross-site, or otherwise handled any differently than before).
Copy .env.example to .env and fill in the values - see the comments in that file for what each variable does. At minimum you need ZENDRO_SERVER_URL pointing at the target graphql-server's origin, and that graphql-server needs AUTH_REDIRECT_URI (its own .env) to include this app's origin (e.g. http://localhost:7070/*) so it accepts running login on this app's behalf. PORT and ZENDRO_SERVER_URL are the two variables you're likely to actually change - the redirect URI and the /graphql+/meta_query+/auth URLs are all derived from them at runtime rather than needing to be kept in sync by hand.
npm install
git submodule update --init # if you haven't already
npm run build:graphiql # builds the GraphiQL SPA (zendro-graphiql/dist)
npm run dev # or: npm startZendro is the product of a joint effort between the Forschungszentrum Jülich, Germany and the Comisión Nacional para el Conocimiento y Uso de la Biodiversidad, México, to generate a tool that allows efficiently building data warehouses capable of dealing with diverse data generated by different research groups in the context of the FAIR principles and multidisciplinary projects. The name Zendro comes from the words Zenzontle and Drossel, which are Mexican and German words denoting a mockingbird, a bird capable of “talking” different languages, similar to how Zendro can connect your data warehouse from any programming language or data analysis pipeline.
Francisca Acevedo1, Vicente Arriaga1, Katja Dohm3, Constantin Eiteneuer2, Sven Fahrner2, Frank Fischer4, Asis Hallab2, Alicia Mastretta-Yanes1, Roland Pieruschka2, Alejandro Ponce1, Yaxal Ponce2, Francisco Ramírez1, Irene Ramos1, Bernardo Terroba1, Tim Rehberg3, Verónica Suaste1, Björn Usadel2, David Velasco2, Thomas Voecking3, Dan Wang2
- CONABIO - Comisión Nacional para el Conocimiento y Uso de la Biodiversidad, México
- Forschungszentrum Jülich - Germany
- auticon - www.auticon.com
- InterTech - www.intertech.de
Asis Hallab and Alicia Mastretta-Yanes coordinated the project. Asis Hallab designed the software. Programming of code generators, the browser based single page application interface, and the GraphQL application programming interface was done by Katja Dohm, Constantin Eiteneuer, Francisco Ramírez, Tim Rehberg, Veronica Suaste, David Velasco, Thomas Voecking, and Dan Wang. Counselling and use case definitions were contributed by Francisca Acevedo, Vicente Arriaga, Frank Fischer, Roland Pieruschka, Alejandro Ponce, Irene Ramos, and Björn Usadel. User experience and application of Zendro on data management projects was carried out by Asis Hallab, Alicia Mastretta-Yanes, Yaxal Ponce, Irene Ramos, Verónica Suaste, and David Velasco. Logo design was made by Bernardo Terroba.