Need help in kibana plugin development project to know how to fetch json data object send from kibana coreStart http post method(Client Side) to kibana irouter post method (at server end)

Elastic Stack Elasticsearch
1

Trying to fetch JSON data sent from client (React JS) - kibana coreStart http post method(Client Side) to kibana irouter post method (at server end)

My code looks like below :

Client Side :

const dataToSend = {
    title: 'Test Title',
    description: 'Testing alert creation through the API',
  };

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    // Include fs module
    // var fs = require('fs');
    try {
      const response = await fetch('/api/test_plug2/example', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(dataToSend),
      });
    
      if (response.ok) {
        console.log('Data sent successfully');
      } else {
        console.error('Error sending data:', response.statusText);
      }
    } catch (error) {
      console.error('Error sending data:', error);
    }
  };

Server Side :

import { IRouter } from '../../../../core/server';
import { schema } from '@kbn/config-schema';

export function defineRoutes(router: IRouter) {
  router.post(
    {
      path: '/api/test_plug2/example',
      validate: {
        body: schema.object({
          // Define your JSON schema here
          // Example: title, description, tags, etc.
          title: schema.string(),
          description: schema.string(),
        }),
      },
    },
    async (context, request, response) => {
      // Handle the incoming JSON data here
      const { body } = request;
      // Process the data and perform necessary actions
      // ...
      return response.ok({ body: 'Data received successfully' });
    }
  );
}

But I am facing below error for now :

Screenshot 2024-05-10 at 9.29.30 PM
Screenshot 2024-05-10 at 9.29.30 PM3018×958 221 KB

2

Using default behavior (code as below) I am able to capture data on client side,

But I want it exactly apposite, i.e. want to sent JSON data from client which should appear on server ( I am using post method for the same).

Server Side :

import { IRouter } from '../../../../core/server';

export function defineRoutes(router: IRouter) {
  router.get(
    {
      path: '/api/my_test_plug/example',
      validate: false,
    },
    async (context, request, response) => {
      return response.ok({
        body: {
          // time: new Date().toISOString(),
          time: 'sunil'
        },
      });
    }
  );
}

Client Side :

export const MyTestPlugApp = ({ basename, notifications, http, navigation }: MyTestPlugAppDeps) => {
  // Use React hooks to manage state.
  const [timestamp, setTimestamp] = useState<string | undefined>();

  const onClickHandler = () => {
    // Use the core http service to make a response to the server API.
    http.get('/api/my_test_plug/example').then((res) => {
      setTimestamp(res.time);
      // Use the core notifications service to display a success message.
      notifications.toasts.addSuccess(
        i18n.translate('myTestPlug.dataUpdated', {
          defaultMessage: 'Data updated',
        })
      );
    });
  };
3

this has been resolved, success code is as below :

Server Side :

import { IRouter } from '../../../../core/server';
import { schema } from '@kbn/config-schema';

export function defineRoutes(router: IRouter) {
  router.post(
    {
      path: '/api/my_test_plug/example',
      validate: {
        body: schema.object({
          // Define your JSON schema here
          // Example: title, description, tags, etc.
          title: schema.string(),
          description: schema.string(),
        }),
      },
    },
    async (context, request, response) => {
      const { body } = request;

      console.log(body)

      return response.ok({ body: `Where's my post data?` });
    }
  );
}

Client Side :

export const MyTestPlugApp = ({ basename, notifications, http, navigation }: MyTestPlugAppDeps) => {
  // Use React hooks to manage state.

  const dataToSend = {
    title: 'Test Title',
    description: 'Testing alert creation through the API',
  };

  const onClickHandler = async () => {
    await http.post('/api/my_test_plug/example', { body: JSON.stringify(dataToSend) });

      // Use the core notifications service to display a success message.
      notifications.toasts.addSuccess(
        i18n.translate('myTestPlug.dataUpdated', {
          defaultMessage: 'Data updated',
        })
      );
  };