Unsplash for gatsby

This plugin for Gatsby will make images from Unsplash available in GraphQL queries.

Installation

Install plugin

yarn add gatsby-unsplash

In gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-unsplash`,
      options: {
        client_id: `YogTLGb37qYyNmkhC6GwYPo4HZNTYbWR9Cp1OABAXVI`,
        username: "beratbozkurt0",
      },
    },
  ],
}

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

Querying Unsplash Images

Once the plugin is configured, two new queries are available in GrapHQL: allUnsplashImage and unsplashImage. Here’s an example query to load all images:

  query {
    allUnsplashImage {
      edges {
        node {
          id
          urls {
            regular
            small
          }
          width
          height
        }
      }
    }
  }

TODO

• Get a list of photos uploaded by a user.
• Get a single page from the Editorial feed.
• Retrieve a single random photo, given optional filters.
• Get a single page of photo results for a query.
• Get a single page from the list of all collections.
• Get a single page from the list of all topics.

Inspiration

This readme is heavily based on Chris Searle’s gatsby-source-flickr