# Beyond Kirby : Headless CMS

**URL:** <https://forum.getkirby.com/t/beyond-kirby-headless-cms/26388>\
**Category:** Questions\
**Tags:** v3\
**Created:** [September 2, 2022, 3:38pm UTC](https://forum.getkirby.com/t/beyond-kirby-headless-cms/26388 "2022-09-02T15:38:05Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![jinnniu](https://avatars.discourse-cdn.com/v4/letter/j/b5e925/32.png) [@jinnniu](https://forum.getkirby.com/u/jinnniu)\
**Post date:** [September 2, 2022, 3:38pm UTC](https://forum.getkirby.com/t/beyond-kirby-headless-cms/26388/1 "2022-09-02T15:38:05Z")

</div>

Hello, I really would like to use Kirby as a headless CMS and put Next.js (or React.js) for front-end part.  
I tried [headless-getting-started](https://getkirby.com/docs/cookbook/setup/headless-getting-started#enabling-basicauth), but I think I don’t get the point of “Set the user credentials under the Basic dropdown and set the query to POST using the local url to the headless system, for example: `https://headless.test/api/query`” at this article, so that I keep getting 404 error at “insomnia” application.🥲

 ![insomnia](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/c/c881b88402d537e4c2e283e8932e752607745866.jpeg)

Do you know how to solve this problem?  
And back to “[Beyond Kirby](https://getkirby.com/docs/guide/beyond-kirby)”, I only can find “Vue starterkit”, not for Next.js, thus can I ask how to use Next.js with Kirby?  
I’m struggling with this cuz there are a few information about this, so if someone knows, please let me know:)  
\ Thank you /

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [September 2, 2022, 3:47pm UTC](https://forum.getkirby.com/t/beyond-kirby-headless-cms/26388/2 "2022-09-02T15:47:22Z")

</div>

You have to add your user credentials in the Basic tab (the one before Query), i.e. your username and password.

Re. Next.js, maybe this helps: [Kirby as Headless CMS with Next JS | Medium](https://joooooo308.medium.com/using-kirby-as-headless-cms-3ace18a30345) (haven’t read it).

With the dev version of KQL, you can use it without authentication. Basic auth is not really intended for authentication via JavaScript.

---

<div class="post-metadata">

**Author:** ![jinnniu](https://avatars.discourse-cdn.com/v4/letter/j/b5e925/32.png) [@jinnniu](https://forum.getkirby.com/u/jinnniu)\
**Post date:** [September 2, 2022, 6:42pm UTC](https://forum.getkirby.com/t/beyond-kirby-headless-cms/26388/3 "2022-09-02T18:42:20Z")

</div>

Thank you for answering!  
And you mean this? I tried many things but sadly I couldn’t find the solution yet. 😅

 ![query](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/b/b0169879f2506d3f28b3c768887d9da4e1b7f122.png)

And even though I’ve used the dev version of KQL, they require these kinda authentication keys.  
`'auth' => ['xxx', 'xxx'],`  
Should I put the same (temporary) user credentials like above ones on Insomnia?

Re: and about the article you suggested, I checked it before but I will check it once again.  
Thanks!

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [September 2, 2022, 6:48pm UTC](https://forum.getkirby.com/t/beyond-kirby-headless-cms/26388/4 "2022-09-02T18:48:39Z")

</div>

This is the `Query` tab, where it says `Basic`, you have to enter a real username and password.

 ![Screen Shot 2022-09-02 at 20.48.18](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/9/92432dc775bcbc7eb134526adde8158b047d9bc5.png)

---

<div class="post-metadata">

**Author:** ![jinnniu](https://avatars.discourse-cdn.com/v4/letter/j/b5e925/32.png) [@jinnniu](https://forum.getkirby.com/u/jinnniu)\
**Post date:** [September 3, 2022, 7:48am UTC](https://forum.getkirby.com/t/beyond-kirby-headless-cms/26388/5 "2022-09-03T07:48:05Z")

</div>

Oh how silly I was, now it works 😅

And I have one more question about the connection between php and JS.  
Following the above link, I used the “guzzle” instead of ‘axios’ like this code(below).  
But the ‘query’ doesn’t accept arrays so I couldn’t get the other pages’ informations.  
Do you know how can I get all pages datas and fetch this api to JS file?

on index.php

```auto
$response = $client->request('POST', $api, [
...
'json' => [
        'query' => 'page("home").children',
]
])

$body = $response->getBody();
$data = json_decode($body);
$posts = $data->result->data;

```

---

<div class="post-metadata">

**Author:** ![elbaz](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/elbaz/32/12111_2.png) [@elbaz](https://forum.getkirby.com/u/elbaz)\
**Post date:** [November 2, 2022, 9:36am UTC](https://forum.getkirby.com/t/beyond-kirby-headless-cms/26388/6 "2022-11-02T09:36:11Z")

</div>

Hi,

I’ve got the same problem. I followed the documentation for Kirby headless ([Going Headless | Kirby CMS](https://getkirby.com/docs/cookbook/setup/headless-getting-started)) and when i created the new folder (for front), with Guzzle example code, I can’t get the same result as expected (“a simple list of the pages and content in the Photography pages”).  
Instead I have the following message :

```auto

Warning: Attempt to read property "data" on array in /Users/ ***/Sites/*** -front/index.php on line 36

Warning: foreach() argument must be of type array|object, null given in /Users/ ***/Sites/*** -front/index.php on line 39

```

However, everything works when I do api tests in Insomnia.

**Anyway, is there any specific documentation for using headless kirby for a React app?** Right now it’s hard to set up for a Kirby newbie…

Thank you very much.

* * *

_Here is the index.php code in mysite-front folder :_

```auto
<?php

require __DIR__. '/vendor/autoload.php';

use GuzzleHttp\Client;

$client = new GuzzleHttp\Client();

$api = 'http://mysite.test/api/query/';

// Create a POST request with Guzzle using KQL
$response = $client->request('POST', $api, [
    'verify' => false,
    'auth' => ['myid', 'mypassword'],
    'json' => [
        'query' => 'page("photography").children',

        'select' => [
            'url' => true,
            'title' => true,
            'text' => 'page.text.markdown',
            'images' => [
                'query' => 'page.images',
                'select' => [
                    'url' => true
                ],
            ],
        ],    
    ],

]);

// Handle the incoming data
$body = $response->getBody();
$data = json_decode($body);
$posts = $data->result->data;

// Loop over the result
foreach ($posts as $post) {
    echo '<h1>' . $post->title . '</h1>';
    echo $post->text;
    $images = $post->images;
    foreach ($images as $image) {
        echo '<img width="150" src="' . $image->url . '"/>';
    }
}

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [November 2, 2022, 10:02am UTC](https://forum.getkirby.com/t/beyond-kirby-headless-cms/26388/7 "2022-11-02T10:02:30Z")

</div>

> [@elbaz](#):
>
> `$posts = $data->result->data;`

Should be

```auto
$posts = $data->result;

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [November 2, 2022, 10:03am UTC](https://forum.getkirby.com/t/beyond-kirby-headless-cms/26388/8 "2022-11-02T10:03:13Z")

</div>

@jimbobrjames Did your code ever work like described? Or is the error due to changes in KQL?

---

<div class="post-metadata">

**Author:** ![elbaz](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/elbaz/32/12111_2.png) [@elbaz](https://forum.getkirby.com/u/elbaz)\
**Post date:** [November 2, 2022, 10:08am UTC](https://forum.getkirby.com/t/beyond-kirby-headless-cms/26388/9 "2022-11-02T10:08:17Z")

</div>

Wonderful. You’re right. Now I just have to think carefully to understand how to use all this with a js framework. Difficult task…And maybe a bad idea? (I really like implementing frontend with React)

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [November 2, 2022, 10:21am UTC](https://forum.getkirby.com/t/beyond-kirby-headless-cms/26388/10 "2022-11-02T10:21:36Z")

</div>

> [@elbaz](#):
>
> And maybe a bad idea? (I really like implementing frontend with React)

I’d say that depends on your reasoning for implementing your front-end with React (or any other reactive JS framework).

I’m not aware of any React examples in the wild.

However, if you know React, fetching data from a headless Kirby should work in the same way as you would fetch data from any other API.

For a general headless setup, also check out: [GitHub - johannschopplich/kirby-headless-starter: 🦭 Headless Kirby starter – KQL, Express-esque middlewares & more](https://github.com/johannschopplich/kirby-headless-starter)

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [November 2, 2022, 10:22am UTC](https://forum.getkirby.com/t/beyond-kirby-headless-cms/26388/11 "2022-11-02T10:22:07Z")

</div>

> [@texnixe](#):
>
> Did your code ever work like described? Or is the error due to changes in KQL?

Yes, i just ran my project from the cookbook guide and it works fine with:

```auto
$posts = $data->result->data;

```

The code worked at the time of going to press.

I cant seem to find a specific version in the KQL plugin used when I wrote the guide, but i do think a new version of the plugin has been published since.

---

<div class="post-metadata">

**Author:** ![elbaz](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/elbaz/32/12111_2.png) [@elbaz](https://forum.getkirby.com/u/elbaz)\
**Post date:** [November 2, 2022, 10:24am UTC](https://forum.getkirby.com/t/beyond-kirby-headless-cms/26388/12 "2022-11-02T10:24:09Z")

</div>

You’re right! Thank you so much for your help.