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, 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.
Do you know how to solve this problem?
And back to “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 /
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!
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?
I’ve got the same problem. I followed the documentation for Kirby headless (Going Headless | Kirby CMS) 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 :
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 :
<?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 . '"/>';
}
}
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)
Yes, i just ran my project from the cookbook guide and it works fine with:
$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.
