---
title: Modify requests and responses
slug: latest-atomic-modify-requests-responses
canonical_url: https://docs.coveo.com/en/atomic/latest/usage/atomic-modify-requests-responses/
collection: atomic
source_format: adoc
---
# Modify requests and responses

For advanced use cases, such as modifying request bodies with custom parameters or logging data to third parties, you may want to modify requests before [Atomic](https://docs.coveo.com/en/lcdf0264.md) sends them to the Coveo APIs.
You may also want to modify responses before [Atomic](https://docs.coveo.com/en/lcdf0264.md) components use them.
This article explains how you can do so [using Headless engine](https://docs.coveo.com/en/headless/latest/usage/headless-modify-requests-responses/) configuration methods.

## Modify requests

To modify requests sent to the Coveo Search API or the Usage Analytics Write API, use the `preprocessRequest` method of the [search engine configuration](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.SearchEngineConfiguration.html) when [initializing your interface](https://docs.coveo.com/en/atomic/latest/reference/components/atomic-search-interface#initialize).

> **Important**
>
> The `preprocessRequest` method is a powerful tool, and it can be leveraged to do things that should be done in a different manner.
> For example, you can use it to set [`aq`](https://docs.coveo.com/en/175.md), but you should use the [Headless](https://docs.coveo.com/en/lcdf0493.md) [`AdvancedSearchQuery`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.AdvancedSearchQueryActionCreators.html) action instead.
> You can [use them in Atomic](https://docs.coveo.com/en/atomic/latest/usage/headless-through-atomic/) as well.
>
> If you have to use `preprocessRequest`, you should code defensively.
> For example, you can implement [`try...catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try%2E%2E%2Ecatch) to prevent errors.

```html
<script>
  (async () => {
    await customElements.whenDefined('atomic-search-interface');
    const searchInterface = document.querySelector(
      'atomic-search-interface'
    );

    // Initialization
    await searchInterface.initialize({
      accessToken: 'xx564559b1-0045-48e1-953c-3addd1ee4457',
      organizationId: 'searchuisamples',
      preprocessRequest: (request, clientOrigin, metadata) => { <1>
        if (metadata?.method === 'search' && clientOrigin === 'searchApiFetch') {
          const body = JSON.parse(request.body);
          // E.g., modify facet requests
          // body.facets = [...];
          request.body = JSON.stringify(body);
        }

        if (clientOrigin === 'analyticsFetch') {
          // E.g., send data to a third party
        }

        return request;
      },
      // ...
   });

    // Trigger a first search
    searchInterface.executeFirstSearch();
  })();
</script>
```

<1> Initialize the function with its parameters:

* `request`: The HTTP request sent to Coveo. See [`preprocess-request.ts`](https://github.com/coveo/ui-kit/blob/main/packages/headless/src/api/preprocess-request.ts).

* `clientOrigin`: The origin of the request. See [`preprocess-request.ts`](https://github.com/coveo/ui-kit/blob/main/packages/headless/src/api/preprocess-request.ts).

* `metadata`: Optional metadata consisting of two properties:

  --
  * `method`: The method called on the client.

  * `origin`: The origin of the client that helps to distinguish between features while using the same method.
--
+
See [`search-metadata.ts`](https://github.com/coveo/ui-kit/blob/main/packages/headless/src/api/search/search-metadata.ts).

## Modify responses

You can also leverage the [search configuration options](https://docs.coveo.com/en/headless/latest/reference/interfaces/Search.SearchConfigurationOptions.html) to modify Search API responses before [Headless](https://docs.coveo.com/en/lcdf0493.md) controllers use them.
Use the `preprocessSearchResponseMiddleware`, `preprocessFacetSearchMiddleware` or `preprocessQuerySuggestResponseMiddleware` method, depending on the target endpoint.

```html
<script>
  (async () => {
    await customElements.whenDefined('atomic-search-interface');
    const searchInterface = document.querySelector(
      'atomic-search-interface'
    );

    // Initialization
    await searchInterface.initialize({
      accessToken: 'xx564559b1-0045-48e1-953c-3addd1ee4457',
      organizationId: 'searchuisamples',
      // ...
      search: {
        preprocessSearchResponseMiddleware: (response) => {
          response.body.results.forEach((result) => {
            // E.g., modify the result object
            return result;
          });
          return response;
        },
        preprocessFacetSearchResponseMiddleware: (response) => response,
        preprocessQuerySuggestResponseMiddleware: (response) => response,
     },
   });
    // Trigger a first search
    searchInterface.executeFirstSearch();
  })();
</script>
```