title: Generating GraphQL GUI from Schema and Schema from GUI
body: <p>While using GraphiQL works well, my boss has asked me to implement a user interface where users can check elements presented to them via UI elements like checkbox, map relationships and get the data and doing this will generate a graphql input for the person, call the API and get the result back to the user.</p>
  
  <p>So, basically this involves 2 generations. Generating a user interface from a GraphQL schema and generating a GraphQL input query from the user's selection.</p>
  
  <p>I searched and I was not able to find any tools which already do this. My server is in Node and I am using Express GraphQL. I converted my express schema to GraphQLSchema language using <a href="https://github.com/graphql-cli/graphql-cli" rel="nofollow noreferrer">https://github.com/graphql-cli/graphql-cli</a> and I introspected the GraphQLSchema language using the introspect function at <a href="https://github.com/sheerun/graphqlviz/blob/master/cli.js" rel="nofollow noreferrer">https://github.com/sheerun/graphqlviz/blob/master/cli.js</a> </p>
  
  <p>The object which I got was something like this (only partial schema output given below)
  `</p>
  
  <pre><code>"data": {
          "__schema": {
              "queryType": {
                  "name": "Query"
              },
              "mutationType": {
                  "name": "Mutation"
              },
              "subscriptionType": null,
              "types": [{
                  "kind": "OBJECT",
                  "name": "Query",
                  "description": null,
                  "fields": [{
                      "name": "employee",
                      "description": null,
                      "args": [{
                          "name": "ecode",
                          "description": null,
                          "type": {
                              "kind": "SCALAR",
                              "name": "String",
                              "ofType": null
                          },
                          "defaultValue": null
                      }],
  </code></pre>
  
  <p>`</p>
  
  <p>I am looping through the elements trying to generate UI but I am quite stuck.</p>
  
  <p>What is the best way to do this? Thanks in advance.</p>