# HTTP

> Connect your app to an API with the HTTP component in PandaSuite. Learn how to configure the URL, headers, authorization, cache, methods, content type, pagination, and request events.

https://docs.pandasuite.com/essentials/components/http/

**Connect your app to an API with the HTTP component. You can use it to display an external collection, send data to a third-party service, or retrieve live information such as weather, availability, or user data.**

An API makes data or functionality from an existing service available to other applications. In PandaSuite, the HTTP component lets you send requests, retrieve responses, and expose the returned data so other components can use it.

Each API has its own rules, parameters, and authentication method. The HTTP component gives you the settings you need to adapt to that documentation.

## Add the HTTP component

Insert the HTTP component where it will be used in your project. If the request is reused across several screens or controls the global behavior of the app, place it at the **Project** level.

## Configure the request

### URL

You need the base endpoint provided in the API documentation.

For example, here is the URL of the OpenWeatherMap API:

```
https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}
```

[Image: OpenWeatherMap Current weather data documentation, with the API call URL and its {city name} and {API key} parameters]

In the **URL** field, paste everything from `https:` up to `?`, without including `?`. Put the remaining parameters in **Query String**.

### Headers and query parameters

[Image: HTTP component properties in a Paris weather app, with the URL field highlighted and filled with the OpenWeatherMap API address]

Many APIs require extra values to customize the request:

- Use **Headers** for values sent in the HTTP header.
- Use **Query String** for values appended to the URL.

[Image: Parameters of the OpenWeatherMap documentation: q and appid required, mode, units and lang optional, then API call examples]

This separation makes requests easier to read and easier to maintain when you bind values dynamically.

### Authorization

[Image: HTTP component with Authorization set to HTTP Basic: empty User Name and Password fields, Proxy mode grayed out as it applies automatically]

If the API requires authentication, set **Authorization** to one of these modes:

- **No Auth**
- **HTTP Basic**
- **API Key**

With **HTTP Basic**, fill in **User Name** and **Password**.

With **API Key**, fill in **Key** with the header name expected by the API, such as `Authorization` or `x-api-key`, and **Value** with the corresponding token or key.

When authentication is enabled, **Proxy mode** is used automatically: PandaSuite stores the **Value** as a secret and adds it to the request server-side, so the credential is not exposed in the published app.

For that reason, keep sensitive credentials in **Authorization**, especially tokens or keys that can create, edit, or delete data, rather than placing them in **Headers** or **Query String**.

### Cache

Caching lets the component reuse a previous response instead of calling the network every time.

Choose the mode that matches your use case:

- **No cache**: always makes a network request.
- **Cache first**: uses the cached response first and only calls the network if needed.
- **Cache and network**: returns the cached response first, then refreshes it from the network.
- **Network and cache**: calls the network first and falls back to the cached response if needed.

Enable **Persistent cache** to keep the cached response after the app closes.

Requests sent with **Binary (`application/octet-stream`)** always use the network and are not stored in the HTTP component cache.

To prepare API content for offline use, see [API Offline Data](https://docs.pandasuite.com/essentials/data/api-offline-data/).

### Method and content type

The **Method** property defines what kind of request you send:

- **GET**: retrieve data from a resource.
- **POST**: create a resource.
- **HEAD**: retrieve headers without the response body.
- **PUT** or **PATCH**: update a resource.
- **DELETE**: delete a resource.

For methods that send a request body, choose a **Content Type**:

- **Text (`text/plain`)**
- **JSON (`application/json`)**
- **Form (`application/x-www-form-urlencoded`)**
- **XML (`application/xml` or `text/xml`)**
- **HTML (`text/html`)**
- **Binary (`application/octet-stream`)**

The **Content** field appears only when the selected method supports a request body.

If you select **Binary (`application/octet-stream`)**, the **Content** field expects a bound **Image** or **Video** source. Use this mode when the API expects the raw media file in the request body instead of JSON or form data.

Enable **Auto add content type** if you want PandaSuite to automatically add the `Content-Type` header for the selected format. Disable it only when the API expects a custom header or no content type header at all.

If your goal is to keep API media available offline, expose the response fields as **Image**, **Audio**, or **Video** and follow [API Offline Data](https://docs.pandasuite.com/essentials/data/api-offline-data/). This is separate from the **Binary** content type, which is used to send a media file in the request body.

### Other options

The component also includes these options:

- **Auto start**: launches the request automatically when the page or app starts.
- **Offline mode**: queues requests that fail because the device is offline and sends them again, one at a time, when the connection returns. Requests that send data stay in the queue until the server accepts them, unless it refuses them for good.
- **Proxy mode**: routes the request through PandaSuite when needed for authentication or API restrictions.

## Test and expose the response

Open the component configuration and click **Test Request**.

If the request is valid, PandaSuite displays the raw response. You can then click directly on response values to expose them and assign a type:

- **String**
- **Boolean**
- **Number**
- **Image**
- **Audio**
- **Video**
- **Offset Pagination**

This step is especially useful when you need to bind returned fields to other components, configure pagination, or prepare media for offline download.

### Configure pagination

If the API returns a pagination token or offset, click that value in the test result and set its type to **Offset Pagination**.

If the returned records are inside an array, enable **Merge results** and enter the array path, such as `/records`, so PandaSuite combines the items from multiple pages.

When you trigger **Start request**, you can enable **Loop on all pages** to load every page automatically.

For a full walkthrough, see [Handle API pagination](https://docs.pandasuite.com/essentials/data/handle-api-pagination/).

## Trigger and handle requests

If you do not use **Auto start**, add an action to launch the request when needed.

For example, select a screen and go to **Actions** > **Current Screen** > **Interact with a Component** > **HTTP Component** > **Start request**.

[Image: Actions of the Intro Loading screen: when it is displayed, Start request runs on HTTP Current Weather]

The HTTP component provides these actions:

- **Start request**: starts the request. For non-`GET` and non-`HEAD` methods, you can also enable **Override the request** and send a different **Content** at runtime. The available input follows the selected **Content Type**, including a bound **Image** or **Video** source for **Binary (`application/octet-stream`)**.
- **Clear cache**: removes the cached response for this component.
- **Redo rejected requests**: retries requests that failed while offline.
- **Clear rejected requests**: clears the offline request queue.
- **Next page** and **Previous page**: navigate through paginated results.

It also exposes these events:

- **Request completed**: triggered when the request succeeds.
- **Request failed**: triggered when the request fails and exposes the response status and **Response text body**.

## Related guides

- [API Offline Data](https://docs.pandasuite.com/essentials/data/api-offline-data/)
- [Handle API pagination](https://docs.pandasuite.com/essentials/data/handle-api-pagination/)
- [Connect to an API REST](https://docs.pandasuite.com/essentials/integrations/connect-to-an-api-rest/)