DEV Community

Andri
Andri

Posted on • Originally published at andri.dk on

Making a Gatsby site from Meetup event data

As part of my talk preperation for Aalborg Frontend Meetup, I was going to do a walkthrough of a new Gatsby site and use gatsby-source-meetup to import the upcoming events.

Imagine my surprise, when I discovered that Meetup had stopped issuing API keys.

gatsby-source-ical

Gatsby has a wonderful collection of source plugins, and one of them happens to be gatsby-source-ical. I'll hand it to Meetup support; they did send me a useful link that indicated they I may not need an API, since they have a calendar feed available.

Finding the calendar export

First, find your group on Meetup, click "Events", "Calendar" and at the bottom there are feed links (if you're logged in).

For our group, the URL is: "https://www.meetup.com/Aalborg-Frontend/events/ical/"

Add the plugin

yarn add gatsby-source-ical
Enter fullscreen mode Exit fullscreen mode

gatsby-config.js

// In your gatsby-config.js
module.exports = {
    plugins: [
        // You can have multiple instances of this plugin
        // to read source nodes from different remote files
        {
            resolve: `gatsby-source-ical`,
            options: {
                name: `events`,
                url: `https://web-standards.ru/calendar.ics`
            }
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Query the data

{
    allIcal {
        edges {
            node {
                start
                end
                summary
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Why?

I put this together in case someone else is creating a meetup website with Gatsby and got frustrated with the API change.

Discussion (1)

Collapse
datsgabs profile image
Gabriel Lazcano

I think you could add code linting to the js files, great tutorial.