# gatsby-source-ghibli

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

![Gatsby Source Ghibli GraphiQL](https://i.imgur.com/67iYZd0.png)

## Installation

using npm:

```sh
npm i gatsby-source-ghibli
```

using yarn:

```sh
yarn add gatsby-source-ghibli
```

## How to use

```javascript
// 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.

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

Output:

```graphql
{
  "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/](https://ghibliapi.herokuapp.com/)

## Example Website using gatsby-source-ghibli

![Gatsby Ghibli Website](https://i.imgur.com/TZiwP8U.png)

### Website-Link: [https://gatsby-ghibli-mikebudimon.netlify.com/](https://gatsby-ghibli-mikebudimon.netlify.com/)

## Credits

Big thanks to:

- [Studio Ghibli API](https://ghibliapi.herokuapp.com/)
- [Tania Rascia's Tutorial](https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/)
- [GatsbyJS](https://www.gatsbyjs.org/)