Skip to content
Gatsby source plugin for building websites using the AniList GraphQL API as a data source
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.babelrc.js
.gitignore
.npmignore
.travis.yml
README.md
index.js
package.json

README.md

gatsby-source-anilist

This is a Gatsby source plugin to pull data from the Anilist GraphQL API. It is heavily based on the excellent gatsby-source-github (which I aslo use and cannot recommend enough) by Dustin Schau, who as far as I know came up with this stategy of connecting graphql databases. I modified this technique to work with the Anilist API with minimal changes.

Install

npm install gatsby-source-anilist --save-dev

Usage

// In your gatsby-config.js
plugins: [
	{
	  resolve: 'gatsby-source-anilist',
	  options: {
	    queries: [
	      `
	        {
	          MediaListCollection(userId: 122315, type:ANIME) {
	            lists {
	              name
	              entries {
	                id
	                media {
	                  id
	                  title {
	                    romaji
	                    english
	                    native
	                    userPreferred
	                  }
	                }
	              }
	              isCustomList
	              isSplitCompletedList
	              status
	            }
	          }
	        }
	      `
	    ]
	  }
	},
	...
]

Where queries is an array of valid graphql queries for Anilist. These can be tested live in AniList's GraphQL Explorer.

Querying Data

Returned results are added to Gatsby's GraphQL nodes with the renaming convention from the original gatsby-source-gtihub. See David's description here for more information.

Example

{
  resolve: 'gatsby-source-anilist',
  options: {
    queries: [
      `
        {
          MediaListCollection(userId: 122315, type:ANIME) {
            lists {
              name
              entries {
                id
                media {
                  id
                  title {
                    romaji
                    english
                    native
                    userPreferred
                  }
                }
              }
              isCustomList
              isSplitCompletedList
              status
            }
          }
        }
      `
    ]
  }
},

Produces:

{
  allAnilistMedialistcollection {
    edges {
      node {
        id
        lists {
          name
          entries {
            media {
              id
              title {
                romaji
                english
                native
                userPreferred
              }
            }
          }
          isCustomList
          isSplitCompletedList
          status
        }
      }
    }
  }
}
You can’t perform that action at this time.