How to Integrate Wave with V0

Open V0 at v0.dev and describe the financial dashboard you want to build. Wave data organizes into businesses (the top-level entity), invoices (with status, amounts, and customer links), customers (contact records), products/services (line item catalog), and transactions (income and expenses). For a freelancer or small business dashboard, the most useful views are outstanding invoices (invoices not yet paid, sorted by due date), payment history (recent payments received), and client overview (customers with their outstanding balances and payment history). V0 generates financial UI components well — invoice status badges (overdue/pending/paid), currency-formatted amount displays, date formatting, and data tables with status filters are all patterns V0 handles reliably with Tailwind CSS and shadcn/ui components. For invoice status visualization, describe a clear color coding system: overdue in red, pending/sent in yellow, paid in green, and draft in gray. For amount displays, mention that values will be in USD with two decimal places formatted as $X,XXX.XX. After generating the UI, pay particular attention to the empty states — what should the dashboard show when there are no outstanding invoices or when Wave API data hasn't loaded yet? Describing these states to V0 produces more complete, production-ready components. Push to GitHub via V0's Git panel after generating.

Create the Next.js API route that queries Wave's GraphQL API and returns invoice data to your dashboard. Wave's GraphQL API endpoint is https://gql.waveapps.com/graphql/public and requires a Bearer token in the Authorization header. All queries target a specific business using the businessId from your Wave account. The GraphQL query for fetching invoices uses the business.invoices connection, which accepts pagination arguments (first, after cursor for cursor-based pagination) and returns invoice nodes with fields including invoiceNumber, status, total (amount and currencyCode), amountDue, dueDate, invoiceDate, and customer (with name and email). Wave's invoice status values are DRAFT, SAVED, OVERDUE, PARTIAL, PAID, and SENT — map these to your display labels and colors. For the GraphQL query structure, Wave uses standard Relay-style pagination with a pageInfo object containing hasNextPage and endCursor for fetching subsequent pages. The total and amountDue fields return objects with amount (as a string) and currencyCode — parse the amount string to a float for display formatting. For currency formatting in your API route or frontend, use JavaScript's Intl.NumberFormat with style: 'currency' and the currencyCode from the response for multi-currency Wave accounts. Wave also has rate limits on their API — stay within 100 requests per minute to avoid throttling.

1// app/api/wave/invoices/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const WAVE_GQL_URL = 'https://gql.waveapps.com/graphql/public';
5
6const INVOICES_QUERY = `
7  query GetInvoices($businessId: ID!, $first: Int!, $after: String) {
8    business(id: $businessId) {
9      invoices(first: $first, after: $after) {
10        pageInfo {
11          hasNextPage
12          endCursor
13        }
14        edges {
15          node {
16            id
17            invoiceNumber
18            status
19            invoiceDate
20            dueDate
21            memo
22            total {
23              value
24              currency {
25                symbol
26                code
27              }
28            }
29            amountDue {
30              value
31              currency {
32                code
33              }
34            }
35            customer {
36              id
37              name
38              email
39            }
40          }
41        }
42      }
43    }
44  }
45`;
46
47async function queryWave(token: string, query: string, variables: Record<string, unknown>) {
48  const response = await fetch(WAVE_GQL_URL, {
49    method: 'POST',
50    headers: {
51      Authorization: `Bearer ${token}`,
52      'Content-Type': 'application/json',
53    },
54    body: JSON.stringify({ query, variables }),
55  });
56
57  if (!response.ok) {
58    throw new Error(`Wave API HTTP error: ${response.status}`);
59  }
60
61  const data = await response.json() as {
62    data?: Record<string, unknown>;
63    errors?: Array<{ message: string }>;
64  };
65
66  if (data.errors?.length) {
67    throw new Error(`Wave GraphQL error: ${data.errors[0].message}`);
68  }
69
70  return data.data;
71}
72
73export async function GET(request: NextRequest) {
74  const token = process.env.WAVE_ACCESS_TOKEN;
75  const businessId = process.env.WAVE_BUSINESS_ID;
76
77  if (!token || !businessId) {
78    return NextResponse.json(
79      { error: 'Wave credentials not configured' },
80      { status: 500 }
81    );
82  }
83
84  const { searchParams } = new URL(request.url);
85  const first = parseInt(searchParams.get('first') ?? '20', 10);
86  const after = searchParams.get('after') ?? null;
87  const statusFilter = searchParams.get('status') ?? '';
88
89  try {
90    const data = await queryWave(token, INVOICES_QUERY, {
91      businessId,
92      first,
93      after,
94    });
95
96    const business = data?.business as Record<string, unknown>;
97    const invoicesConn = business?.invoices as {
98      pageInfo: { hasNextPage: boolean; endCursor: string };
99      edges: Array<{ node: Record<string, unknown> }>;
100    };
101
102    let invoices = (invoicesConn?.edges ?? []).map(({ node }) => {
103      const total = node.total as { value: string; currency: { symbol: string; code: string } };
104      const amountDue = node.amountDue as { value: string; currency: { code: string } };
105      const customer = node.customer as { id: string; name: string; email: string } | null;
106
107      return {
108        id: node.id as string,
109        invoiceNumber: node.invoiceNumber as string,
110        status: node.status as string,
111        invoiceDate: node.invoiceDate as string,
112        dueDate: node.dueDate as string | null,
113        memo: node.memo as string,
114        totalAmount: parseFloat(total?.value ?? '0'),
115        amountDue: parseFloat(amountDue?.value ?? '0'),
116        currency: total?.currency?.code ?? 'USD',
117        currencySymbol: total?.currency?.symbol ?? '$',
118        customerName: customer?.name ?? 'Unknown Customer',
119        customerEmail: customer?.email ?? '',
120      };
121    });
122
123    if (statusFilter) {
124      invoices = invoices.filter((inv) => inv.status === statusFilter.toUpperCase());
125    }
126
127    const totalOutstanding = invoices
128      .filter((inv) => inv.status !== 'PAID' && inv.status !== 'DRAFT')
129      .reduce((sum, inv) => sum + inv.amountDue, 0);
130
131    const overdue = invoices
132      .filter((inv) => inv.status === 'OVERDUE')
133      .reduce((sum, inv) => sum + inv.amountDue, 0);
134
135    return NextResponse.json({
136      invoices,
137      pageInfo: invoicesConn?.pageInfo,
138      summary: {
139        totalOutstanding: totalOutstanding.toFixed(2),
140        overdue: overdue.toFixed(2),
141        invoiceCount: invoices.length,
142      },
143    });
144  } catch (error) {
145    const message = error instanceof Error ? error.message : 'Unknown error';
146    console.error('Wave API error:', message);
147    return NextResponse.json(
148      { error: 'Failed to fetch Wave invoices', details: message },
149      { status: 500 }
150    );
151  }
152}

Update your V0-generated dashboard components to fetch from /api/wave/invoices and handle the Wave data structure correctly. The invoice table component should load data on mount with no filters applied, and update when the user selects a status filter tab. Map Wave's status values (DRAFT, SAVED, SENT, OVERDUE, PARTIAL, PAID) to your display labels and badge colors — OVERDUE maps to a red badge, SENT and PARTIAL map to yellow, PAID maps to green, and DRAFT maps to gray. The summary cards at the top should use the summary object returned by the API (totalOutstanding and overdue) rather than recalculating from the invoice list on the client. For currency formatting, use JavaScript's Intl.NumberFormat to format amounts with the currency symbol and two decimal places: new Intl.NumberFormat('en-US', { style: 'currency', currency: inv.currency }).format(inv.totalAmount). For date formatting, Wave returns dates as ISO strings (YYYY-MM-DD) — format them with Intl.DateTimeFormat for locale-appropriate display. For the 'Overdue' badge, you can also add a 'days overdue' calculation by comparing the dueDate to today's date. Cursor-based pagination (Wave's pagination approach) requires storing the endCursor from the pageInfo object and passing it as the 'after' parameter for the next page — update your 'Load More' or 'Next Page' button to pass the cursor rather than a page number.

Push your code to GitHub and configure Wave credentials in Vercel. Open the Vercel Dashboard, select your project, and go to Settings → Environment Variables. Add WAVE_ACCESS_TOKEN with your Wave OAuth access token and WAVE_BUSINESS_ID with your Wave business ID. To obtain an access token for your own Wave account without building a full OAuth flow, use the Wave developer portal at developer.waveapps.com — after creating an app, you can generate a personal access token for testing. For a production app where multiple users connect their Wave accounts, implement the full OAuth 2.0 authorization code flow, store each user's tokens in your database, and look up the correct token per user in your API routes. The business ID is visible in your Wave account URL when viewing your dashboard (format: waveapps.com/businesses/{uuid}/accounting). Neither credential should have the NEXT_PUBLIC_ prefix. Set variables for Production and Preview environments, save, and redeploy. After deployment, open your Vercel URL and verify that the invoice dashboard loads your actual Wave invoices with correct statuses and amounts. If the API returns a 'Business not found' error, verify the WAVE_BUSINESS_ID is the correct UUID from your Wave account URL and that the access token has permission to access that business.