Now 100x Faster

Read the latest from Gatsby CTO Kyle Mathews Re-introducing Gatsby, a Reactive Site Generator

ContactSign Up for Free
Community Plugin
View plugin on GitHub

@lekoarts/gatsby-source-flickr

Source images from Flickr into Gatsby. You can leverage any GET endpoint from the Flickr REST API and pull the data directly into Gatsby’s GraphQL data layer.

Warning This plugin is in Alpha state (hence the v0.x range) and still in development. Please report any issues you find.

@lekoarts/gatsby-source-flickr is released under the MIT license. Current npm package version. Downloads per month on npm. Total downloads on npm. Website Follow @lekoarts_de

Install

npm install @lekoarts/gatsby-source-flickr

How to use

Add the plugin to your gatsby-config file:

gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@lekoarts/gatsby-source-flickr`,
      options: {}
    }
  ]
}

Plugin Options

api_key (required)

Your Flickr API key. Create an account on Flickr, go to App Garden to register an app and copy the API key.

Field type: String

{
  resolve: `@lekoarts/gatsby-source-flickr`,
  options: {
    api_key: `YOUR_API_KEY`,
  },
}

username (required)

Your Flickr username.

Field type: String

{
  resolve: `@lekoarts/gatsby-source-flickr`,
  options: {
    username: `LekoArts`,
  },
}

endpoints

Allows you to configure the endpoints that the plugin is requesting from Flickr. It sets people.getPublicPhotos as a default if no endpoints is defined.

Field type: Array

Default value: [{"method":"flickr.people.getPublicPhotos","args":{"extras":"description,last_update,date_taken,url_sq,url_t,url_s,url_q,url_m,url_n,url_z,url_c,url_l,url_o,media,views,original_format"}}]

{
  resolve: `@lekoarts/gatsby-source-flickr`,
  options: {
    endpoints: [
      {
        // Docs: https://www.flickr.com/services/api/flickr.photosets.getPhotos.html
        method: `flickr.photosets.getPhotos`,
        args: {
          photoset_id: `123`,
          // If you don't want to get the photoset from your Flickr account, you can pass the user_id of another user.
          user_id: `123`,
          extras: `geo,tags,owner_name`,
        }
      }
    ],
  },
}

endpoints[].method (required)

Refer to the Flickr API for available methods. You can use any GET API.

Field type: String

endpoints[].args

Pass any required or additional arguments to the method.

For example, photosets.getPhotos requires the api_key, photoset_id, and user_id. For convenience reasons, the plugin automatically adds the api_key and user_id to the arguments. You can override this by passing your own arguments though. So in the example above, you’d only need to pass photoset_id if you want to get a photoset from your Flickr account.

Field type: Object

endpoints[].extension

Unfortunately endpoints like photosets.getList only return the list of photosets, not each detailed photoset itself. They want you to first query the list of photosets to get the photoset_id and then use that photoset_id to query the detailed photoset with photosets.getPhotos. In this case, you can use the extension property to make this second API call.

Field type: Object

endpoints[].extension.method (required)

Refer to the Flickr API for available methods. You can use any GET API.

Field type: String

endpoints[].extension.mapping (required)

The mapping between a unique identifier from the first API call and the second API call. Delimited by a :. The left side is the property from the first call, the right side the second call.

So for example, with the photosets.getList method you get the id of each photoset. The method photosets.getPhotos requires photoset_id as an argument (which can come from the previous call). So the mapping should be id:photoset_id.

When the GraphQL nodes for this extension are created, a backreference to the first API call will be added. So in above example, the GraphQL nodes for the photosets.getPhotos method will have a photoset_id property.

Field type: String

endpoints[].extension.args

Pass any required or additional arguments to the method.

For example, photosets.getPhotos requires the api_key, photoset_id, and user_id. For convenience reasons, the plugin automatically adds the api_key and user_id to the arguments. You can override this by passing your own arguments though. So in the example above, you’d only need to pass photoset_id if you want to get a photoset from your Flickr account.

Field type: Object

© 2022 Gatsby, Inc.