gatsby-source-darksky

gatsby-source-darksky

This source plugin for Gatsby will make weather information from Dark Sky available in GraphQL queries.

Installation

# Install the plugin
yarn add gatsby-source-darksky

In gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-darksky',
      options: {
        key: 'YOUR_DARK_SKY_API_KEY',
        latitude: 'YOUR_LATITUDE',
        longitude: 'YOUR_LONGITUDE',
        exclude: ['DATA_BLOCKS_TO_EXCLUDE']
      },
    }
  ]
};

NOTE: To get a Dark Sky API key, register for a Dark Sky dev account. You can find your API key in the “Your Secret Key” section of the Dark Sky dev console.

Configuration Options

The configuration options for this plugin mirror the forecast request parameters. Please review those docs for more details.

Option	Default	Description
key		[required] Your Dark Sky API key
latitude		[required] The latitude of a location (in decimal degrees). Positive is north, negative is south.
longitude		[required] The longitude of a location (in decimal degrees). Positive is east, negative is west.
exclude		Exclude some number of data blocks from the API response. This is useful for reducing latency and saving cache space. The value blocks should be a comma-delimeted list (without spaces) of any of the following: "currently", "minutely", "hourly", "daily", "alerts", "flags"

Example Configuration

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-darksky',
      options: {
        key: process.env.DARK_SKY_API_KEY,
        latitude: `42.3411789`,
        longitude: `-71.7315589`,
        exclude: [`minutely`, `hourly`, `flags`]
      }
    }
  ]
};

Querying Dark Sky weather information

Once the plugin is configured, one new query is available in GraphQL: allWeatherData.

Here’s an example query to load the current weather conditions along with the forecast for the next week:

query WeatherQuery {
  allWeatherData {
    edges {
      node {
        currently {
          time
          summary
          temperature
          windSpeed
          windBearing
        }
        daily {
          data {
            time
            summary
            temperatureMin
            temperatureMax
            windSpeed
            windBearing
          }
        }
      }
    }
  }
}

See the Dark Sky API docs or the GraphiQL UI for info on all returned fields.