gatsby-source-ghibli

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

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

Website-Link: https://gatsby-ghibli-mikebudimon.netlify.com/

Credits

Big thanks to:

• Studio Ghibli API
• Tania Rascia's Tutorial
• GatsbyJS