IOS datastore query causing performance drop/lag and slow

[Kam5678]

Description

When I run the following function:

  Future<List<Questionnaire>> getUserQuestionnaireHistoryByName(
      String userID, String questionnaireName) {
    final questionnaireList = Amplify.DataStore.query(
      Questionnaire.classType,
      where: Questionnaire.USERID
          .eq(userID)
          .and(Questionnaire.QUESTIONNAIRENAME.eq(questionnaireName)),
      sortBy: [Questionnaire.RESPONSEDATE.descending()],
    );

    return questionnaireList;
  }

On IOS I get a performance issue, where the whole app briefly lags, while on Android I don't run into this issue at all. This performance issue happens, because I have a button and when the button is clicked, we immediately transition to a new page, where when that page is being loaded up, there is defn some lag and frame drop, when running a amplify datastore query during post frame, which also takes a while.

Categories

• Analytics
• API (REST)
• API (GraphQL)
• Auth
• Authenticator
• DataStore
• Notifications (Push)
• Storage

Steps to Reproduce

Main.dart build function

@override
  Widget build(BuildContext context) {
    super.build(context);
    pageList = [const PrivacyPage(), const TermsPage()];
    return 
      PopScope(
        canPop: false,
        onPopInvoked: (didPop) {
          setState(() {
            _selectedIndex = 0;
          });
        },
        child: Scaffold(
          backgroundColor: FlavorColor.backgroundSpineScaffoldColor,
          body: pageList[_selectedIndex],
          bottomNavigationBar: 
          BottomNavigationBar(
                    unselectedItemColor: Colors.grey.shade400,
        selectedItemColor:
            FlavorColor.HOME_SCREEN_SELECTED_BOTTOMBAR_TEXT_COLOR,
            onTap: _onItemClicked,
            items: [BottomNavigationBarItem(icon: Icon(Icons.home), label: "home"),
          BottomNavigationBarItem(icon: Icon(Icons.local_police_outlined), label: "loading"),])
        ),
      );
  }

Privacy page:

import 'package:ap_sci_app/helper/locator.dart';
import 'package:ap_sci_app/helper/start_up_service.dart';
import 'package:flutter/material.dart';

class PrivacyPage extends StatelessWidget {
  const PrivacyPage({super.key});

  @override
  Widget build(BuildContext context) {
    final StartUpSharedPreferenceService _suSharedPrefService =
        getIt<StartUpSharedPreferenceService>();
    final bool useMobileLayout = MediaQuery.of(context).size.shortestSide < 600;
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
      Center(child:Text("Home", style: TextStyle(color: Colors.white)))
    ]);
  }
}

Terms Page

import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:ap_sci_app/backend_features/auth/aws_auth_functions.dart';
import 'package:ap_sci_app/helper/locator.dart';
import 'package:ap_sci_app/helper/start_up_service.dart';
import 'package:ap_sci_app/models/Questionnaire.dart';
import 'package:ap_sci_app/screens/settings/profile/sci_helper.dart';
import 'package:flutter/material.dart';

class TermsPage extends ConsumerStatefulWidget {
  const TermsPage({super.key});

  @override
  ConsumerState<TermsPage> createState() => _TermsPageState();
}

class _TermsPageState extends ConsumerState<TermsPage> {
  final StartUpSharedPreferenceService _suSharedPrefService =
      getIt<StartUpSharedPreferenceService>();

  Future<List<Questionnaire>> getUserQuestionnaireHistoryByName(
      String userID, String questionnaireName) async{
    final questionnaireList = await Amplify.DataStore.query(
      Questionnaire.classType,
      where: Questionnaire.USERID
          .eq(userID)
          .and(Questionnaire.QUESTIONNAIRENAME.eq(questionnaireName)),
      sortBy: [Questionnaire.RESPONSEDATE.descending()],
    );

    return questionnaireList;
  }

  Future<void> questionnaireFunction() async {
    String userID = await getUserID();
    await getUserQuestionnaireHistoryByName(
        userID, _suSharedPrefService.dailyCheckInName);
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) async {
      await questionnaireFunction();
      setState(() {
        done = true;
      });
    });
    
  }

  bool done = false;
  @override
  Widget build(BuildContext context) {
    final bool useMobileLayout = MediaQuery.of(context).size.shortestSide < 600;
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
      Center(child:Text(done ? "Done" :"Loading", style: TextStyle(color: Colors.white)))
    ]);
  }
}

Using the files above, i have a simple program where I am just switching between two pages using bottom navigator bar, running the amplify datastore query, during a post frame callback for the loading page, and you can see a performance lag for some reason only on IOS, and it takes a really long time as well.

No issues on Android.
Any possible reason/explanation why this is happening?

Screenshots

Videos:
IOS:
https://github.com/user-attachments/assets/15fb62ce-05e4-40a4-a9a4-a12ff9326b90

Android:
https://github.com/user-attachments/assets/f7fa1b78-7b76-422d-8868-c3e864948477

Platforms

• iOS
• Android
• Web
• macOS
• Windows
• Linux

Flutter Version

3.27.4

Amplify Flutter Version

2.6.1

Deployment Method

Amplify CLI (Gen 1)

Schema

# This "input" configures a global authorization rule to enable public access to
# all models in this schema. Learn more about authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules
# input AMPLIFY {
#   globalAuthRule: AuthRule = { allow: public }
# } # FOR TESTING ONLY!
type Questionnaire
	@model
	@auth(
		rules: [
			{ allow: owner, ownerField: "userID" }
			{ allow: groups, groups: ["Admin", "Researcher"] }
		]
	) {
	id: ID!
	user: User @belongsTo
	responsedate: AWSDate!
	question: [Question] @hasMany
	questionnaireName: String!
	userID: String
	createdAt: AWSDateTime
	updatedAt: AWSDateTime
	status: Boolean
	project: Project @belongsTo
	researchers: [Researcher]
		@manyToMany(relationName: "ResearcherQuestionnaire")
	completionStatus: String
	questionnaireLocation: String
	questionnaireType: String
	distributionFrequency: String
	pushReminders: [String]
	schedule: Schedule @belongsTo
	activities: [Activity] @hasMany
	inPersonVisit: InPersonVisit @belongsTo
	details: AWSJSON
}

[tyllark]

Hello @Kam5678, thanks for taking the time to reach out. I'm trying to replicate your backend, but the schema is missing some type definitions. Could you please provide the rest of your schema.

[Kam5678]

Hi @tyllark , thank you for looking into this!!

Would it be possible for me to send the schema over privately?

[tyllark]

Hello @Kam5678, I'm looking into a method for sending the schema in a secure manner. In the meantime I've been trying to reproduce the issue with a simplified versions of the missing models without any luck:

type Project @model {
	id: ID!
  	questionnaires: [Questionnaire] @hasMany
  	name: String!
}

How many entries are returned from your getUserQuestionnaireHistoryByName call on both iOS and Android? When I stored ~10,000 Questionnaires locally it was taking ~8 seconds to run Amplify.DataStore.query(Questionnaire.classType);. Even with 100-200 entries it was taking ~.2 seconds to complete which makes awaiting a DataStore query not ideal within the Flutter render cycle. While we investigate the performance of DataStore you can use a StateManagement solution such as Listenables or avoid awaiting Amplify.DataStore.query within the Flutter render cycle to make this performance issue feel more responsive.

@override
void initState() {
   super.initState();
    questionnaireFunction().then(
      (_) => setState(() {
        done = true;
      }),
    );
}