[1.0] Relay Compiler (#912)

* Relay integration

* what is the deal with eslint

* gatsbygram update

* Hacker News example

* Drupal example

* bonus dependency

* Missed adding this

* Actually format example code

* update dependencies

* Get types for nested arguments + handle argument lists

* Add missing babel-runtime dependency

* Try removing hoisting to see if that fixes site builds

* debugging

* Updates from @jquense's changes

* Set websites to use 'canary' versions of websites so always download latest

* Add required yaml-loader

* Remove yarn.locks from example sites as we always want to install the latest code to catch errors early

* Update www for the new relay compiler

* Lengthen debounce so stuff can really finish

* Make paths to bin relative

* Restore lerna hoisting

* Add error and quit if a query name is missing

* Dunno if this helps but...

* Fix version string

* debugging...

* More info

* Follow links

* Add netlify.toml to set yarn version

* Turned out not what we want

* Get around permission error on Netlify

* Don't overwrite the Gatsby bin directory or it'll stop working

* Remove this workaround

* Remove debuggin

.eslintrc

@@ -1,6 +1,7 @@
 {
   "extends": [
     "google",
+    "eslint:recommended",
     "plugin:flowtype/recommended",
     "plugin:react/recommended",
     "prettier",
@@ -9,7 +10,7 @@
   ],
   "plugins": [
     "flowtype",
-    "react",
+    "react"
   ],
   "parserOptions": {
     "ecmaVersion": 2016,
@@ -23,19 +24,38 @@
     "node": true
   },
   "rules": {
-    "valid-jsdoc": [0],
-    "require-jsdoc": [0],
-    "quotes": ["error", "backtick"],
-    "jsx-quotes": ["error", "prefer-double"],
-    "max-len": ["error", 80],
-    "semi": ["error", "never"],
-    "object-curly-spacing": ["error", "always"],
-    "comma-dangle": ["error", {
-      "arrays": "always-multiline",
-      "objects": "always-multiline",
-      "imports": "always-multiline",
-      "exports": "always-multiline",
-      "functions": "ignore",
-    }]
+    "no-console": "off",
+    "valid-jsdoc": "off",
+    "require-jsdoc": "off",
+    "quotes": [
+      "error",
+      "backtick"
+    ],
+    "jsx-quotes": [
+      "error",
+      "prefer-double"
+    ],
+    "max-len": [
+      "error",
+      80
+    ],
+    "semi": [
+      "error",
+      "never"
+    ],
+    "object-curly-spacing": [
+      "error",
+      "always"
+    ],
+    "comma-dangle": [
+      "error",
+      {
+        "arrays": "always-multiline",
+        "objects": "always-multiline",
+        "imports": "always-multiline",
+        "exports": "always-multiline",
+        "functions": "ignore"
+      }
+    ]
   }
-}
+}

examples/.gitignore

@@ -0,0 +1 @@
+yarn.lock

examples/gatsbygram/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "graphql": false
+  }
+}

examples/gatsbygram/gatsby-node.js

@@ -18,7 +18,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
     // from static data that you can run queries against.
     //
     // Post is a data node type derived from data/posts.json
-    // which is created when scrapping Instagram. “allPosts”
+    // which is created when scrapping Instagram. “allPostsJson”
     // is a "connection" (a GraphQL convention for accessing
     // a list of nodes) gives us an easy way to query all
     // Post nodes.

examples/gatsbygram/package.json

@@ -5,23 +5,24 @@
   "version": "1.0.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "gatsby": "1.0.0-alpha13",
-    "gatsby-link": "1.0.0-alpha13",
-    "gatsby-transformer-json": "1.0.0-alpha13",
-    "gatsby-transformer-sharp": "1.0.0-alpha13",
-    "gatsby-plugin-glamor": "1.0.0-alpha13",
-    "gatsby-plugin-google-analytics": "^1.0.0-alpha13",
-    "gatsby-plugin-manifest": "1.0.0-alpha13",
-    "gatsby-plugin-offline": "1.0.0-alpha13",
-    "gatsby-plugin-sharp": "1.0.0-alpha13",
-    "gatsby-source-filesystem": "1.0.0-alpha13",
-    "gatsby-typegen-filesystem": "1.0.0-alpha13",
-    "gatsby-typegen-sharp": "1.0.0-alpha13",
+    "gatsby": "canary",
+    "gatsby-link": "canary",
+    "gatsby-plugin-glamor": "canary",
+    "gatsby-plugin-google-analytics": "canary",
+    "gatsby-plugin-manifest": "canary",
+    "gatsby-plugin-offline": "canary",
+    "gatsby-plugin-sharp": "canary",
+    "gatsby-source-filesystem": "canary",
+    "gatsby-transformer-json": "canary",
+    "gatsby-transformer-sharp": "canary",
+    "gatsby-typegen-filesystem": "canary",
+    "gatsby-typegen-sharp": "canary",
     "instagram-screen-scrape": "^2.0.0",
     "lodash": "^4.16.4",
     "mkdirp": "^0.5.1",
     "mousetrap": "^1.6.0",
     "progress": "^1.1.8",
+    "prop-types": "^15.5.8",
     "react-gravatar": "^2.6.1",
     "react-icons": "^2.2.3",
     "react-modal": "^1.7.6",

examples/gatsbygram/src/components/Avatar.js

@@ -0,0 +1,48 @@
+import * as PropTypes from "prop-types"
+import React from "react"
+import { rhythm } from "../utils/typography"
+
+const propTypes = {
+  user: PropTypes.shape({
+    avatar: PropTypes.string.isRequired,
+    username: PropTypes.string.isRequired,
+  }),
+}
+
+function Avatar({ user }) {
+  return (
+    <img
+      src={user.avatar}
+      alt={user.username}
+      css={{
+        display: `block`,
+        margin: `0 auto`,
+        borderRadius: `100%`,
+        width: rhythm(2),
+        height: rhythm(2),
+        [`@media (min-width: 460px)`]: {
+          width: rhythm(3),
+          height: rhythm(3),
+        },
+        [`@media (min-width: 525px)`]: {
+          width: rhythm(4),
+          height: rhythm(4),
+        },
+        [`@media (min-width: 600px)`]: {
+          width: `inherit`,
+          height: `inherit`,
+        },
+      }}
+    />
+  )
+}
+
+Avatar.propTypes = propTypes
+
+export default Avatar
+export const userFragment = graphql`
+  fragment Avatar_user on PostsJson {
+    avatar
+    username
+  }
+`

examples/gatsbygram/src/components/modal.js

@@ -7,25 +7,31 @@ import Close from "react-icons/lib/md/close"
 import findIndex from "lodash/findIndex"
 import mousetrap from "mousetrap"
 
-import { rhythm, scale } from "../utils/typography"
+import { rhythm } from "../utils/typography"
 
 class GatsbyGramModal extends React.Component {
+  static propTypes = {
+    isOpen: React.PropTypes.bool,
+    location: React.PropTypes.object.isRequired,
+    posts: React.PropTypes.array.isRequired,
+  }
+
   componentDidMount() {
-    mousetrap.bind("left", () => this.previous())
-    mousetrap.bind("right", () => this.next())
-    mousetrap.bind("spacebar", () => this.next())
+    mousetrap.bind(`left`, () => this.previous())
+    mousetrap.bind(`right`, () => this.next())
+    mousetrap.bind(`spacebar`, () => this.next())
   }
 
   componentWillUnmount() {
-    mousetrap.unbind("left")
-    mousetrap.unbind("right")
-    mousetrap.unbind("spacebar")
+    mousetrap.unbind(`left`)
+    mousetrap.unbind(`right`)
+    mousetrap.unbind(`spacebar`)
   }
 
   findCurrentIndex() {
     let index
-    index = findIndex(this.props.edges, edge => {
-      return edge.node.id === this.props.location.pathname.split(`/`)[1]
+    index = findIndex(this.props.posts, post => {
+      return post.id === this.props.location.pathname.split(`/`)[1]
     })
 
     return index
@@ -37,15 +43,15 @@ class GatsbyGramModal extends React.Component {
     }
     const currentIndex = this.findCurrentIndex()
     if (currentIndex || currentIndex === 0) {
-      const edges = this.props.edges
+      const posts = this.props.posts
       let nextPost
       // Wrap around if at end.
-      if (currentIndex + 1 === edges.length) {
-        nextPost = edges[0]
+      if (currentIndex + 1 === posts.length) {
+        nextPost = posts[0]
       } else {
-        nextPost = edges[currentIndex + 1]
+        nextPost = posts[currentIndex + 1]
       }
-      browserHistory.push(`/${nextPost.node.id}/`)
+      browserHistory.push(`/${nextPost.id}/`)
     }
   }
 
@@ -55,15 +61,15 @@ class GatsbyGramModal extends React.Component {
     }
     const currentIndex = this.findCurrentIndex()
     if (currentIndex || currentIndex === 0) {
-      const edges = this.props.edges
+      const posts = this.props.posts
       let previousPost
       // Wrap around if at start.
       if (currentIndex === 0) {
-        previousPost = edges.slice(-1)[0]
+        previousPost = posts.slice(-1)[0]
       } else {
-        previousPost = edges[currentIndex - 1]
+        previousPost = posts[currentIndex - 1]
       }
-      browserHistory.push(`/${previousPost.node.id}/`)
+      browserHistory.push(`/${previousPost.id}/`)
     }
   }
 
@@ -74,24 +80,24 @@ class GatsbyGramModal extends React.Component {
         onRequestClose={() => browserHistory.push(`/`)}
         style={{
           overlay: {
-            position: "fixed",
+            position: `fixed`,
             top: 0,
             left: 0,
             right: 0,
             bottom: 0,
-            backgroundColor: "rgba(0, 0, 0, 0.75)",
+            backgroundColor: `rgba(0, 0, 0, 0.75)`,
           },
           content: {
-            position: "absolute",
+            position: `absolute`,
             border: `none`,
             background: `none`,
             padding: 0,
             top: 0,
             bottom: 0,
             right: 0,
             left: 0,
-            overflow: "auto",
-            WebkitOverflowScrolling: "touch",
+            overflow: `auto`,
+            WebkitOverflowScrolling: `touch`,
           },
         }}
         contentLabel="Modal"
@@ -152,3 +158,10 @@ class GatsbyGramModal extends React.Component {
 }
 
 export default GatsbyGramModal
+
+export const modalFragment = graphql`
+  fragment Modal_posts on PostsJson {
+    id
+  }
+
+`

examples/gatsbygram/src/components/post-detail.js

@@ -1,5 +1,4 @@
 import React from "react"
-import HeartIcon from "react-icons/lib/fa/heart"
 
 import presets from "../utils/presets"
 import typography, { rhythm, scale } from "../utils/typography"
@@ -11,15 +10,16 @@ class PostDetail extends React.Component {
 
   render() {
     const {
-      image,
+      bigImage,
       likes,
       id,
       username,
       weeksAgo,
       text,
       avatar,
     } = this.props.post
-    const { big } = image.childImageSharp
+
+    const { big } = bigImage.childImageSharp
 
     const UserBar = () => (
       <div
@@ -191,3 +191,33 @@ class PostDetail extends React.Component {
 }
 
 export default PostDetail
+
+export const postDetailFragment = graphql`
+  fragment PostDetail_details on PostsJson {
+    # Specify the fields from the post we need.
+    username
+    avatar
+    likes
+    id
+    text
+    # Date fields have special arguments. This one computes
+    # how many weeks have passed since the post was created.
+    # All calculations like this (like all GraphQL query
+    # activity) happens at build-time! So has minimal cost
+    # for the client.
+    weeksAgo: time(difference: "weeks")
+    bigImage: image {
+      childImageSharp {
+        # Here we query for *multiple* image thumbnails to be
+        # created. So with no effort on our part, 100s of
+        # thumbnails are created. This makes iterating on
+        # designs effortless as we simply change the args
+        # for the query and we get new thumbnails.
+        big: responsiveSizes(maxWidth: 640) {
+          src
+          srcSet
+        }
+      }
+    }
+  }
+`