Squidex GraphQL Query

api.js

const axios = require("axios")
import Config from '@/app.config.js'
const token = ''
    
const queryCMS = query => {
    return new Promise(async (resolve, reject) => {
        try {
            const result = await axios.post(`${Config.apiEndpoint}`, {
                query: `
                    query {
                        ${query}
                    }
                  `
              }, {
                headers: { 
                    Authorization: `Bearer ${ token }`
                }
              })
            resolve(result.data.data)
        } catch (error) {
            console.error('Failed to query CMS', error)
            reject(error)
        }
    })
}


export {
    queryCMS
  }
  

app.config.js

const config = {
  apiEndpoint: 'https://cloud.squidex.io/api/content/##APP##/graphql'
}

export default config

docker-compose.yml

version: '3.6'

volumes:
 db:
 assets:

networks:
 backend:
 web:
  external: true

services:
  db:
    image: mongo:latest
    expose:
      - "27017"
    volumes:
      - db:/data/db
    networks:
      - backend
    restart: unless-stopped

  squidex:
    image: "squidex/squidex:v1.11.0"
    expose:
      - "80"
    environment:
      - TZ=Europe/Berlin
      - URLS__BASEURL=${SQUIDEX_PROTOCOL}://${SQUIDEX_DOMAIN}/
      - URLS__ENFORCEHTTPS=${SQUIDEX_FORCE_HTTPS}
      - EVENTSTORE__CONSUME=true
      - EVENTSTORE__MONGODB__CONFIGURATION=mongodb://db
      - STORE__MONGODB__CONFIGURATION=mongodb://db
      - IDENTITY__ADMINEMAIL=${SQUIDEX_ADMINEMAIL}
      - IDENTITY__ADMINPASSWORD=${SQUIDEX_ADMINPASSWORD}
      - IDENTITY__GOOGLECLIENT=${SQUIDEX_GOOGLECLIENT}
      - IDENTITY__GOOGLESECRET=${SQUIDEX_GOOGLESECRET}
      - IDENTITY__MICROSOFTCLIENT=${SQUIDEX_MICROSOFTCLIENT}
      - IDENTITY__MICROSOFTSECRET=${SQUIDEX_MICROSOFTSECRET}
      - LETSENCRYPT_HOST=${SQUIDEX_DOMAIN}
      - LETSENCRYPT_EMAIL=${SQUIDEX_ADMINEMAIL}
    depends_on:
      - db
    volumes:
      - assets:/app/Assets
    networks:
      - backend
      - web
    restart: unless-stopped
    labels:
      - "traefik.frontend.rule=Host:my.awesome.host"
      - "traefik.backend=squidex"
      - "traefik.docker.network=web"
      - "traefik.enable=true"
      - "traefik.port=80"
      - "traefik.frontend.headers.customResponseHeaders=Access-Control-Allow-Origin:*"
      - "traefik.frontend.passHostHeader=true"

Query.vue

<template lang="pug">
  div {{ api }}
</template>

<script>
import { queryCMS } from '@/api'
export default {
  data: () => ({
    api: null
  }),
  async created () {
    this.api = await queryCMS(`                      
    queryHomeContents {
      data {
        slides {
          iv {
            description
            linktext
          }
        }
      }
    }`)
  }
}
</script>