Meetup

Go to meetup.com/api/oauth/list while logged into your Meetup organizer account. Click 'Register a new consumer' (or 'Create new OAuth consumer' depending on the current UI). Fill in the application name, description, and a redirect URI. For initial testing you can use a localhost URL (e.g., http://localhost:8888/callback) — you will replace this with your Bubble app URL later. Note your OAuth consumer key and consumer secret. To complete the OAuth flow and get an access token, you need to go through Meetup's authorization code flow: 1. Direct a browser to: https://secure.meetup.com/oauth2/authorize?client_id=[YOUR_CONSUMER_KEY]&response_type=code&redirect_uri=[YOUR_REDIRECT_URI] 2. Authorize the application in the Meetup OAuth dialog. 3. Exchange the returned code for an access token by making a POST to https://secure.meetup.com/oauth2/access?client_id=[KEY]&client_secret=[SECRET]&grant_type=authorization_code&redirect_uri=[URI]&code=[CODE]. The response includes access_token, refresh_token, and token_type=bearer. Store the access_token — this is the Bearer token for your API Connector configuration. For an organizer account, ensure the OAuth authorization dialog shows scopes that include ageless (for long-lived tokens) and event_management if you need to create or manage events. A plain member token will only show limited event data in the API responses. Note: Meetup's access token lifespan and refresh requirements vary — check the current documentation at meetup.com/meetup_api for your specific token type's expiry.

1// OAuth authorization URL
2https://secure.meetup.com/oauth2/authorize
3  ?client_id=<your_consumer_key>
4  &response_type=code
5  &redirect_uri=<your_redirect_uri>
6
7// Token exchange (POST)
8POST https://secure.meetup.com/oauth2/access
9Content-Type: application/x-www-form-urlencoded
10
11client_id=<consumer_key>
12&client_secret=<consumer_secret_private>
13&grant_type=authorization_code
14&redirect_uri=<your_redirect_uri>
15&code=<authorization_code>
16
17// Response
18{
19  "access_token": "abc123...",
20  "token_type": "bearer",
21  "expires_in": null
22}

Meetup's single GraphQL endpoint requires a specific configuration in Bubble's API Connector that differs from REST API setup. Go to Plugins → API Connector → Add another API. Name it 'Meetup GraphQL'. Set one shared header: - Key: Authorization - Value: Bearer [paste your access token] - Check the 'Private' checkbox Now add a call. Name it 'Query'. Set: - Method: POST - URL: https://api.meetup.com/gql - Body type: JSON In the body section, add the JSON body structure. Use a dynamic variable named 'query' so different GraphQL strings can be passed from workflows: Click 'Add parameter' and set Key: query, Value: [dynamic], mark as a Body parameter. Click 'Add parameter' again: Key: variables, Value: {}, mark as Body parameter (static JSON object). For the Initialize call, you need to send a real GraphQL query string. Enter a test query for your Meetup group in the query parameter field: { groupByUrlname(urlname: \"YOUR-GROUP-URLNAME\") { id name events(input: {first: 10}) { edges { node { id title dateTime description venue { name city } going } } } } } Replace YOUR-GROUP-URLNAME with your actual Meetup group's URL name (the part after meetup.com/ in your group's URL). Click Initialize call. Bubble will hit the live endpoint and detect the response fields. If initialization succeeds, you will see the nested field structure detected. If it returns 'There was an issue setting up your call', check that your Bearer token is valid and the group URL name is correct.

1{
2  "method": "POST",
3  "url": "https://api.meetup.com/gql",
4  "headers": {
5    "Authorization": "Bearer <your_token_private>",
6    "Content-Type": "application/json"
7  },
8  "body": {
9    "query": "<dynamic_graphql_query_string>",
10    "variables": {}
11  }
12}
13
14// Example events query string:
15"{ groupByUrlname(urlname: \"YOUR-GROUP-URLNAME\") { id name events(input: {first: 10}) { edges { node { id title dateTime description venue { name city } going } } } } }"

Meetup's GraphQL response nests event data four levels deep: data → groupByUrlname → events → edges → [] → node → (title, dateTime, etc.). Bubble's Repeating Group cannot directly bind to an array this deep in the response structure. You need to flatten it first using the Toolbox plugin's 'Run JavaScript' action. Ensure the Toolbox plugin is installed (Plugins → Add plugins → search 'Toolbox'). In your page's workflow, after calling the Meetup GraphQL API Connector, add the step: Toolbox → Run JavaScript. In the JavaScript code field, write the flattening function: The JavaScript receives the API Connector response as a variable. Extract the edges array, map each edge to a flat object with the fields you need, then output the result. Bubble's Toolbox plugin surfaces the JavaScript return value as a result that can be stored in a custom state. Create a custom state on your page (or any element) of type 'text' and call it 'events_json'. After the JavaScript step, store its result in this custom state. Then add another JavaScript step that parses the JSON string back into a list that Bubble can iterate. Alternatively, use a Bubble data type (Event) as the store: in the JavaScript result handler, loop through the flattened array and use 'Create a new thing' for each event, storing id, title, date_time, venue_name, and rsvp_count in the Event data type. Clear and repopulate on each refresh to avoid duplicates (use the event's Meetup id as a deduplication key with 'Make changes to a thing' if id already exists). The database storage approach (creating Event things) is more reliable than custom state for Repeating Groups — it survives page refreshes and works with Bubble's search and filter system.

1// Toolbox Run JavaScript — flatten Meetup GraphQL response
2// In the 'Script' field of the Toolbox Run JavaScript action:
3
4var responseData = JSON.parse(properties.meetup_response);
5var edges = responseData.data.groupByUrlname.events.edges;
6
7var flatEvents = edges.map(function(edge) {
8  var node = edge.node;
9  return {
10    id: node.id,
11    title: node.title,
12    date_time: node.dateTime,
13    description: node.description ? node.description.slice(0, 300) : '',
14    venue_name: node.venue ? node.venue.name : 'Online',
15    venue_city: node.venue ? node.venue.city : '',
16    going_count: node.going || 0
17  };
18});
19
20// Check for GraphQL errors
21if (responseData.errors && responseData.errors.length > 0) {
22  bubble_fn_result({ error: responseData.errors[0].message, events: [] });
23} else {
24  bubble_fn_result({ error: '', events: JSON.stringify(flatEvents) });
25}

With flattened event data in a Bubble data type or custom state, build the UI to display upcoming Meetup events. If you stored events in a Bubble data type (recommended): add a Repeating Group to your page. Set 'Type of content' to 'Event' (your custom type). Set 'Data source' to 'Do a search for Events, sorted by date_time ascending'. Add filter elements: a date range picker that sets a conditional 'date_time is after [start date]' search constraint, and a text search on venue_name or title. Inside each Repeating Group row, add: - A text element bound to 'Current cell's Event's title' - A date/time element bound to 'Current cell's Event's date_time' formatted as a human-readable string - A text element showing 'Current cell's Event's going_count + " attending"' - A text element for venue_name - A button 'RSVP' that triggers the RSVP mutation workflow (Step 5) Add a cache freshness element: a text element showing 'Last updated: [most recent Event's Created Date]'. This tells users the data is cached, not live. Add a 'Refresh Events' button that triggers the full workflow chain: call the Meetup GraphQL API Connector → run the Toolbox flatten JavaScript → update Event records in the database. Use a 5-minute gate: only refresh if the most recent Event record's Created Date is more than 5 minutes ago, to avoid unnecessary API calls if the user clicks Refresh repeatedly. If you are using custom state instead of a data type: set the Repeating Group data source to the custom state list, and note that the state will be empty on page load until a workflow populates it. Add a 'Page is loaded' workflow that triggers the data fetch automatically.

Read queries and write mutations in GraphQL go to the same endpoint, but they are semantically different — a mutation query changes data on Meetup's side. Configure a separate API Connector call for mutations to keep your read and write logic clearly separated. In the Meetup GraphQL API Connector, click 'Add new call'. Name it 'Mutation'. Set: - Method: POST - URL: https://api.meetup.com/gql - Body type: JSON - Body parameters: query (dynamic), variables (dynamic — for mutation variables) For the RSVP mutation, the GraphQL mutation string looks like: mutation { rsvp(input: {eventId: \"[EVENT_ID]\", rsvp: YES}) { event { id title } rsvp { response } } } Make eventId a dynamic Bubble variable so the RSVP workflow can pass the specific event's Meetup id. In Bubble's workflow editor, create a workflow triggered by the 'RSVP' button click. Add steps: 1. Show a confirmation popup ('Are you sure you want to RSVP to [event title]?'). 2. On confirmation: call the Meetup Mutation API Connector call with the current event's id as the eventId variable. 3. After the call: run a Toolbox JavaScript step to check the response for errors (same error-checking pattern as Step 3 — GraphQL returns 200 even on mutation failures). 4. Show a success or error alert based on the JavaScript check result. 5. Refresh the event data to update the going_count displayed in the row. Note: RSVP mutations require an organizer or member token with the appropriate scope. If the mutation returns an errors array with 'Not authorized', the OAuth token scope does not include RSVP write access — re-authorize with a broader scope. RapidDev's team has connected Bubble apps to GraphQL APIs including Meetup for developer relations teams — if the mutation error handling is getting complex, a free scoping call at rapidevelopers.com/contact can save hours of debugging.

1// RSVP GraphQL mutation string
2"mutation { rsvp(input: {eventId: \"<dynamic_event_id>\", rsvp: YES}) { event { id title } rsvp { response } } }"
3
4// API Connector call configuration
5{
6  "method": "POST",
7  "url": "https://api.meetup.com/gql",
8  "headers": {
9    "Authorization": "Bearer <your_token_private>",
10    "Content-Type": "application/json"
11  },
12  "body": {
13    "query": "<dynamic_mutation_string>",
14    "variables": {"eventId": "<dynamic_event_id>"}
15  }
16}

Two final reliability improvements will make your Meetup integration production-ready: robust GraphQL error handling and storing the group URL name in a Bubble option set rather than hardcoding it in query strings. For error handling: create a reusable Toolbox JavaScript function (or add to each relevant step) that parses the GraphQL response and routes to success or failure paths. GraphQL errors arrive in the format {errors: [{message: '...', locations: [...], path: [...]}]}. The most common errors you will encounter: - 'Not authorized' — OAuth token scope is insufficient for the requested operation - 'Group not found' — the urlname in the query does not match an existing Meetup group - 'Argument type mismatch' — a variable in the query is the wrong type (e.g., passing a number where a string is expected) In Bubble, after each API Connector call, add a conditional branch: if the JavaScript error-check returns a non-empty error string, show an alert with the error message and halt the workflow. If it returns empty (no errors), continue to the data-binding steps. For the group URL name: create a Bubble option set called 'MeetupConfig' with one attribute (group_urlname) and one option set value containing your group's URL name. Reference this option set in your GraphQL query string builder instead of hardcoding the URL name as a text string. This way, changing the Meetup group (e.g., rebranding the community, renaming the Meetup group) requires updating one option set value rather than finding and updating every hardcoded reference across workflows. Note: changing your Meetup group's URL name (on meetup.com) will break the query if you have hardcoded the old name. The option set approach makes this a one-field update instead of a debugging hunt.

1// Toolbox error checking JavaScript
2var response = JSON.parse(properties.graphql_response);
3
4if (response.errors && response.errors.length > 0) {
5  var errorMsg = response.errors.map(function(e) { return e.message; }).join(', ');
6  bubble_fn_result({ has_error: 'yes', error_message: errorMsg });
7} else if (!response.data) {
8  bubble_fn_result({ has_error: 'yes', error_message: 'Empty response from Meetup API' });
9} else {
10  bubble_fn_result({ has_error: 'no', error_message: '' });
11}