Skip to main content
View plugin on GitHub
See starters using this

gatsby-source-ghibli

Query Studio Ghibli data right into your statically generated pages with Gatsby.

Gatsby Source Ghibli GraphiQL

Installation

using npm:

npm i gatsby-source-ghibli

using yarn:

yarn add gatsby-source-ghibli

How to use

// In your gatsby-config.js
module.exports = {
  plugins: ['gatsby-source-ghibli']
};

How to query the Studio Ghibli data using GraphQL

Below is a sample query for fetching all Studio Ghibli film nodes.

query {
  allGhibliFilm {
    edges {
      node {
        id
        title
        description
        director
        producer
        release_date
        rt_score
      }
    }
  }
}

Output:

{
  "data": {
    "allGhibliFilm": {
      "edges": [
        {
          "node": {
            "id": "cbcad8fe-1399-519e-88eb-86ccae600679",
            "title": "Castle in the Sky",
            "description": "The orphan Sheeta inherited a mysterious crystal that links her to the mythical sky-kingdom of Laputa. With the help of resourceful Pazu and a rollicking band of sky pirates, she makes her way to the ruins of the once-great civilization. Sheeta and Pazu must outwit the evil Muska, who plans to use Laputa's science to make himself ruler of the world.",
            "director": "Hayao Miyazaki",
            "producer": "Isao Takahata",
            "release_date": "1986",
            "rt_score": "95"
          }
        },
        ...
      ]
    }
  }
}

Query options:

  • allGhibliFilm
  • allGhibliPerson
  • allGhibliLocation
  • allGhibliSpecies
  • allGhibliVehicle

For more information about the Studio Ghibli API check the reference at https://ghibliapi.herokuapp.com/

Example Website using gatsby-source-ghibli

Gatsby Ghibli Website

Credits

Big thanks to:


Docs
Tutorials
Plugins
Blog
Showcase