gatsby-source-giphy-random

This is a fork of @jiyeonseo’s source plugin for pulling data into Gatsby from Giphy’s trending API, slightly altered to pull from Giphy’s random API instead. You can also supply a specific tag to pull random images from.

Prerequisites

• Create a Giphy app to get an API key.

Install

npm install --save gatsby-source-giphy-random

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-source-giphy-random',
    options: {
      api_key: '',
      rating: 'G',
      tag: 'pixel art',
    },
  },
],

Supporting .env files

It’s good practice to keep your keys in .env files like .env.development and .env.production. Node variables seem to only get pulled in by Gatsby when there’s a GATSBY_ prefix, so like so:

GATSBY_GIPHY_API_KEY=636869706d757369632e666d

You can then use Gatsby’s built-in dotenv module in your gatsby-config.js, pulling everything together like so:

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-giphy-random',
      options: {
        api_key: process.env.GATSBY_GIPHY_API_KEY,
        rating: 'G',
        tag: 'pixel art',
      },
    },
  ],
};

This way you can exclude the .env files when committing, and keep your secret API keys… secret. ;)

Options

api_key (REQUIRED)

The API key from Giphy Developer Dashboard.

rating (OPTIONAL)

Filters results by rating.

• Y
• G
• PG
• PG-13
• R

tag (OPTIONAL)

Specifies that the random image should come from a specific tag.

How to query

{
  giphyGif {
    id
    image_url
  }
}