While working on a site I wanted to add a section where the latest Instagram posts would display. I came across gatsby-source-instagram. gatsby-source-instagram is a source plugin for sourcing data from Instagram.

Documentation:

https://www.gatsbyjs.org/packages/gatsby-source-instagram/

Install:

npm install --save gatsby-source-instagram

Gatsby-config.js

      resolve: `gatsby-source-instagram`,
      options: {
        username: `ADD_INSTAGRAM_PROFILE_HERE`,
      },

After the Install start your development Server by running

gatsby develop

Once it starts go to: localhost:8000/___graphql

Once you have your query go to the page where your query will go and paste it.

Your results will be passed down as props you can console.log(props) to view the result. Of course there are many ways to do this so pick whatever works for you. This was my result.

  console.log(props.data.allInstaNode.edges)

/*
Output: 
(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
    0:
        node:
            id: "B9rpueDpf1W"
            timestamp: 1584120884
            username: "INSTAGRAM_USERNAME"
            likes: 15
            original: "https://scontent-lax3-1.cdninstagram.com/v/t51.2885-15/e35/90053755_571327456808026_4665299398844294889_n.jpg?_nc_ht=scontent-lax3-1.cdninstagram.com&_nc_cat=110&_nc_ohc=wPVPtA_cq24AX-hXETC&oh=265e8abf199f42e053dfca4bb2af5c9e&oe=5E8F7B3A"
            __proto__: Object
            __proto__: Object
    1: {node: {…}}
    2: {node: {…}}
    3: {node: {…}}
*/

After seeing what I had to work with I modified my code and .map() to return a new array with each individual Instagram Post.

In my case I passed the data as props into a component named instagamSection where I structured how I wanted the galley to look like.

This is how it turned out to be if anyone was curious. Still not done but getting somewhere.

Qestions? Feel free to send me an email

contact@jimenez.tech