Now that we’re ready to start figuring out how we’re going to get some data, we gotta think about how that works.

In Eleventy, data is merged from multiple different sources before the template is rendered. The data is merged in what Eleventy calls the Data Cascade.

Without diving too deep ( don’t worry Ben has you covered with this article to explore more in depth) there are 6 types of data in the cascade as of 1.0 (highest priority to lowest):

1. Computed Data
2. Template Data Files
3. Directory Data Files (and ascending Parent Directories)
4. Front Matter Data in Layouts
5. Configuration API Global Data
6. Global Data Files

We’ll have used a combination of these throughout building this project.

Specifically though we’re going to be focusing on fetching data from Discord from a javascript function in a global data file that we’ll create.

Inside of src/_data we’ll create a new file named events.js. Using our environment variables DISCORD_BOT_TOKEN & DISCORD_GUILD_ID we can make a fetch to our events endpoint, grab our events, and inject them into our templates.

Our file will look like this:

// src/_data/events.js

const fetch = require('node-fetch');
require("dotenv").config();

module.exports = async function () {
  const res = await fetch(`https://discord.com/api/v9/guilds/${process.env.DISCORD_GUILD_ID}/scheduled-events`, {
    method: "GET",
    headers: {
      "Authorization": `Bot ${process.env.DISCORD_BOT_TOKEN}`,
    }
  })

  const data = await res.json()

  return data
}

If all was successful, and you have an event created inside of your server, we should be seeing an object containing the event data looking something like this