How to Integrate Retool with Looker

Navigate to the Resources tab in Retool and click Add Resource. Select REST API. Name it 'Looker API'. In the Base URL field, enter your Looker API base URL — this is typically https://yourcompany.looker.com/api/4.0 (replace 'yourcompany' with your Looker instance subdomain). Do not include a trailing slash after the version number. Now configure authentication. Looker uses a two-step OAuth client credentials flow — you POST credentials to /login to get an access token, then use that token as a Bearer header. In the Authentication section, select Custom Auth. In the Custom Auth Login section, add a step to POST to /login with body parameters client_id and client_secret. Store the response access_token as a variable. Then in the Request Headers section of your resource, add: Authorization: Bearer {{ auth.access_token }}. Store your Looker credentials as Secret configuration variables (LOOKER_CLIENT_ID and LOOKER_CLIENT_SECRET) in Settings → Configuration Variables before referencing them in the Custom Auth steps. An alternative simpler approach: instead of Custom Auth, create a JavaScript query named getToken that runs on page load, POSTs to /api/4.0/login with your credentials, and stores the returned access_token in a Retool Variable named lookerToken. Then reference {{ lookerToken.value }} in subsequent query headers.

1// JavaScript query: getToken — runs on page load
2// Store result in a Variable component named 'lookerToken'
3const response = await fetch(
4  `${retoolContext.configVars.LOOKER_BASE_URL}/api/4.0/login`,
5  {
6    method: 'POST',
7    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
8    body: `client_id=${retoolContext.configVars.LOOKER_CLIENT_ID}&client_secret=${retoolContext.configVars.LOOKER_CLIENT_SECRET}`
9  }
10);
11const data = await response.json();
12return data.access_token;

With authentication configured, create a query to run an inline Looker query against one of your Explores. Create a query named runLookerQuery. Select the Looker API resource, set Method to POST, and set Path to /queries/run/json. This endpoint accepts a query specification as the JSON body and returns results as a JSON array — perfect for Retool Tables. The body structure specifies the model name, the Explore name, the fields (dimensions and measures) to include, any filters, and sort order: The model, view, and field names come from your LookML. Navigate to Looker's Explore section and look at the field picker — the field names in API format are shown in the URL or in the field's info panel as model_name::view_name.field_name. Set the body fields dynamically based on dropdown selectors in your Retool app. Add a Dropdown component named dropdown_explore where users select which Explore to query, and multi-select checkboxes for which fields to include. This creates a flexible analytics query tool without requiring LookML knowledge from operators. Bind the query result (data) directly to a Retool Table. The inline query response is already a flat JSON array — no transformer needed for basic display, though you may want one for number formatting.

1// Query body for Looker /queries/run/json endpoint
2{
3  "model": "your_model_name",
4  "view": "{{ dropdown_explore.value || 'orders' }}",
5  "fields": [
6    "orders.created_date",
7    "orders.count",
8    "orders.total_revenue",
9    "customers.name"
10  ],
11  "filters": {
12    "orders.created_date": "{{ dateRange.value ? `${moment(dateRange.value[0]).format('YYYY/MM/DD')} to ${moment(dateRange.value[1]).format('YYYY/MM/DD')}` : '30 days' }}"
13  },
14  "sorts": ["orders.created_date desc"],
15  "limit": "{{ pagination.pageSize || 500 }}",
16  "query_timezone": "America/Los_Angeles"
17}

If your Looker instance has pre-built Looks (saved queries with visualizations), you can pull those results directly into Retool without redefining the query parameters. This is simpler than inline queries and ensures Retool uses exactly the same query definition as the Look in Looker. Create a query named getLookResults. Set Method to GET, Path to /looks/{{ textInput_lookId.value }}/run/json. Add the Authorization header dynamically: key = Authorization, value = Bearer {{ lookerToken.value }} (if using the variable approach) or rely on the resource-level auth configuration. You can add filters to Look results as URL parameters. For example, to filter a Look by customer_id, add: URL parameter key = filters[customers.id], value = {{ textInput_customerId.value }}. Multiple filters can be added as separate URL parameters. Build a Look browser by also creating a getLooks query (GET, /looks?fields=id,title,description,folder,created_at) that lists all available Looks. Bind this to a Table, and when a row is selected, populate the textInput_lookId with the selected Look's ID and trigger getLookResults. This gives operators a point-and-click interface for running any Look in your organization. For complex integrations that connect multiple Looker Looks with operational data from different databases, RapidDev's team can help design the multi-query architecture and transformer logic.

1// JavaScript transformer — format Look results for display
2// Looker returns field names as 'view_name.field_name' format
3// This transformer renames them to more readable labels
4const results = data || [];
5if (results.length === 0) return [];
6
7// Get the keys from the first result to build the mapping
8const keys = Object.keys(results[0]);
9
10// Reformat field names: 'orders.total_revenue' -> 'Total Revenue'
11const formatKey = key => key
12  .split('.').pop()   // remove 'view_name.' prefix
13  .split('_')         // split on underscores
14  .map(w => w.charAt(0).toUpperCase() + w.slice(1))  // title case
15  .join(' ');
16
17return results.map(row => {
18  const formatted = {};
19  keys.forEach(key => {
20    formatted[formatKey(key)] = row[key];
21  });
22  return formatted;
23});

For cases where you want the full Looker visualization experience inside Retool (charts, pivots, visualizations that would be complex to recreate), use Retool's Custom Component to embed a Looker dashboard or Look via iframe. Drag a Custom Component from the Component panel onto your canvas. In the Custom Component editor, replace the default code with an iframe that loads your Looker dashboard or Look with embed parameters. Looker supports signed embed URLs for secure embedding. You'll need to generate a signed URL server-side using Looker's embed SDK — this requires your embed secret (different from the API credentials) and generates a time-limited URL with user context. For simpler use cases where your Retool app is inside your company network and you use SSO with Looker, you can embed the dashboard URL directly without signed embedding since users will already be authenticated to Looker via SSO when they access Retool. Add Looker filtering by including filter parameters in the embed URL. Looker embed URLs accept ?field_name=value parameters that pre-filter the embedded dashboard. Bind these to Retool component values to create synchronized filtering between your Retool UI and the embedded Looker visualization.

1// Custom Component HTML for Looker embed
2// Replace LOOKER_URL and DASHBOARD_ID with your values
3const html = `
4<style>
5  iframe {
6    width: 100%;
7    height: 600px;
8    border: none;
9    border-radius: 4px;
10  }
11</style>
12<iframe
13  src="https://yourcompany.looker.com/embed/dashboards/${Retool.widgetConfig?.dashboardId || '1'}?allow_login_screen=false&embed_domain=https://retool.yourcompany.com"
14  allowfullscreen
15/>`;
16
17// In the Custom Component, render this HTML
18// Pass dashboardId from Retool as a widgetConfig prop

Assemble the complete dashboard that combines Looker analytics with Retool actions. The goal is to give operational teams Looker-quality metrics alongside the ability to act on those metrics without switching tools. Layout recommendation: Left column (35% width) — Looker-powered metrics table using the inline query or Look result approach. Right column (65% width) — operational panel with forms, buttons, and write-back queries. Example: A customer success team dashboard where the left panel shows Looker's customer health scores and churn risk metrics (from your carefully maintained LookML models), and the right panel shows the selected customer's account details with buttons to create a task in Asana, log a call note to Salesforce, or update a customer status in your PostgreSQL database. Connect the panels via Retool's selectedRow mechanism. When a rep clicks a row in the Looker metrics Table, the selectedRow.customer_id populates the customer detail panel on the right. Add a refresh mechanism: a Refresh button that clears the lookerToken variable and re-runs the getToken query to get a fresh access token, then re-runs all Looker queries. This handles the 1-hour token expiry for long-running sessions. Add loading states (using Retool's component loading prop bound to runLookerQuery.isFetching) so users know when Looker data is being fetched — Looker queries on large datasets can take 10-30 seconds.

1// JavaScript query: refreshLooker — call this when token may have expired
2// Runs getToken, waits for it to complete, then re-runs all Looker queries
3await getToken.trigger();
4await runLookerQuery.trigger();
5// or getLookResults.trigger() depending on your approach
6return 'Refreshed';