[WIP] Update Gatsbygram to make it work with current (unofficial) JSON API.

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()
  })
 }