raygervais / gatsby-source-unsplash

Source plugin for Gatsby to pull in unsplash photos from a collection

gatsby-source-unsplash

Source plugin for pulling photo data by collection into Gatsby from the official Unsplash API.

Install

npm install --save gatsby-source-unsplash

How to use

Before using the Unsplash API, you need to register as a developer and read the API Guidelines.

Note: Every application must abide by the API Guidelines. Specifically, remember to hotlink images, attribute photographers, and trigger a download when appropriate.

// In your gatsby-config.js
// Application id provided by Unsplash
// Collections must be public to return photos
plugins: [
  {
    resolve: `gatsby-source-unsplash`,
    options: {
      appId: `12345678`,
      collections: [
        `098765`
      ],
      // optional: will only get page 1, so increase this count to include > 10 photos
      perPage: `100`
    },
  },
];

How to query

Get all photo urls in reverse chronological order with the photographer's name:

query PhotosQuery {
    allUnsplashPhoto(sort: { fields: [created_at], order: DESC }) {
      edges {
        node {
          id
          user {
            id
            name
          }
          urls {
            full
            regular
            small
          }
          description
          created_at
        }
      }
    }
}

Get a specific photo's urls by id with links to photographer's Unsplash profile:

query PhotoQuery {
    unsplashPhoto(id: { eq: "GnY_mW1Q6Xc" }) {
        id
        description
        urls {
            full
            regular
            small
        }
        user {
            name
            links {
                html
            }
        }
    }
}