Now 100x Faster

Read the latest from Gatsby CTO Kyle Mathews Re-introducing Gatsby, a Reactive Site Generator

ContactSign Up for Free
Community Plugin
View plugin on GitHub


Source plugin for sourcing data from an Instagram JSON response. Simplified and readapted from the gatsby-source-instagram plugin from Orestis Ioannou.

The plugin creates the necessary Gatsby GraphQL nodes of an Instagram account from a local JSON file.

This is to avoid problems with public scraping, since Instagram is protected by a login wall.

Table of Contents


npm install gatsby-source-instagram-json

How to use

  • To use this public scraping method you will need the Instagram User id of the account you want to scrape. You can determine it by taking the following steps:

  1. Open a browser and go to the Instagram page of the user – e.g.
  2. Right-click on the web page to open the right-click context menu and select Page Source / View page source / Show Page Source. Safari users, please make sure that the developer tools are enabled – see Enabling Web Inspector - Apple Developer
  3. Search for profilePage_. The number that follows is the username id. If you view the page source of, you will find profilePage_8556131572. So, 8556131572 is the username id of the username
  • Query the instagram API from your browser. If necessary, login to your instagram account.



  • Save the whole response (copy & paste) into a .json file

    For example copy paste the response into instagramData.json and save it at the root of your Gatsby project

  • Configure the plugin in your gatsby-config.js as follows

// At the top of your gatsby-config.js
const instagramData = require("./instagramData.json")
// In your gatsby-config.js
plugins: [
    resolve: `gatsby-source-instagram-json`,
    options: {
      instagramData: instagramData,

How to query


The plugin tries to provide uniform results regardless of the way you choose to retrieve the information

Common fields include:

  • id
  • likes
  • original
  • timestamp
  • comments
  • caption
  • username
  • preview
  • mediaType
  • permalink
  • carouselImages
  • thumbnails
  • dimensions
query {
  allInstaNode {
    edges {
      node {
        localFile {
          childImageSharp {
            fixed(width: 150, height: 150) {
        thumbnails {
        dimensions {

Image processing

To use image processing you need gatsby-transformer-sharp, gatsby-plugin-sharp and their dependencies gatsby-image and gatsby-source-filesystem in your gatsby-config.js.

You can apply image processing on each instagram node. To access image processing in your queries you need to use the localFile on the InstaNode as shown above.

© 2022 Gatsby, Inc.