Gatsby Book Launch

“The missing guide to the modern web” launches on Thursday, Sep 29th: Modular: The Web’s New Architecture

ContactSign Up for Free
Community Plugin
View plugin on GitHub

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

© 2022 Gatsby, Inc.