KQL Not working

The CMS Questions
1

Having some trouble with getting JSON back from headless Kirby.

when i try to do this (which i know works and the credentials and everything are good)

const response = await fetch(api, {
  method: "post",
  body: JSON.stringify({
    query: "page('manga').children",
    select: {
      title: true,
      cover: {
        query: "page.coveraert.toFile",
        select: ["id", "url"],
      },
    },
  }),
  headers,
});

console.log(await response.json());

But what every i try i get a console error saying there is an error on line 1 column 1, unexpected charachter.

What am i doing wrong? I just followed the KQL docs.

2

According to the docs, the select page should look like this:

  "select": {
        "url": true,
        "id": true
      }
3

Hmm thank you, unfourtantly that didnt fix it.

4

There is a charachter in the JSON response somewhere that the json parser doesnt like. Even if I simplify the KQL query down so that im just getting back a list of page titles, i get the same error. Weird.

5

Hm, ok, with the code example above I get a syntax error saying that “await is only valid in async functions, async generators and modules”.

Cant tell from your example code if you are using it asynchronously…

6

So this is a static HTML file, with vanilla JS and I inted to use Handlebars to generate the HTML.

Here is my javascript, without the three vars for the api connection credntials:

const headers = {
  Authorization:
    "Basic " + Buffer.from(`${username}:${password}`).toString("base64"),
  "Content-Type": "application/json",
  Accept: "application/json",
};

const response = await fetch(api, {
  method: "post",
  body: JSON.stringify({
    query: "page('manga').children",
    select: {
      title: true,
      cover: {
        query: "page.coveraert.toFile",
        select: {
          url: true,
          id: true,
        },
      },
    },
  }),
  headers,
});

console.log(await response.json());
7

The odd thing is that if i do that same query in Vue + Nuxt, it works fine using the KQL plugin. I decided that a Vue app was overkill for what i actually need on this proect so stripped it back down to HTML and JS with Handlebars.

8

And if you do it like this ? Also left out the three variables:

<script>
    (async () => {
    
        const headers = {
            Authorization: "Basic " + btoa(`${username}:${password}`),
            "Content-Type": "application/json",
            Accept: "application/json",
        };

        const response = await fetch(api, {
            method: "POST",
            body: JSON.stringify({
                query: "page('manga').children",
                select: {
                    title: true,
                    cover: {
                        query: "page.coveraert.toFile",
                        select: {
                            url: true,
                            id: true,
                        },
                    },
                },
            }),
            headers,
        });

        const data = await response.json();
        console.log(data);
    })();
</script>
9

Nope sadly, same result :frowning:

10

Have you checked what the response actually looks like from the browser tools/inspector?

11

This has been solved via chat. Was an issue with the url