How to Integrate Retool with Meetup

To access Meetup's API, you need an OAuth application and an access token linked to a Meetup organizer account. Go to secure.meetup.com/meetup_api/oauth_consumers/ and click Create New Consumer. Fill in the application name (e.g., 'Retool Integration'), redirect URI (you can use https://retool.com as a placeholder if not building a user-facing OAuth flow), and application website. Click Save. You will receive an OAuth Consumer Key (this is your Client ID) and a Consumer Secret. Copy both — these are needed to generate access tokens. For the simplest Retool setup with a single organizer account, use the Meetup API Console at secure.meetup.com/meetup_api/console to generate an access token interactively. Log in, authorize the application, and Meetup will show you an access token. Access tokens for Meetup are long-lived but can be revoked, so treat them as sensitive credentials. For production integrations where you need ongoing token refresh without manual intervention, implement Meetup's full OAuth 2.0 authorization code flow: redirect users to Meetup's authorization URL, exchange the returned code for an access token and refresh token, then store the refresh token to generate new access tokens automatically. Retool's Custom Auth feature can automate this token refresh flow. Note your Meetup group's URL slug (the part after meetup.com/ in your group URL, e.g., 'london-javascript' from meetup.com/london-javascript/) — you will use this as a query variable in your GraphQL queries to scope data to your specific group.

Navigate to the Resources tab in Retool and click Add Resource. Select REST API from the resource type list. Configure the resource: - Name: 'Meetup GraphQL' - Base URL: https://api.meetup.com For authentication, select Bearer Token from the Auth dropdown and enter your Meetup OAuth access token. Add a default header that applies to all requests: - Key: Content-Type - Value: application/json Click Save Changes. To verify the resource works, create a test query. Because Meetup uses GraphQL, queries are always POST requests to the /gql endpoint with a JSON body containing the 'query' field. In the query editor: - Method: POST - Path: /gql - Body type: JSON - Body: { "query": "{ self { id name } }" } Click Run. If configured correctly, the response returns your Meetup account's ID and display name, confirming the bearer token and endpoint are working. If you receive a 401 error, the access token has expired — return to Meetup's API Console to generate a new one.

Meetup's GraphQL API uses a group query type to retrieve events for a specific Meetup group. The groupByUrlname query accepts the group's URL slug and returns event details including name, date, venue, RSVP count, and description. Create a new query using the Meetup GraphQL resource: - Method: POST - Path: /gql - Body type: Raw JSON - Body: set the body to a JSON object with a 'query' key containing your GraphQL query string The GraphQL query to fetch upcoming events looks like this (adapt the field selections based on what your dashboard needs): The response comes back as a nested GraphQL structure: data.groupByUrlname.upcomingEvents.edges, where each edge has a node containing the event fields. Write a transformer that extracts the nodes array and formats the date fields for display. Drag a Table component onto the Retool canvas and set its data source to the transformer output. Add columns for: Event Name, Date (formatted), Venue Name, RSVP Count, Max Capacity (if available), and a computed fill rate percentage. Sort the table by date ascending so the next event appears at the top.

1// GraphQL query body for upcoming events
2// Use this as the raw JSON body in the Retool query editor
3{
4  "query": "{ groupByUrlname(urlname: \"your-group-slug\") { id name upcomingEvents(input: { first: 20 }) { edges { node { id title dateTime venue { name address city } going rsvpSettings { rsvpLimit } description } } } } }"
5}
6
7// ---
8// JavaScript transformer to flatten the GraphQL response
9const edges = data?.data?.groupByUrlname?.upcomingEvents?.edges || [];
10
11return edges.map(({ node: event }) => {
12  const eventDate = event.dateTime ? new Date(event.dateTime) : null;
13  const rsvpLimit = event.rsvpSettings?.rsvpLimit || null;
14  const goingCount = event.going || 0;
15
16  return {
17    id: event.id,
18    title: event.title || 'Untitled Event',
19    date: eventDate ? eventDate.toLocaleDateString('en-US', {
20      weekday: 'short', year: 'numeric', month: 'short', day: 'numeric'
21    }) : 'Date TBD',
22    time: eventDate ? eventDate.toLocaleTimeString('en-US', {
23      hour: '2-digit', minute: '2-digit'
24    }) : '',
25    venue: event.venue?.name || 'Online / TBD',
26    city: event.venue?.city || '',
27    rsvp_count: goingCount,
28    capacity: rsvpLimit || 'Unlimited',
29    fill_rate: rsvpLimit ? ((goingCount / rsvpLimit) * 100).toFixed(0) + '%' : 'N/A'
30  };
31});

Once your events table is working, add a detail panel that shows who has RSVP'd to a specific event when a row is selected. The Meetup GraphQL API provides an event query type that returns the list of attendees. Create a second query using the Meetup GraphQL resource, configured to run only when an event is selected from the events table: - Method: POST - Path: /gql - Body: JSON object with a query targeting a specific event's RSVPs by event ID - Set the query to 'Only run when': {{ eventsTable.selectedRow !== null }} The GraphQL query for event RSVPs retrieves the list of members who have RSVP'd with their names and RSVP status. Note that detailed member profile information (email, profile URL) requires the querying account to be an organizer of the group. Write a transformer for the RSVP response that extracts the attendee list and creates a flat array with member name, RSVP status (yes/waitlist), and join date. Display this in a second Table component below the events table, or in a side panel. Use the event table's selectedRow to pass the selected event's ID into the RSVP query's GraphQL variables: {{ eventsTable.selectedRow.id }}. Add a Stat component showing the total RSVP count and waitlist size for the selected event, which gives a quick snapshot of event demand before reviewing the full list.

1// GraphQL query body for event RSVPs
2// Reference the selected event ID from the events table
3{
4  "query": "query EventAttendees($eventId: ID!) { event(id: $eventId) { id title going rsvps(input: { first: 100, status: YES }) { edges { node { member { id name } status } } } } }",
5  "variables": { "eventId": "{{ eventsTable.selectedRow.id }}" }
6}
7
8// ---
9// JavaScript transformer for RSVP response
10const rsvpEdges = data?.data?.event?.rsvps?.edges || [];
11
12return rsvpEdges.map(({ node: rsvp }) => ({
13  name: rsvp.member?.name || 'Unknown Member',
14  member_id: rsvp.member?.id || '',
15  status: rsvp.status || 'YES'
16}));

Add a historical view to your community dashboard by querying Meetup's past events and calculating attendance metrics. Use the groupByUrlname query with the pastEvents field to retrieve completed events with their RSVP and attendance counts. Create a third query using the Meetup GraphQL resource: - Method: POST - Path: /gql - Body: GraphQL query for past events, requesting event title, date, RSVP count, and attendance count (if available — Meetup provides 'going' count which reflects RSVPs, not check-in attendance) Write a transformer that converts the past events response into a chart-ready array with date and count fields. Bind this to a Retool Chart component configured as a Line chart or Bar chart, with the date on the X-axis and RSVP count on the Y-axis. This shows the trend of community interest in your events over time. Add a Stats row above the chart showing: total events in the last 12 months, average RSVPs per event, and the highest-attended event name and count. These headline numbers are useful for quarterly community reports and stakeholder presentations.

1// GraphQL query body for past events
2{
3  "query": "{ groupByUrlname(urlname: \"your-group-slug\") { pastEvents(input: { first: 24 }) { edges { node { id title dateTime going } } } } }"
4}
5
6// ---
7// JavaScript transformer for past events chart data
8const edges = data?.data?.groupByUrlname?.pastEvents?.edges || [];
9
10const chartData = edges
11  .map(({ node: event }) => ({
12    date: event.dateTime
13      ? new Date(event.dateTime).toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
14      : 'Unknown',
15    rsvp_count: event.going || 0,
16    event_title: event.title || 'Untitled'
17  }))
18  .reverse(); // reverse so oldest appears first on chart
19
20return chartData;