Monday.com

Log in to your monday.com account and click your avatar in the top-right corner of the screen, then click Administration (you must be an admin on the account). In the left sidebar of the Admin panel, click the API section. You will see a Personal API Token for your account — this is the v2 token used for all API calls. Click 'Regenerate' to get a fresh token if one does not exist, or copy the existing token. The token is a long alphanumeric string. Copy it and store it somewhere safe for the next step — you will paste it into your Cloud Function's environment variables, not into FlutterFlow. Do not paste it into any FlutterFlow field at this stage. Understand what this token grants: it has access to all boards, items, updates, and user data in your monday.com account. In the context of a client app like FlutterFlow, this means it must never appear in an API Call header, an App State variable, or any field that is compiled into the app binary. The only safe place for this token is inside a server-side function that your FlutterFlow app calls. This is the core security principle for this entire integration.

Open the Firebase Console (console.firebase.google.com) and select or create a Firebase project. In the left sidebar, click Functions, then click Get Started and follow the prompts to enable Cloud Functions if you have not already. You will need to upgrade to the Blaze (pay-as-you-go) plan to deploy functions — the free tier includes a generous allocation that covers testing and low-traffic apps. Create a new Cloud Function. In the Functions dashboard, click Create Function. Name it `mondayProxy`. Set the trigger to HTTP — this gives it a public URL that FlutterFlow will call. In the function's source code editor, paste the Node.js code shown below. In the Runtime environment variables section, add a variable named `MONDAY_TOKEN` with the value of your API v2 token from Step 1. This keeps the token out of your code and out of your app. Deploy the function. After a minute or two, Firebase will give you a function URL that looks like `https://us-central1-your-project.cloudfunctions.net/mondayProxy`. Copy this URL — it is what you will configure in your FlutterFlow API Call in the next step. The function receives a GraphQL query string from FlutterFlow, forwards it to monday.com with the Authorization header, and returns the parsed board/item data as clean JSON.

1const functions = require('firebase-functions');
2const fetch = require('node-fetch');
3
4exports.mondayProxy = functions.https.onRequest(async (req, res) => {
5  res.set('Access-Control-Allow-Origin', '*');
6  res.set('Access-Control-Allow-Methods', 'POST, OPTIONS');
7  res.set('Access-Control-Allow-Headers', 'Content-Type');
8
9  if (req.method === 'OPTIONS') {
10    res.status(204).send('');
11    return;
12  }
13
14  const { query, variables } = req.body;
15  const token = process.env.MONDAY_TOKEN;
16
17  try {
18    const response = await fetch('https://api.monday.com/v2', {
19      method: 'POST',
20      headers: {
21        'Content-Type': 'application/json',
22        'Authorization': token,
23        'API-Version': '2024-01'
24      },
25      body: JSON.stringify({ query, variables: variables || {} })
26    });
27
28    const data = await response.json();
29
30    // Flatten column_values to key-value pairs for easy FF binding
31    if (data.data && data.data.boards) {
32      data.data.boards = data.data.boards.map(board => ({
33        ...board,
34        items_page: {
35          ...board.items_page,
36          items: (board.items_page?.items || []).map(item => ({
37            id: item.id,
38            name: item.name,
39            columns: Object.fromEntries(
40              (item.column_values || []).map(cv => [cv.id, cv.text || cv.value || ''])
41            )
42          }))
43        }
44      }));
45    }
46
47    res.json(data);
48  } catch (err) {
49    res.status(500).json({ error: err.message });
50  }
51});

In your FlutterFlow project, click API Calls in the left navigation panel. Click + Add and select Create API Group. Name the group 'Monday' and set the Base URL to your Cloud Function URL from Step 2 (for example, `https://us-central1-your-project.cloudfunctions.net/mondayProxy`). Because the token lives in the Cloud Function environment, there are no shared headers to configure in FlutterFlow — the API Group needs no Authorization header. Inside the API Group, click + Add Call to create the first API Call. Name it 'GetBoards'. Set the method to POST. Leave the endpoint path empty — all requests go to the function's root URL. Switch to the Body tab and set the body type to JSON. In the JSON body field, add the GraphQL query as a variable: set `query` to a variable named `graphqlQuery` using the `{{ variable }}` syntax, and `variables` to an optional object. Switch to the Variables tab and add a variable named `graphqlQuery` of type String with the default value being your board-fetch query (see the code block below). This means you can change what data you fetch by changing the query string sent from the app, without creating a new API Call for each data shape you need — one Call covers boards, items, column values, and mutations. Click Test. In the test panel, paste your boards query into the `graphqlQuery` field, then click Run Test. If the function is deployed correctly, you should see a JSON response with your board data nested under `data.boards`. If you see a 401 error, the function's `MONDAY_TOKEN` environment variable is missing or incorrect — go back to Firebase Console and check the Runtime environment variables.

1{
2  "query": "{{ graphqlQuery }}",
3  "variables": {}
4}
5
6// Example graphqlQuery value for fetching boards + items + column values
7// (paste this as the variable value in the FlutterFlow test panel):
8// query {
9//   boards(limit: 10) {
10//     id
11//     name
12//     items_page(limit: 50) {
13//       items {
14//         id
15//         name
16//         column_values {
17//           id
18//           text
19//           value
20//         }
21//       }
22//     }
23//   }
24// }

In your FlutterFlow project, click the Data Types section in the left navigation panel. Click + Add Data Type. Name it 'MondayItem' and add the following fields: `id` (String), `name` (String), and any column values you want to display — for example, `status` (String), `dueDate` (String), and `assignee` (String). The proxy function in Step 2 flattens the nested `column_values` array into a simple key-value object, so you can reference your columns by their ID using a JSON path like `$.data.boards[0].items_page.items[*].columns.status__1` (replace `status__1` with your actual column ID from the monday.com board). Now navigate to the screen where you want to show the board data. In the Action Flow Editor, add an action on the screen's On Load event: select Backend/API Call → Monday → GetBoards. Set the `graphqlQuery` variable to the board query string. After the API Call completes, store the response in an App State variable of type List (using your MondayItem Custom Data Type). Add a ListView widget to the screen. In the ListView's generate children from variable setting, select your App State list. Inside the list item template, add a Card widget with a Text widget bound to `item.name`, another Text widget for the status column, and conditional color on the status text (green for Done, orange for Working on it, red for Stuck) using conditional visibility or a custom function. To create or update items, add a new API Call in the same API Group named 'CreateItem'. The proxy accepts the same GraphQL mutation syntax — simply change the query variable to a mutation string instead of a query string. For example, a mutation to create an item takes the board ID, group ID, and item name as variables passed in the `variables` object.

1// JSON Paths for binding (after proxy flattening):
2// Board names:      $.data.boards[*].name
3// Board IDs:        $.data.boards[*].id
4// Item names:       $.data.boards[0].items_page.items[*].name
5// Item IDs:         $.data.boards[0].items_page.items[*].id
6// Status column:    $.data.boards[0].items_page.items[*].columns.status__1
7// Date column:      $.data.boards[0].items_page.items[*].columns.date4
8
9// Mutation example (to create an item):
10// mutation {
11//   create_item (
12//     board_id: 1234567890,
13//     group_id: "topics",
14//     item_name: "New task from FlutterFlow"
15//   ) {
16//     id
17//   }
18// }

Monday.com's GraphQL API has two types of limits you need to handle gracefully: the request rate limit (approximately 60 requests per minute on most plans) and the complexity budget (a per-query cost based on how many nested objects are fetched). If you exceed either limit, the API returns a 429 status code or a JSON error object with a `error_code` of `ComplexityException`. In your FlutterFlow action flow, after each Monday API Call, add a conditional check on the API Call response's HTTP status code. If the status is 429 or if the JSON response body contains `errors[0].extensions.code` equal to `ComplexityException`, show a user-facing message ('Board data is loading, please wait a moment') and schedule a retry after a short delay using FlutterFlow's Wait action (set to 3-5 seconds). To avoid hitting the complexity budget in the first place, keep your GraphQL query focused: only fetch the columns you actually display, limit item pages to 50 items at a time, and avoid nesting more than two levels deep (boards → items → column_values is fine; adding subitems or updates to the same query increases complexity). Use pagination for large boards: monday.com's `items_page` supports a `cursor` field for fetching the next page of items — add a 'Load More' button to your ListView that sends the next cursor value as a variable in a follow-up API Call. Add a pull-to-refresh gesture to the ListView (FlutterFlow has a built-in Refresh Indicator widget) so users can manually refresh board data without the app automatically polling. Automatic polling every few seconds will quickly exhaust your rate limit on busier boards.

1// Paginated items query using cursor:
2// query GetItems($boardId: ID!, $cursor: String) {
3//   boards(ids: [$boardId]) {
4//     items_page(limit: 50, cursor: $cursor) {
5//       cursor
6//       items {
7//         id
8//         name
9//         column_values { id text }
10//       }
11//     }
12//   }
13// }