Running graphQL (#1139)

* Add graphQLServerURL option to the CLI

* Add GraphQL Playground instructions in readme file

* Fixing typo

* Including GraphQL link in summary

* Changing order

Author: davimacedo

.github/graphql-playground.png

@@ -16,6 +16,7 @@ const program = require('commander');
 program.option('--appId [appId]', 'the app Id of the app you would like to manage.');
 program.option('--masterKey [masterKey]', 'the master key of the app you would like to manage.');
 program.option('--serverURL [serverURL]', 'the server url of the app you would like to manage.');
+program.option('--graphQLServerURL [graphQLServerURL]', 'the GraphQL server url of the app you would like to manage.');
 program.option('--dev', 'Enable development mode. This will disable authentication and allow non HTTPS connections. DO NOT ENABLE IN PRODUCTION SERVERS');
 program.option('--appName [appName]', 'the name of the app you would like to manage. Optional.');
 program.option('--config [config]', 'the path to the configuration file');
@@ -47,6 +48,7 @@ let explicitConfigFileProvided = !!program.config;
 let configFile = null;
 let configFromCLI = null;
 let configServerURL = program.serverURL || process.env.PARSE_DASHBOARD_SERVER_URL;
+let configGraphQLServerURL = program.graphQLServerURL || process.env.PARSE_DASHBOARD_GRAPHQL_SERVER_URL;
 let configMasterKey = program.masterKey || process.env.PARSE_DASHBOARD_MASTER_KEY;
 let configAppId = program.appId || process.env.PARSE_DASHBOARD_APP_ID;
 let configAppName = program.appName || process.env.PARSE_DASHBOARD_APP_NAME;
@@ -87,6 +89,9 @@ if (!program.config && !process.env.PARSE_DASHBOARD_CONFIG) {
         ]
       }
     };
+    if (configGraphQLServerURL) {
+      configFromCLI.data.apps[0].graphQLServerURL = configGraphQLServerURL;
+    }
     if (configUserId && configUserPassword) {
       configFromCLI.data.users = [
         {
@@ -104,8 +109,8 @@ if (!program.config && !process.env.PARSE_DASHBOARD_CONFIG) {
   };
 } else {
   configFile = program.config;
-  if (program.appId || program.serverURL || program.masterKey || program.appName) {
-    console.log('You must provide either a config file or required CLI options (app ID, Master Key, and server URL); not both.');
+  if (program.appId || program.serverURL || program.masterKey || program.appName || program.graphQLServerURL) {
+    console.log('You must provide either a config file or other CLI options (appName, appId, masterKey, serverURL, and graphQLServerURL); not both.');
     process.exit(3);
   }
 }

Parse-Dashboard/index.js

@@ -19,6 +19,7 @@ Parse Dashboard is a standalone dashboard for managing your [Parse Server](https
       * [Multiple apps](#multiple-apps)
       * [Single app](#single-app)
   * [Managing Multiple Apps](#managing-multiple-apps)
+  * [GraphQL Playground](#graphql-playground)    
   * [App Icon Configuration](#app-icon-configuration)
   * [App Background Color Configuration](#app-background-color-configuration)
   * [Other Configuration Options](#other-configuration-options)
@@ -136,6 +137,56 @@ Managing multiple apps from the same dashboard is also possible. Simply add addi
 }
 ```
 
+## GraphQL Playground
+
+Parse Dashboard has a built-in GraphQL Playground to play with the auto-generated [Parse GraphQL API](https://github.com/parse-community/parse-server#graphql).
+
+You can setup the GraphQL Playground by passing the `--graphQLServerURL` option to the `parse-dashboard` CLI:
+
+```
+parse-dashboard --dev --appId yourAppId --masterKey yourMasterKey --serverURL "https://example.com/parse" --graphQLServerURL "https://example.com/graphql" --appName optionalName
+```
+
+The `graphQLServerURL` option is also available through an environment variable called `PARSE_DASHBOARD_GRAPHQL_SERVER_URL`:
+
+```
+HOST: "0.0.0.0"
+PORT: "4040"
+MOUNT_PATH: "/"
+PARSE_DASHBOARD_SERVER_URL: "http://localhost:1337/parse"
+PARSE_DASHBOARD_GRAPHQL_URL: "http://localhost:1337/graphql"
+PARSE_DASHBOARD_MASTER_KEY: "myMasterKey"
+PARSE_DASHBOARD_APP_ID: "myAppId"
+PARSE_DASHBOARD_APP_NAME: "MyApp"
+```
+
+You can also setup the GraphQL Playground in your `parse-dashboard-config.json` file:
+
+```json
+{
+  "apps": [
+    {
+      "serverURL": "http://localhost:1337/parse",
+      "graphQLServerURL": "http://localhost:1337/graphql",
+      "appId": "myAppId",
+      "masterKey": "myMasterKey",
+      "appName": "My Parse Server App"
+    },
+    {
+      "serverURL": "http://localhost:1337/parse2",
+      "graphQLServerURL": "http://localhost:1337/graphql2",
+      "appId": "myAppId",
+      "masterKey": "myMasterKey",
+      "appName": "My Parse Server App 2"
+    }
+  ]
+}
+```
+
+After starting the dashboard, you can visit http://0.0.0.0:4040/apps/MyTestApp/api_console/graphql in your browser:
+
+![Parse Dashboard GraphQL Playground](.github/graphql-playground.png)
+
 ## App Icon Configuration
 
 Parse Dashboard supports adding an optional icon for each app, so you can identify them easier in the list. To do so, you *must* use the configuration file, define an `iconsFolder` in it, and define the `iconName` parameter for each app (including the extension). The path of the `iconsFolder` is relative to the configuration file. If you have installed ParseDashboard globally you need to use the full path as value for the `iconsFolder`. To visualize what it means, in the following example `icons` is a directory located under the same directory as the configuration file: