Как получить данные из Wordpress $wpdb во внешний интерфейс блоков React Gutenberg?

Я использую $wpdb для выполнения запроса mysql и получения данных из файла php.

$results = $wpdb->get_results("SELECT * FROM table_name"); 

Теперь я зарегистрировал блок Гутенберга с помощью api wordpress..

Компонент представляет собой файл .js, который использует (Wordpress React) под капотом:

import { registerBlockType } from "@wordpress/blocks";
import { __ } from "@wordpress/i18n";
import edit from "./pruefungenEdit";

registerBlockType("mytheme-blocks/pruefungen", {
    title: __("Pruefungen Block", "mytheme-blocks"),
    description: __("Display a Table of exams", "mytheme-blocks"),
    category: "mytheme-category",
    icon: {
        background: "#f03",
        foreground: "#fff",
        src: "dashicons-database",
    },
    keywords: [__("pruefungenBlock", "mytheme-blocks")],
    edit: edit,
    save: () => {
        return <p>Test</p>;
    },
});

Это мой компонент React, который я использую для вышеупомянутой функции edit():

import { Component } from "@wordpress/element";
import { withSelect } from "@wordpress/data";
import { __ } from "@wordpress/i18n";

class PruefungenEdit extends Component {

    render() {
        //where to get the data from the query in .php file??
        return <div>Data...</div>;
    }
}

export default PruefungenEdit;

Очевидно, что я не могу использовать php-код в своем файле .js react.. Я подумал о настройке небольшого сервера nodejs, который запрашивает мой локальный хост таблица mysql и отправляет эти данные по пользовательскому маршруту api. Затем я запрашиваю этот маршрут на своем интерфейсе react и отображаю данные... но для меня это выглядит слишком сложным обходным путем, я имею в виду, что php сам по себе является своего рода бэкэндом, разве Wordpress не предлагает такую возможность запрашивать данные mysql и каким-то образом отправлять их на интерфейс?

Теперь у меня вопрос: как мне перенести данные из php-файла в мой блок гутенберга, который я зарегистрировал для интерфейса редактора блоков?

РЕДАКТИРОВАТЬ - РЕШЕНИЕ: Это было это легко сделать, зарегистрировав пользовательскую конечную точку и просто запросив эту конечную точку внутри интерфейса react...

add_action( 'rest_api_init', function () {
  register_rest_route( 'wp/v1', '/employees', array(
    'methods' => 'GET',
    'callback' => 'get_employees'
    ));
});

function get_employees() {
    global $wpdb;
    $xmlArr = getparsedXMLArray();
    $uniqueIDArr = getUniqueID($xmlArr);

    $kurs_db = $wpdb->get_results(" SELECT DISTINCT kurs_ort_id, kurs_ort FROM ".$wpdb->prefix . "bsa_location ");
    $objJsonDocument = json_encode($kurs_db);
    $pruefungen = json_decode($objJsonDocument, TRUE);
    $foundPlaces = getAssociatedPlaces($pruefungen, $uniqueIDArr);

    $finishedData = addPlace($xmlArr, $foundPlaces);
    return $finishedData;
}

Интерфейс:

import { Component } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import apiFetch from "@wordpress/api-fetch";

class PruefungenEdit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            employees: [],
        };
    }

    componentDidMount() {
        try {
            apiFetch({
                path: "/wp/v1/employees",
            }).then((employees) => {
                this.setState({ employees, isLoaded: true });
            });
        } catch (error) {
            console.log(error);
            this.setState({
                error: error,
                isLoaded: true,
            });
        }
    }

    render() {
        const { error, isLoaded, employees } = this.state;
        if (error) {
            return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
            return <div>Loading...</div>;
        } else {
            return (
                <div className={"container"}>
                    <div className="row">
                        <div className="col-xs-12">
                            <table
                                id="pruefungentable"
                                className="table striped dark"
                                style={{ width: "100%" }}
                            >
                                <thead className="thead-dark ">
                                    <tr scope="row" className="table-danger">
                                        <th>#</th>
                                        <th>{__("KursID")}</th>
                                        <th>{__("KursOrt")}</th>
                                        <th>{__("Modul")}</th>
                                        <th>{__("Datum")}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {employees.map((employee, index) => (
                                        <tr key={index}>
                                            <td>{index}</td>
                                            <td>{employee.KursID}</td>
                                            <td>{employee.KursOrt}</td>
                                            <td>{employee.Modul}</td>
                                            <td>{employee.Datum}</td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            );
        }
    }
}

export default PruefungenEdit;