Simplification of Relay Modern Example (#1757) (#2776)

examples/with-relay-modern/.graphqlconfig

@@ -0,0 +1,8 @@
+{
+  "schemaPath": "schema/schema.graphql",
+  "extensions": {
+    "endpoints": {
+      "dev": "https://api.graph.cool/relay/v1/next-js-with-relay-modern-example"
+    }
+  }
+}

examples/with-relay-modern/README.md

@@ -16,15 +16,10 @@ Install it:
 npm install
 ```
 
-Setup Graphcool project
+Download schema introspection data from configured Relay endpoint 
 
 ```bash
-npm run graphcool-init
-```
-
-After successful initialization, copy Graphcool Relay Endpoint URL from console and store it into `.env` file
-```bash
-RELAY_ENDPOINT=your relay endpoint here
+npm run schema
 ```
 
 Run Relay ahead-of-time compilation (should be re-run after any edits to components that query data with Relay)

examples/with-relay-modern/lib/createRelayEnvironment.js

@@ -1,15 +1,15 @@
 import { Environment, Network, RecordSource, Store } from 'relay-runtime'
-import fetch from 'isomorphic-unfetch'
+import fetch from 'isomorphic-fetch'
 
 let relayEnvironment = null
 
 // Define a function that fetches the results of an operation (query/mutation/etc)
 // and returns its results as a Promise:
 function fetchQuery (
-    operation,
-    variables,
-    cacheConfig,
-    uploadables,
+  operation,
+  variables,
+  cacheConfig,
+  uploadables,
 ) {
   return fetch(process.env.RELAY_ENDPOINT, {
     method: 'POST',
@@ -25,12 +25,12 @@ function fetchQuery (
 }
 
 export default function initEnvironment ({ records = {} } = {}) {
-    // Create a network layer from the fetch function
+  // Create a network layer from the fetch function
   const network = Network.create(fetchQuery)
   const store = new Store(new RecordSource(records))
 
-    // Make sure to create a new Relay environment for every server-side request so that data
-    // isn't shared between connections (which would be bad)
+  // Make sure to create a new Relay environment for every server-side request so that data
+  // isn't shared between connections (which would be bad)
   if (!process.browser) {
     return new Environment({
       network,
@@ -38,7 +38,7 @@ export default function initEnvironment ({ records = {} } = {}) {
     })
   }
 
-    // reuse Relay environment on client-side
+  // reuse Relay environment on client-side
   if (!relayEnvironment) {
     relayEnvironment = new Environment({
       network,

examples/with-relay-modern/package.json

@@ -8,22 +8,23 @@
     "build": "next build",
     "start": "next start",
     "relay": "relay-compiler --src ./ --exclude **/.next/** **/node_modules/** **/test/**  **/__generated__/** --schema ./schema/schema.graphql",
-    "schema": "node scripts/getSchema.js"
+    "schema": "graphql get-schema dev"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "dotenv": "^4.0.0",
     "dotenv-webpack": "^1.5.4",
-    "isomorphic-unfetch": "^2.0.0",
+    "isomorphic-fetch": "^2.2.1",
     "next": "^3.0.3",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-relay": "^1.2.0-rc.1"
   },
   "devDependencies": {
+    "graphql-cli": "^1.0.0-beta.4",
     "babel-plugin-relay": "^1.1.0",
     "graphcool": "^1.2.1",
     "relay-compiler": "^1.2.0-rc.1"
   }
-}
+}

examples/with-relay-modern/scripts/getSchema.js

@@ -1,28 +0,0 @@
-var fetch = require('node-fetch')
-var fs = require('fs')
-var path = require('path')
-
-require('dotenv').config()
-
-const {
-  buildClientSchema,
-    introspectionQuery,
-    printSchema
-} = require('graphql/utilities')
-
-console.log(introspectionQuery)
-
-fetch(process.env.RELAY_ENDPOINT, {
-  method: 'POST',
-  headers: {
-    'Accept': 'application/json',
-    'Content-Type': 'application/json'
-  },
-  body: JSON.stringify({ 'query': introspectionQuery })
-})
-    .then(res => res.json())
-    .then(res => {
-      console.log(res)
-      const schemaString = printSchema(buildClientSchema(res.data))
-      fs.writeFileSync(path.join(__dirname, '..', 'schema', 'schema.graphql'), schemaString)
-    })