Update Error Handling & Docs (#205)

* Updating docs to include info on common build errors

* Added error for login page API error

* Fixing formatting, added back accidently removed const

* Check Type Of Response

README.md

@@ -294,3 +294,13 @@ With these two information you can now use the plugin as:
   },
 },
 ```
+
+---
+
+## Common Build Errors
+
+### Cannot query field "allInstaNode" on type "Query" or Instagram API returned login page
+
+This error is typically caused by Instagram rate limiting calls to its API by returning a login screen. You can use the [Graph API](#instagram-graph-api-token) to avoid this error.
+
+If you are hosting on Netlify you may see this error appear more often when trying to build as it seems Netlify's servers get rate limited more frequently.

src/instagram.js

@@ -7,15 +7,18 @@ export async function scrapingInstagramPosts({ username }) {
       `https://instagram.com/graphql/query/?query_id=17888483320059182&variables={"id":"${username}","first":100,"after":null}`
     )
     .then((response) => {
-      const photos = []
-      response.data.data.user.edge_owner_to_timeline_media.edges.forEach(
-        (edge) => {
+      if(typeof response.data == "string" && response.data.includes("Login • Instagram")){
+        console.error(`gatsby-source-instagram: Instagram API returned login page due to rate limiting. If you wish to avoid this error please use Graph API. Read docs for more info:\nhttps://github.com/oorestisime/gatsby-source-instagram#common-build-errors`);
+        return null;
+      } else {
+        const photos = []
+        response.data.data.user.edge_owner_to_timeline_media.edges.forEach(edge => {
           if (edge.node) {
             photos.push(edge.node)
           }
-        }
-      )
-      return photos
+        });
+        return photos
+      }
     })
     .catch((err) => {
       console.warn(`\nCould not fetch instagram posts. Error status ${err}`)