Zendro Graphiql interface

A Next.js implementation of the GraphQL IDE with Zendro login and meta-query support

Description

This application offers a Zendro specific implementation of the browser based GraphQL IDE Graphiql. The project is a simple Next.js application. Custom adjustments have been made to accomodate Zendro requirements for authentication of users and enhanced meta searches using jq or JSONPath statements.

Configuration

For the Zendro frontend to know the location of its GraphQL endpoint, as well as other parameters required for its functionality, several environmental variables need to be defined in either a .env, .env.local, or .env.production file.

This file is also used by Next.js to set any environment variables that should be available to either the built-in generator, or in the browser. Read more about Next.js environmental variables in the official documentation.

For security reasons, env.local is never committed to the remote repository. However, we have included a .env.development file with some reasonable defaults that may be used in development. In production, you can copy .env.development to a new .env.production file and modify it accordingly.

Below there is a brief explanation of what each variable is used for.

# GraphQL endpoint address. Used to send data queries and mutations.
NEXT_PUBLIC_ZENDRO_GRAPHQL_URL='http://localhost:3000/graphql'

# GraphQL meta-query endpoint address. Used to send meta- queries and mutations.
NEXT_PUBLIC_ZENDRO_METAQUERY_URL='http://localhost:3000/meta_query'

# OAuth2 Issuer. Used to connect to the OAuth provider
OAUTH2_ISSUER
# OAuth2 Token URI. Used to generate refresh tokens
OAUTH2_TOKEN_URI
# OAuth2 Client ID. Used to connect to the OAuth provider
OAUTH2_CLIENT_ID
# OAuth2 Client Secret. Used to connect to the OAuth provider
OAUTH2_CLIENT_SECRET
# OAuth2 - NextAuth URL. When deploying to production set to the canonical URL of your site.
NEXTAUTH_URL
# OAuth2 - NextAuth Secret. Used to encrypt NextAuth JWT.
NEXTAUTH_SECRET

Development

To start a development server, the following command is available.

yarn dev
# or to serve it from a custom port
PORT=5000 yarn dev

Deployment

To build and start the application the following command is availbale.

yarn build    # build the application in `.next` folder
yarn start    # serve the application using the provided Node.js server

Next.js Resources

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Contributions

Zendro 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.

Zendro contributors in alphabetical order

Francisca Acevedo¹, Vicente Arriaga¹, Katja Dohm³, Constantin Eiteneuer², Sven Fahrner², Frank Fischer⁴, Asis Hallab², Alicia Mastretta-Yanes¹, Roland Pieruschka², Alejandro Ponce¹, Yaxal Ponce², Francisco Ramírez¹, Irene Ramos¹, Bernardo Terroba¹, Tim Rehberg³, Verónica Suaste¹, Björn Usadel², David Velasco², Thomas Voecking³, Dan Wang²

Author affiliations

1. CONABIO - Comisión Nacional para el Conocimiento y Uso de la Biodiversidad, México
2. Forschungszentrum Jülich - Germany
3. auticon - www.auticon.com
4. InterTech - www.intertech.de

Zendro author contributions

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.