Use the Flickr API to fetch images with Nuxt.js

The problem

I was building a website using Netlify CMS. However, Git is not really a great tool when it comes to manage a lot of images. I had to find a simple image management tool, so they're not stored directly in the Git repository.

Then I thought about Flickr and how I could use their API to fetch images from a user or an album.

Endpoints

Now we have to check the available endpoints of the Flickr API to find the ones we interested in. For my case, I needed the flickr.people.getPhotos endpoint to fetch the list of images fo a specific user, and then for each image the flickr.photos.getSizes endpoint since I needed exact sizes for the layout library I used.

Fetch images

In the page component, I used the asyncData method. First, let's get the images:

async asyncData({ $axios, $config: { apiKey, userId, flickrUrl } }) {
  const params = {
    api_key: apiKey,
    user_id: userId,
    format: 'json',
    nojsoncallback: true
  }

  let { data: flickrPhotos } = await $axios.get(flickrUrl, {
    params: {
      ...params,
      method: 'flickr.people.getPhotos'
    }   
  })

  flickrPhotos = flickrPhotos.photos.photo

  ...
}

apiKey, userId and flickrUrl are environments variables defined in the privateRuntimeConfig option of the nuxt.config.js file. They are then available through the $config attribute of the context object.

Then get their sizes:

let photos = []
for (const photo in flickrPhotos) {
  const { data: flickrSizes } = await $axios.get(flickrUrl, {
    params: {
      ...params,
      method: 'flickr.photos.getSizes',
      photo_id: flickrPhotos[photo].id
    }
  })

  const sizes = flickrSizes.sizes.size

  photos.push({
    id: flickrPhotos[photo].id,
    title: flickrPhotos[photo].title,
    meta: sizes
  })
}

return {
  photos
}

The images will be available through the photos object, and can be passed to any desired component.