gatsby-source-plugin-unsplash

gatsby-source-plugin-unsplash

A Gatsby plugin for fetching photos from an Unsplash collection.

Demo :confetti_ball:

URL: https://gatsby-source-unsplash.netlify.com/

Repo: https://github.com/mattrothenberg/gatsby-unsplash-demo

Photos are sourced from this collection.

Installation

First, install the plugin with the package manager of your choice (NPM or Yarn).

yarn add gatsby-source-plugin-unsplash

Before you start configuring the plugin, you need to register for an Unsplash API Developer account. Once you have an account, you'll be able to grab an access key that you'll use to make authenticated API requests.

I know it's a little weird, but Unsplash's API endpoints call for passing along a clientId, but in the Unsplash Developer UI, this is called an Access Key.

Next, add the following to your gatsby.config.js. Only clientId and collectionId are required. I'd recommend following Gatsby's instructions for sourcing these values from an environment file, so you're not hard-coding sensitive keys in your codebase.

// Not necessary, but recommended!
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  {
    resolve: `gatsby-source-plugin-unsplash`,
    options: {
      collectionId: process.env.COLLECTION_ID,
      clientId: process.env.CLIENT_ID,
      perPage: 100
    },
  }
}

Now, you should have two new queries at your disposal when you run your Gatsby site, allUnsplashPhoto and unsplashPhoto. As you might guess, the former is used to pull all photos from the specified collection, whereas the latter is used to pluck individual images from that collection, given some filtering criteria.

You have available to you all of the fields from this API response, https://unsplash.com/documentation#get-a-collections-photos.

Additionally, this plugin adds a localImage field to each node so that you can use these images with gatsby-image and transform them with Sharp.

For example, the following query would yield –

{
  allUnsplashPhoto {
    edges {
      node {
        id
        urls {
          full
        }
      }
    }
  }
}

And this query,

{
  unsplashPhoto(id: { eq: "Ikf439frOLg" }) {
    id
    urls {
      full
    }
  }
}

...would yield:

.

Features

To be totally fair, this isn't the only Unsplash plugin for Gatsby. In fact, this plugin is largely inspired by https://www.gatsbyjs.org/packages/gatsby-source-unsplash/.

One improvement made by this plugin, however, is that it adds a localImage field to each node for greater flexibility around presenting the images.

{
  allUnsplashPhoto(limit: 10) {
    edges {
      node {
        id
        user {
          username
        }
        localImage {
          childImageSharp {
            fluid(maxWidth: 400, maxHeight: 250) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}

Todo

• Support multiple collections
• Support different endpoints