Calling AppSync Query from an Angular service : How to convert the result to an observable?

Question

I'm new to AppSync and Observables.

So, I have this Service that calls the AppSync API and gets all the records. This is working fine as the console.log() prints all the statements.

import { Injectable } from '@angular/core';
import { AWSAppSyncClient, AUTH_TYPE } from 'aws-appsync';
import { GetAllQuery } from './graphql/queries/Queries';
import { IMessage } from './Models/IMessage';
import { from } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DatabaseService {
  private client = null;
  messages: IMessage[];
  constructor() {
    this.client = new AWSAppSyncClient({
      url: 'URL',
      region: 'REGION',
      auth: {
        type: 'API_KEY',
        apiKey: 'KEY',
      }
    });
  }

  async loadTasks(): Promise<IMessage[]> {
    const query = GetAllQuery;
    const result = await this.client.query({
      query, fetchPolicy: 'network-only'
    });
    this.messages = result.data.listPraveenTestMessages.items;
    console.log(this.messages);
    return this.messages;
  }
}

Next, I want to call this service from a Component and render the list of items in the UI. I'm unsure of the best approach to do this.

I thought using Observables would be preferable but was unsure how to do that.

export class MessageListComponent implements OnInit {
  messages: IMessage[];

  constructor(private databaseService: DatabaseService) {
   }

  ngOnInit(): void {
  }

  async populateList(){
    
  }

}