Caddy server and subdomain point to port not working

I am hosting my Apollo Graphql api on digital ocean centos 8. I can call the api using http://ip:4000/graphql

So now I want to replace with ip to subdomain an point to digital ocean ip from cloudflare.

I called https://api.subdomain.com/graphql but give HTTP ERROR 502.

May I know what configuration is wrong in caddy server since my qraphql server is up and running correctly.

docker-compose.yml

version: "3.7"
services:
  data_api:
    container_name: mycontianer-data-api
    image: asia.gcr.io/projectid/myimage/data-api
    expose:
      - 4000
    ports:
      - "4000:4000"
    depends_on:
      - db
    environment:
      DATABASE_URL: mysql://url
      ACCESS_TOKEN_SECRET: xx
      REFRESH_TOKEN_SECRET: xx
    networks:
      - gita

  db:
    container_name: mycontainer-db
    image: asia.gcr.io/projectid/myimage/db
    restart: always
    volumes:
      - ./db/data/:/var/lib/mariadb/data
    environment:
      MARIADB_ROOT_PASSWORD: xxxx
      MARIADB_DATABASE: mydb
    expose:
      - 3306
    ports:
      - "3307:3306"
    networks:
      - gita

  # Run the caddy server        
  caddy:
      container_name: mycontainer-caddy-service
      image: caddy/caddy:2.4.6-alpine
      restart: unless-stopped
      ports:
        - "80:80"
        - "443:443" 
      volumes:            
        - $PWD/Caddyfile:/etc/caddy/Caddyfile
        - $PWD/site:/srv
        - caddy_data:/data
        - caddy_config:/config
volumes:
  caddy_data:
  caddy_config: 

networks:
  gita:

Caddyfile

api.mydomain.com {
  application
  # in our case it's exposed on port 4000
  reverse_proxy data_api:4000  {
    header_down Strict-Transport-Security max-age=31536000;
  }
}

Error

{
  "level": "error",
  "ts": 1641141164.5300577,
  "logger": "http.log.error",
  "msg": "dial tcp: lookup node-app on 127.0.0.11:53: no such host",
  "request": {
    "remote_addr": "210.14.105.198:63643",
    "proto": "HTTP/2.0",
    "method": "OPTIONS",
    "host": "api.myanmargita.com",
    "uri": "/graphql",
    "headers": {
      "Access-Control-Request-Headers": [
        "authorization,content-type"
      ],
      "Sec-Fetch-Site": [
        "same-site"
      ],
      "Sec-Fetch-Dest": [
        "empty"
      ],
      "Referer": [
        "https://admin.myanmargita.com/"
      ],
      "Accept-Language": [
        "en-GB,en-US;q=0.9,en;q=0.8"
      ],
      "Accept": [
        "*/*"
      ],
      "Access-Control-Request-Method": [
        "POST"
      ],
      "Origin": [
        "https://admin.myanmargita.com"
      ],
      "User-Agent": [
        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36"
      ],
      "Sec-Fetch-Mode": [
        "cors"
      ],
      "Accept-Encoding": [
        "gzip, deflate, br"
      ]
    },
    "tls": {
      "resumed": false,
      "version": 772,
      "cipher_suite": 4865,
      "proto": "h2",
      "proto_mutual": true,
      "server_name": "api.myanmargita.com"
    }
  },
  "duration": 0.007975182,
  "status": 502,
  "err_id": "hctevnv5t",
  "err_trace": "reverseproxy.statusError (reverseproxy.go:886)"
}