How to Integrate Retool with Wave

Navigate to Wave's developer portal. Log into your Wave account at https://www.waveapps.com, then access the developer section through Wave's Help Center or directly at https://developer.waveapps.com. Look for the API Apps section or Applications dashboard — from here you can create a new API application. Click Create Application (or similar, depending on the current Wave developer portal UI). Fill in the required fields: - Application Name: e.g., 'Retool Dashboard' - Homepage URL: your Retool instance URL (e.g., https://yourorg.retool.com) - Redirect URI: for Retool Cloud, use https://oauth.retool.com/oauth/oauthcallback. For self-hosted Retool, use https://your-retool-instance.com/oauth/oauthcallback. Once the application is created, Wave will display your Client ID and Client Secret. Note both of these carefully. Also note the OAuth 2.0 endpoints: - Authorization URL: https://api.waveapps.com/oauth2/authorize - Token URL: https://api.waveapps.com/oauth2/token Wave's OAuth scopes for full access include: account:* (access account data), business:* (read/write business data), invoice:* (create and manage invoices), customer:* (manage customers). Check Wave's current scope documentation as available scopes may vary by plan. Store your Client ID and Client Secret — you will use them in the Retool resource configuration in the next step.

Open Retool and go to the Resources tab in the sidebar. Click Add Resource. In the resource type search, type 'GraphQL' and select GraphQL from the list. This opens the GraphQL resource configuration form — distinct from REST API, as it supports schema introspection and type-aware query building. Configure the resource: - Name: 'Wave GraphQL API' - Base URL: https://gql.waveapps.com/graphql/public (Wave's single GraphQL endpoint — all operations go to this URL) For Authentication, select 'OAuth 2.0' from the dropdown. Fill in the OAuth 2.0 fields: - Client ID: paste your Wave application's Client ID - Client Secret: paste your Wave application's Client Secret - Authorization URL: https://api.waveapps.com/oauth2/authorize - Token URL: https://api.waveapps.com/oauth2/token - Scopes: account:* business:* invoice:* customer:* (space-separated, adjust based on what Wave currently supports) - Access Token Lifespan: set appropriately based on Wave's token expiry (check your Wave app settings or API documentation) Scroll down and click Connect to OAuth (or Save and Connect). Retool will open a Wave OAuth consent screen in a popup where you log in and authorize the application. After authorization, Retool stores the access token and the resource is ready. To verify the connection works, click the 'Test Connection' button if available, or create a test query below. Click Save Changes to finalize the resource.

Wave's API requires you to first fetch your business ID, then use it to scope subsequent queries. Open or create a Retool app. In the Code panel, click + to create a new query. Select your Wave GraphQL API resource. The query editor for a GraphQL resource shows a text editor where you write GraphQL query syntax, and optionally a Variables section for dynamic values. Write the following query to fetch your Wave businesses: After saving and running this query, note the business ID from the response — you will use it in subsequent queries. For a production dashboard, store this as a Retool Select component that shows all businesses (in case you manage multiple), and let the user pick which business to query. Now create a second query to fetch invoices for the selected business. Create a new query in the Code panel, select the Wave GraphQL resource, and write the invoices query. Use Retool's {{ }} syntax for the variable values — Retool passes these as the GraphQL variables object automatically when the query runs. Drag a Table component onto the canvas. Set its Data to {{ invoicesQuery.data }}. Add a JavaScript transformer to the query to flatten the nested GraphQL response (GraphQL responses wrap data in a 'data' object, and Wave wraps results in edges/nodes structures for paginated collections).

1# Query 1: Fetch Wave businesses
2query GetBusinesses {
3  businesses {
4    edges {
5      node {
6        id
7        name
8        currency {
9          code
10        }
11        isClassicAccounting
12        isPersonal
13      }
14    }
15  }
16}
17
18# Query 2: Fetch invoices for a business
19query GetInvoices($businessId: ID!, $pageSize: Int, $status: InvoiceStatus) {
20  business(id: $businessId) {
21    invoices(
22      page: 1
23      pageSize: $pageSize
24      status: $status
25    ) {
26      pageInfo {
27        currentPage
28        totalPages
29        totalCount
30      }
31      edges {
32        node {
33          id
34          invoiceNumber
35          invoiceDate
36          dueDate
37          status
38          total {
39            value
40            currency {
41              code
42            }
43          }
44          amountDue {
45            value
46          }
47          customer {
48            id
49            name
50          }
51        }
52      }
53    }
54  }
55}

Wave's GraphQL responses follow a nested pattern: the data is wrapped in edges/nodes arrays (a Relay-style pagination pattern). Add a transformer to each query to flatten this structure into the simple arrays that Retool's Table and Chart components expect. In your invoices query's Advanced tab, add a JavaScript transformer. Access the raw response through the 'data' variable in the transformer context. Bind the transformer output to a Table component. Set the Table's Data to {{ invoicesQuery.data }}. Configure columns: invoiceNumber, customerName, totalValue, amountDue, invoiceDate, dueDate, status, and daysOverdue. For the daysOverdue column, set conditional row coloring: when daysOverdue > 0 use red background, when daysOverdue > 14 use dark red. Set the status column to use Tag rendering with colors: PAID → green, OUTSTANDING → yellow, OVERDUE → red, DRAFT → gray. Add a revenue summary bar above the table. Use three Stat components showing: total outstanding (sum of amountDue where status OUTSTANDING), total overdue (sum where overdue), and invoiced this month (sum of totalValue where invoiceDate in current month). Bind these to JavaScript queries that aggregate invoicesQuery.data.

1// Transformer to flatten Wave invoices GraphQL response
2const response = data; // raw GraphQL response
3const invoicesData = response?.business?.invoices?.edges || [];
4const today = new Date();
5return invoicesData.map(edge => {
6  const inv = edge.node;
7  const dueDate = inv.dueDate ? new Date(inv.dueDate) : null;
8  const daysOverdue = dueDate && inv.status !== 'PAID'
9    ? Math.max(0, Math.floor((today - dueDate) / (1000 * 60 * 60 * 24)))
10    : 0;
11  return {
12    id: inv.id,
13    invoiceNumber: inv.invoiceNumber || 'N/A',
14    customerName: inv.customer ? inv.customer.name : 'Unknown',
15    customerId: inv.customer ? inv.customer.id : null,
16    totalValue: inv.total ? parseFloat(inv.total.value) : 0,
17    amountDue: inv.amountDue ? parseFloat(inv.amountDue.value) : 0,
18    currency: inv.total?.currency?.code || 'USD',
19    invoiceDate: inv.invoiceDate ? new Date(inv.invoiceDate).toLocaleDateString() : 'N/A',
20    dueDate: inv.dueDate ? new Date(inv.dueDate).toLocaleDateString() : 'N/A',
21    status: inv.status || 'UNKNOWN',
22    daysOverdue: daysOverdue,
23    isOverdue: daysOverdue > 0
24  };
25});

Wave's GraphQL API supports mutations for creating and updating records. To let Retool users create new invoices, build a form that collects invoice details and submits a createInvoice mutation. First, create a query to fetch Wave customers (for the customer selector in the invoice form): Create a new query in the Code panel using your Wave GraphQL resource. Write a customers query that fetches all customers for the selected business. Add a transformer that flattens the response to an array of { id, name } objects. Build the invoice form: - Drag a Container component onto the canvas - Inside it, add a Select for customer (options from customersQuery.data, label = name, value = id) - Add a Date Picker for invoice date and due date - Add a dynamic line items Table with an editable Amount and Description column (using Retool's editable Table mode) Create a mutation query in the Code panel using the Wave GraphQL resource. Set the query to a GraphQL mutation that creates an invoice. Wire the 'Create Invoice' button to trigger this mutation query. In the mutation's Success handler, re-run the invoices query to refresh the table and show a success notification with the new invoice number. For marking an invoice as paid, create a separate mutation query using Wave's patchInvoice mutation and wire it to a 'Mark Paid' button in the invoice detail panel. For complex multi-resource dashboards combining Wave with payment processors or CRM data, RapidDev's team can help architect your Retool solution.

1# Fetch customers for invoice form
2query GetCustomers($businessId: ID!) {
3  business(id: $businessId) {
4    customers(page: 1, pageSize: 200) {
5      edges {
6        node {
7          id
8          name
9          email
10        }
11      }
12    }
13  }
14}
15
16# Mutation: Create a new Wave invoice
17mutation CreateInvoice($input: InvoiceCreateInput!) {
18  invoiceCreate(input: $input) {
19    didSucceed
20    inputErrors {
21      code
22      message
23      field
24    }
25    invoice {
26      id
27      invoiceNumber
28      status
29    }
30  }
31}