[WIP] Update Gatsbygram to make it work with current (unofficial) JSO…

…N API. (#3349)

* Update Gatsbygram to make it work with current (unofficial) JSON API.

* Revert back to previous data structure; add case study URL to README.

examples/gatsbygram/README.md

@@ -4,3 +4,7 @@ https://gatsbygram.gatsbyjs.org/
 
 Built with Gatsby 1.0 as a demo of Gatsby's new built-in image processing
 capabilities.
+
+To read more about this example, check out the [Gatsbygram Case Study][1]!
+
+[1]: (https://www.gatsbyjs.org/blog/gatsbygram-case-study/)

examples/gatsbygram/package.json

@@ -40,6 +40,7 @@
     "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
     "test": "echo \"Error: no test specified\" && exit 1",
     "develop": "gatsby develop",
+    "dev": "gatsby develop",
     "build": "gatsby build",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public"
   }

examples/gatsbygram/scrape.js

@@ -1,9 +1,9 @@
-const fs = require("fs")
-const request = require("request")
-const mkdirp = require("mkdirp")
-const ProgressBar = require("progress")
-const { get } = require("lodash")
-const download = require("./utils/download-file")
+const fs = require(`fs`)
+const request = require(`request`)
+const mkdirp = require(`mkdirp`)
+const ProgressBar = require(`progress`)
+const { get } = require(`lodash`)
+const download = require(`./utils/download-file`)
 
 const username = process.argv[2]
 
@@ -14,7 +14,7 @@ You didn't supply an Instagram username!
 Run this command like:
 
 node scrape.js INSTAGRAM_USERNAME
-              `
+    `
   )
   process.exit()
 }
@@ -38,36 +38,31 @@ let posts = []
 
 // Write json
 const saveJSON = _ =>
-  fs.writeFileSync(`./data/posts.json`, JSON.stringify(posts, "", 2))
+  fs.writeFileSync(`./data/posts.json`, JSON.stringify(posts, '', 2))
 
 const getPosts = maxId => {
-  let url = `https://www.instagram.com/${username}/media`
-  if (maxId) url += `?max_id=${maxId}`
+  let url = `https://www.instagram.com/${username}/?__a=1`
+  if (maxId) url += `&max_id=${maxId}`
 
   request(url, { encoding: `utf8` }, (err, res, body) => {
     if (err) console.log(`error: ${err}`)
     body = JSON.parse(body)
-    // Parse posts
-    let lastId
-    body.items
-      .filter(item => item.type === `image`)
+    body.user.media.nodes
+      .filter(item => item[`__typename`] === `GraphImage`)
       .map(item => {
         // Parse item to a simple object
         return {
           id: get(item, `id`),
           code: get(item, `code`),
-          username: get(item, `user.username`),
-          avatar: get(item, `user.profile_picture`),
-          time: toISO8601(get(item, `created_time`)),
-          type: get(item, `type`),
+          time: toISO8601(get(item, `date`)),
+          type: get(item, `__typename`),
           likes: get(item, `likes.count`),
           comment: get(item, `comments.count`),
-          text: get(item, `caption.text`),
-          media: get(item, `images.standard_resolution.url`, ``).replace(
-            `/s640x640`,
-            ``
-          ),
+          text: get(item, `caption`),
+          media: get(item, `display_src`),
           image: `images/${item.code}.jpg`,
+          username: get(body, `user.username`),
+          avatar: get(body, `user.profile_pic_url`),
         }
       })
       .forEach(item => {
@@ -79,12 +74,10 @@ const getPosts = maxId => {
 
         // Add item to posts
         posts.push(item)
-
-        // Save lastId for next request
-        lastId = item.id
       })
 
-    if (posts.length < 100 && get(body, `more_available`)) getPosts(lastId)
+    const lastId = get(body, `user.media.page_info.end_cursor`)
+    if (posts.length < 100 && lastId) getPosts(lastId)
     else saveJSON()
   })
 }