In this section, we are going to use Postman to submit an answer to a question that our React frontend is subscribed to. Hopefully, we should see a new answer automatically appear in our React frontend. Let's carry out the following steps to do so:

1. Make sure the React frontend is on the question page with DevTools open and the Console panel selected.
2. Open Postman and send the following request, making sure we submit an answer to the question that is open in the frontend:

3. Let's look at the React app:

We can see that the frontend received the question but, unfortunately, there was a problem rendering it. The problem is that the created property in the answer has been serialized as a string rather than a Date object.

4. Let's resolve this problem by creating interfaces for the question that comes from the server in QuestionsData.ts, just beneath the QuestionData and AnswerData interfaces:

export interface QuestionData {
  ...
}

export interface AnswerData {
  ...
}

export interface QuestionDataFromServer {
  questionId: number;
  title: string;
  content: string;
  userName: string;
  created: string;
  answers: AnswerDataFromServer[];
}

export interface AnswerDataFromServer {
  answerId: number;
  content: string;
  userName: string;
  created: string;
}

These interfaces have string-based dates, which means they properly model the data that is received from the web server.

5. Let's create a function just beneath these interfaces to map a question that comes from the server into the format our frontend expects to work with:

export const mapQuestionFromServer = (
  question: QuestionDataFromServer,
): QuestionData => ({
  ...question,
  created: new Date(question.created.substr(0, 19)),
  answers: question.answers.map(answer => ({
    ...answer,
    created: new Date(answer.created.substr(0, 19)),
  })),
});

We create a copy of the question and answer using the spread syntax and set the created dates to Date objects from the string-based date using the Date constructor. 

6. Back in QuestionPage.tsx, let's import this mapping function and interface:

import { 
  QuestionData, 
  getQuestion, 
  postAnswer, 
  mapQuestionFromServer, 
  QuestionDataFromServer 
} from './QuestionsData';

7. Now, we can use this function and interface in the ReceiveQuestion handler and overwrite the previous code:

connection.on(
  'ReceiveQuestion',
  (question: QuestionDataFromServer) => {
    console.log('ReceiveQuestion', question);
    setQuestion(mapQuestionFromServer(question));
  },
);

The frontend app will automatically refresh in the browser when we save these changes.

8. Send the request in Postman once more and look at the frontend app in the browser:

This time, the question with the new answer has been successfully received and shown in the app. Note that we'll see both the answers we submitted to the server because both were successfully saved into the database—the problem was that initially the frontend couldn't show the first submitted answer.

That completes our real-time API, along with a React frontend that interacts with it. Well done!