How to overpass api from typescript?

Im having a hard time finding examples of overpass usage for typescript. ts-overpass package the only example does not work. All examples are for overpass turbo. Horrible! I try example from this https://dev.overpass-api.de/overpass-doc/en/preface/design.html which works in overpass tubo but not in my code. I can fetch from jsonplaceholder but not overpass api. Maybe i am doing something really stupid dont know please help.

var fs = require('fs').promises;

(async function () {
    const data = await getData()
    if (!data) return

    try {
        await fs.writeFile('.output/data.xml', data);
    } catch (error) {
        console.error(error);
    }
})();

async function getData() {
    const query = `nwr[shop=supermarket]({{bbox}});out center;`

    try {
        const response = await fetch(
            'https://maps.mail.ru/osm/tools/overpass/api/interpreter'
            , {
                method: 'POST',
                headers: {
                    'content-type': 'application/json;charset=UTF-8',
                },
                body: JSON.stringify({
                    query: query,
                }),
            })
        const data = await response.text()
        return data
    } catch (error) {
        console.log(error);
    }
}

What i recieve is this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" lang="en"/>
  <title>OSM3S Response</title>
</head>
<body>

<p>The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.</p>
<p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Unknown type &quot;{&quot; </p>
<p><strong style="color:#FF0000">Error</strong>: line 1: parse error: An empty query is not allowed </p>
<p><strong style="color:#FF0000">Error</strong>: line 1: parse error: ';' expected - '&quot;query&quot;' found. </p>
<p><strong style="color:#FF0000">Error</strong>: line 2: parse error: Unexpected end of input. </p>

</body>
</html>

Solution

Omg you should use overpass turbo anyway. You run OT with your query, then get Export->raw data and that gives you proper query.

In my case the query from docs

'nwr[shop=supermarket]({{bbox}});out center;'

turned into

'nwr[shop=supermarket](51.625263734761276,4.233856201171875,51.86249987712349,4.7165679931640625);out center;'

And also you have to have question mark at the end of your base url.

The working code:

var fs = require('fs').promises;

(async function () {
    const data = await getData()
    if (!data) return

    try {
        await fs.writeFile('.output/data.xml', data);
    } catch (error) {
        console.error(error);
    }
})();

async function getData() {
    try {
        const response = await fetch(
            'https://maps.mail.ru/osm/tools/overpass/api/interpreter?'
            , {
                method: 'POST',
                headers: {
                    'content-type': 'application/json;charset=UTF-8',
                },
                body: 'nwr[shop=supermarket](51.625263734761276,4.233856201171875,51.86249987712349,4.7165679931640625);out center;'
            })
        const data = await response.text()
        return data
    } catch (error) {
        console.error(error);
    }
}

Hope this will help somebody.