Data Sources & External API Connections in Qödiak

Learn how to bring external data into your Qödiak apps, connect to any REST API, and automate workflows with webhooks. This guide covers data source setup, API connection security, component binding, tier limits, and best‑practice tips.

Understanding Data Sources

In Qödiak, a data source is the bridge between your app and an external REST API. Each data source defines:

• The API endpoint URL.
• Field mappings that translate JSON responses into component‑friendly fields.
• Optional settings for search, filtering, sorting, and pagination.
• Response caching with a configurable duration to improve performance.

When to Use a Data Source

Data sources are ideal for:

• Displaying product catalogs from an e‑commerce backend.
• Showing employee directories stored in a corporate HR system.
• Populating dropdown lists with dynamic options such as city names or categories.
• Feeding charts with real‑time analytics data.

Setting Up an API Connection

Qödiak lets you connect to any REST API that supports GET, POST, PUT, or DELETE methods. Follow these steps to create a secure connection:

1. Navigate to Settings > API Connections in the Qödiak dashboard.
2. Click New Connection and give it a descriptive name (e.g., Inventory Service).
3. Enter the base URL of the REST endpoint (e.g., https://api.example.com/v1).
4. Choose the HTTP method you will use most often.
5. Paste your API key or token in the Credentials field. Qödiak encrypts these values at rest.
6. Optionally enable Query Parameter Support if your API expects parameters such as ?status=active.
7. Save the connection. Qödiak validates the URL and blocks any address that could lead to a Server‑Side Request Forgery (SSRF) attack.

Tip: The validation step blocks private IP ranges (10.0.0.0/8, 172.16.0.0/12, 192.168.0.0/16), localhost (127.0.0.1), and cloud metadata endpoints (169.254.169.254). If you need to access an internal service, consider exposing it through a secure proxy that resides on a public IP.

Dynamic URL Parameters

Qödiak supports template value substitution, allowing you to insert dynamic values directly into the URL. Use curly braces to denote placeholders:

https://api.example.com/orders/{orderId}

When the component triggers the request, Qödiak replaces {orderId} with the actual value from the app’s state or user input.

Binding Data Sources to Components

Once a data source is defined, you can bind it to any of Qödiak’s data‑aware components. Below are the most common bindings and their use cases.

DataGrid – Tabular Views

• Use case: Show a list of support tickets with sortable columns.
• Features: Built‑in sorting, pagination, and column filtering.

To bind a DataGrid:

1. Select the DataGrid component on the canvas.
2. In the Data Source dropdown, choose the desired source.
3. Map the API fields to grid columns (e.g., ticket_id → “Ticket #”).
4. Enable Pagination and set the page size (e.g., 20 rows per page).

DataCardGrid – Card Layouts

• Use case: Display product cards with images, titles, and prices.
• Features: Automatic responsive layout and styling options.

Binding steps are identical to DataGrid, but you select Card Layout instead of a table.

Dropdown – Dynamic Option Lists

• Use case: Populate a “Country” selector from a remote reference API.
• Features: Searchable options and lazy loading for large lists.

Configuration:

1. Choose the Dropdown component.
2. Set the Data Source to the API that returns an array of objects.
3. Define Label Field (e.g., country_name) and Value Field (e.g., country_code).
4. Enable Search if the list exceeds 50 items.

DataSourceSearch – Full‑Text Search

This component sends a query to the linked data source and displays matching results. It’s perfect for building a “Search Products” bar that queries an external catalog API.

Chart – Visual Data Representation

Connect a Chart component to a data source that returns numeric series. Qödiak automatically maps fields to axes, allowing you to create line, bar, or pie charts without writing code.

Working with Webhooks

Webhooks let your Qödiak app push data outward, such as sending a form submission to a CRM or triggering an automation workflow.

Supported Integrations

• Zapier – Connect to thousands of SaaS tools.
• Make (formerly Integromat) – Build complex multi‑step automations.
• n8n – Open‑source workflow engine.

Creating a Custom Webhook

1. Open the form component you wish to extend.
2. In the Actions panel, select Add Webhook.
3. Enter the target URL (e.g., https://hooks.example.com/receive).
4. Map form fields to JSON payload keys.
5. Save. Qödiak will attempt to deliver the payload and automatically retry up to three times if the request fails.

Note: Webhook URLs are also validated against the SSRF blocklist. Ensure the endpoint is publicly reachable or routed through a secure proxy.

Tier Limits & Planning Your Usage

Qödiak’s subscription tiers define how many API connections and data sources you can create, as well as the monthly API call allowance.

If you anticipate high traffic—such as a public marketplace or a real‑time dashboard—consider the Pro tier to avoid throttling. Remember that each API call, including webhook retries, counts toward your monthly quota.

Best Practices for Secure and Efficient API Integration

• Cache wisely: Enable response caching for endpoints that return static data (e.g., product categories). Set a reasonable duration (e.g., 5 minutes) to reduce call volume.
• Limit fields: Map only the fields you need in your component. Smaller payloads improve load times and lower API usage.
• Validate inputs: Use Qödiak’s built‑in input validation before sending data to external APIs to prevent malformed requests.
• Monitor usage: The Analytics tab shows API call counts per connection. Set up alerts if you approach your tier limit.
• Secure credentials: API keys are encrypted at rest. Rotate them regularly and update the corresponding Qödiak connection.
• Avoid direct Google Sheets integration: Qödiak does not support native Sheets connections. Instead, use a webhook to send data to Zapier, then let Zapier write to Google Sheets.

Example: Building a Customer Support Dashboard

Below is a step‑by‑step illustration of how to combine data sources, components, and webhooks to create a live support dashboard.

1. Create an API Connection named Support API pointing to https://support.example.com/api. Store the provided token securely.
2. Define a Data Source called Tickets:
   • Endpoint: /tickets
   • Method: GET
   • Enable pagination (page size = 25).
   • Map JSON fields: id, subject, status, created_at.
   • Set cache duration to 2 minutes.
3. Add a DataGrid to the canvas and bind it to the Tickets data source. Configure columns for Ticket #, Subject, Status, and Date.
4. Insert a Dropdown for “Status Filter”:
   • Data source: Tickets (use the same endpoint but with a status query parameter).
   • Label field: status.
   • Enable “All” as a default option.
5. Connect the Dropdown to the DataGrid using a filter action so that selecting a status refreshes the grid with ?status={selectedValue}.
6. Set up a Webhook on the “Close Ticket” button:
   • Target URL: https://hooks.example.com/close-ticket.
   • Payload: { "ticketId": {{row.id}} }.
   • Enable automatic retry.
7. Test the flow by opening a ticket, changing its status, and confirming the webhook fires (check the webhook logs in the dashboard).

This example demonstrates how Qödiak’s data sources, component binding, and webhook capabilities work together without writing a single line of code.

Frequently Asked Questions

Can I use Qödiak to read data from a private intranet API?

Direct connections to private IP ranges are blocked for security reasons. To access internal services, expose them through a public proxy that enforces authentication, then connect Qödiak to the proxy URL.

What happens if my API returns an error?

Qödiak surfaces the error message in the component’s Debug Console. For webhooks, the platform automatically retries up to three times before marking the delivery as failed.

Is there a way to see which data source calls are being cached?

Yes. In the Data Sources list, each entry shows a Cache Status badge indicating whether caching is active and the current TTL (time‑to‑live).

How do I upgrade my tier?

Navigate to Account Settings > Billing, select the desired plan, and confirm the payment method. Your new limits take effect immediately.

Conclusion

Qödiak’s flexible data source architecture, secure API connections, and powerful webhook engine empower you to build data‑driven applications without writing code. By following the steps and best practices outlined above, you can safely integrate external services, keep your app performant, and stay within your subscription limits.