Video 5: expose Graphiql using express-graphql.

.idea/workspace.xml

@@ -2,7 +2,9 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="417b6c39-7b77-43c5-80fb-b9bf95b57f36" name="Default" comment="">
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/index.js" afterPath="$PROJECT_DIR$/index.js" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/package.json" afterPath="$PROJECT_DIR$/package.json" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="TRACKING_ENABLED" value="true" />
@@ -20,42 +22,32 @@
       <file leaf-file-name="index.js" pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/index.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="343">
-              <caret line="50" column="8" lean-forward="false" selection-start-line="50" selection-start-column="8" selection-end-line="50" selection-end-column="8" />
+            <state relative-caret-position="308">
+              <caret line="22" column="0" lean-forward="true" selection-start-line="22" selection-start-column="0" selection-end-line="22" selection-end-column="0" />
               <folding>
-                <marker date="1481974212000" expanded="true" signature="99:176" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="104:109" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="110:176" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="114:116" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="118:120" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="124:129" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="131:137" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="141:149" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="151:154" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="158:165" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="167:174" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="178:225" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="183:188" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="189:225" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="193:198" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="200:205" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="208:214" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="217:222" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="227:257" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="232:238" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="239:257" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="243:248" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="250:255" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="668:744" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="674:686" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="687:744" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="691:697" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="691:742" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="698:742" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="702:704" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="708:713" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="717:725" ph="{...}" />
-                <marker date="1481974212000" expanded="true" signature="729:736" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="241:318" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="246:251" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="252:318" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="256:258" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="260:262" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="266:271" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="273:279" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="283:291" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="293:296" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="300:307" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="309:316" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="320:367" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="325:330" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="331:367" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="335:340" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="342:347" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="350:356" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="359:364" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="369:399" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="374:380" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="381:399" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="385:390" ph="{...}" />
+                <marker date="1481978137000" expanded="true" signature="392:397" ph="{...}" />
               </folding>
             </state>
           </provider>
@@ -245,12 +237,12 @@
       <updated>1481822369870</updated>
       <workItem from="1481822371153" duration="34000" />
       <workItem from="1481822430451" duration="270000" />
-      <workItem from="1481969401352" duration="2054000" />
+      <workItem from="1481969401352" duration="2700000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="2358000" />
+    <option name="totallyTimeSpent" value="3004000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1435" height="877" extended-state="6" />
@@ -295,39 +287,29 @@
         <state relative-caret-position="0">
           <caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
           <folding>
-            <marker date="1481974212000" expanded="true" signature="99:176" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="104:109" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="110:176" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="114:116" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="118:120" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="124:129" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="131:137" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="141:149" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="151:154" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="158:165" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="167:174" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="178:225" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="183:188" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="189:225" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="193:198" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="200:205" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="208:214" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="217:222" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="227:257" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="232:238" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="239:257" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="243:248" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="250:255" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="668:744" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="674:686" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="687:744" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="691:697" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="691:742" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="698:742" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="702:704" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="708:713" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="717:725" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="729:736" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="241:318" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="246:251" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="252:318" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="256:258" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="260:262" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="266:271" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="273:279" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="283:291" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="293:296" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="300:307" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="309:316" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="320:367" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="325:330" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="331:367" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="335:340" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="342:347" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="350:356" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="359:364" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="369:399" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="374:380" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="381:399" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="385:390" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="392:397" ph="{...}" />
           </folding>
         </state>
       </provider>
@@ -366,42 +348,32 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="343">
-          <caret line="50" column="8" lean-forward="false" selection-start-line="50" selection-start-column="8" selection-end-line="50" selection-end-column="8" />
+        <state relative-caret-position="308">
+          <caret line="22" column="0" lean-forward="true" selection-start-line="22" selection-start-column="0" selection-end-line="22" selection-end-column="0" />
           <folding>
-            <marker date="1481974212000" expanded="true" signature="99:176" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="104:109" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="110:176" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="114:116" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="118:120" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="124:129" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="131:137" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="141:149" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="151:154" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="158:165" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="167:174" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="178:225" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="183:188" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="189:225" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="193:198" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="200:205" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="208:214" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="217:222" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="227:257" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="232:238" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="239:257" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="243:248" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="250:255" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="668:744" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="674:686" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="687:744" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="691:697" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="691:742" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="698:742" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="702:704" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="708:713" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="717:725" ph="{...}" />
-            <marker date="1481974212000" expanded="true" signature="729:736" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="241:318" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="246:251" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="252:318" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="256:258" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="260:262" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="266:271" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="273:279" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="283:291" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="293:296" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="300:307" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="309:316" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="320:367" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="325:330" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="331:367" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="335:340" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="342:347" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="350:356" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="359:364" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="369:399" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="374:380" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="381:399" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="385:390" ph="{...}" />
+            <marker date="1481978137000" expanded="true" signature="392:397" ph="{...}" />
           </folding>
         </state>
       </provider>

index.js

@@ -1,6 +1,12 @@
 'user strict';
 
-const { graphql, buildSchema } = require('graphql');
+const express = require('express');
+const graphqlHTTP = require('express-graphql');
+const { buildSchema } = require('graphql');
+
+const PORT = process.env.PORT || 3000;
+
+const server = express();
 
 const schema = buildSchema(`
 type Video {
@@ -46,17 +52,12 @@ const resolvers = {
   videos: () => videos
 };
 
-const query = `
-query myFirstQuery {
-  videos {
-  id,
-  title,
-  duration,
-  watched  
-  }
-}
-`;
+server.use('/graphql', graphqlHTTP({
+  schema,
+  graphiql: true,
+  rootValue: resolvers
+}));
 
-graphql(schema, query, resolvers)
-  .then((result) => console.log(result))
-  .catch((error) => console.log(error));
+server.listen(PORT, () => {
+  console.log(`Listening on http://localhost:${PORT}`);
+});

package.json

@@ -5,6 +5,8 @@
   "author": "Frederic G. MARAND <fgm@osinet.fr>",
   "license": "MIT",
   "dependencies": {
+    "express": "^4.14.0",
+    "express-graphql": "^0.6.1",
     "graphql": "0.7.2"
   },
   "scripts": {