Why graphql is slow with angular

Help
, ,
1

I’m working with angular, graphQl, nestjs and mongoDb , When I make a query the get data from my database it takes time to get all data. by the way I’m using code first approach

This is how I fetch data in angular

getAllLogs() {
    this.apollo
      .query<any>({
        query: this.logService.getLog(),
      })
      .subscribe(({ data, loading }) => {
        console.log("logs", data.getLogsDataByProfile);
        this.source = new LocalDataSource(data.getLogsDataByProfile);
        // this.source.load(data.getLogsDataByProfile);
        this.loading = loading;
      });
  }

Version :
“@apollo/client”: “^3.5.10”,
“apollo-angular”: “^3.0.0”,

2

Hi Skander!

I would like to help you but first things first, can you provide us some details? I mean anything like following:

  • how long does the request takes between front-end and GraphQL API?
  • how long the GraphQL API resolver process data sources. Could it be possible that data sources API are providing data very slowly?
  • how big is the whole response

Thank you,
Radovan.

3

Thank you for replying, I’m extremely excited for your help.
Once I get a simple query such as getting data count 200 records from MongoDB it takes more time then expected.
In my case I made join between two collection and get the data it take more time I’m confused . I’m going to show my function

 async getLogsByProfile(role: string, name: string) {
    if (role === ROLEV1.MS_TECH_SOFT) {
      let logs = await this.profileModel.aggregate([
        {
          $match: {
            bindedSuperAdmin: name,
          },
        },
        {
          $lookup: {
            from: 'tpes',
            localField: 'nameUser',
            foreignField: 'merchantName',
            as: 'tpesBySite',
          },
        },
        {
          $lookup: {
            from: 'logs',
            localField: 'tpesBySite.terminalId',
            foreignField: 'terminalId',
            as: 'logsByTpes',
            pipeline: [
              {
                $sort: {
                  transactionDate: -1,
                
                },
              },
            ],
          },
        },

        { $unwind: '$tpesBySite' },

        { $unwind: '$logsByTpes' },
        {
          $project: {
            // bindedSuperAdmin: '$bindedSuperAdmin',
            // bindedBanque: '$bindedBanque',
            // bindedClient: '$bindedClient',
            uniqueID: '$logsByTpes.uniqueID',
            sn: '$logsByTpes.sn',
            terminalId: '$logsByTpes.terminalId',
            transactionAmount: '$logsByTpes.transactionAmount',
            currencyCode: '$logsByTpes.currencyCode',
            transactionDate: '$logsByTpes.transactionDate',
            transactionTime: '$logsByTpes.transactionTime',
            transactionType: '$logsByTpes.transactionType',
            cardPAN_PCI: '$logsByTpes.cardPAN_PCI',
            onlineRetrievalReferenceNumber:
              '$logsByTpes.onlineRetrievalReferenceNumber',
            outcome: '$logsByTpes.outcome',
          },
        },
      ]);

DTO:


@ObjectType()
export class Log extends Document {
  @Field()
  _id: string;
  @Field()
  sn: string;
  @Field()
  uniqueID: string;
  @Field()
  terminalId: string;
  @Field()
  transactionAmount: string;
  @Field()
  currencyCode: string;
  @Field({ nullable: true })
  transactionDate: string;
  @Field()
  transactionTime: string;
  @Field()
  transactionType: string;
  @Field()
  cardPAN_PCI: string;
  @Field()
  onlineRetrievalReferenceNumber: string;
  @Field()
  outcome: string;
  @Field()
  encryptionKeyKCV: string;
  @Field()
  transactionEncrypted: string;
  @Field({ nullable: true })
  switched: boolean;
}

Resolver :

@UseGuards(JwtAuthGuard)
  @Query(() => [Log])
  async getLogsDataByProfile(
    @CurrentUser() user: Profile,
  ) {
    let dataToList = await this.logService.getLogsByProfile(
      user.role,
      user.nameUser,
    );
    return dataToList;

Data about reponse
size : 62.95kb
time : 1174ms NB: not stable sometimes I got 600ms