Amplify Flutter Secondary Index Query Documentation (#8384)

added documentation for flutter querying by secondary indexes in the data category

Author: ekjotmultani

src/pages/[platform]/build-a-backend/data/data-modeling/secondary-index/index.mdx

@@ -1,5 +1,5 @@
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-
+// cspell:ignore ACCOUNTREPRESENTATIVEID
 export const meta = {
   title: 'Customize secondary indexes',
   description:
@@ -48,7 +48,7 @@ export const schema = a.schema({
 });
 ```
 
-<InlineFilter filters={["javascript", "angular", "react-native", "react", "nextjs", "vue", "android", "flutter"]}>
+<InlineFilter filters={["javascript", "angular", "react-native", "react", "nextjs", "vue", "android"]}>
 
 The example client query below allows you to query for "Customer" records based on their `accountRepresentativeId`:
 
@@ -104,6 +104,27 @@ let queriedCustomers = try await Amplify.API.query(
 ```
 
 </InlineFilter>
+
+<InlineFilter filters={["flutter"]}>
+
+The example client query below allows you to query for "Customer" records based on their `accountRepresentativeId`:
+
+```dart title="lib/main.dart"
+import 'package:amplify_api/amplify_api.dart';
+import 'package:amplify_flutter/amplify_flutter.dart';
+import 'models/ModelProvider.dart';
+
+// highlight-start
+final request = ModelQueries.list(
+  Customer.classType,
+  where: Customer.ACCOUNTREPRESENTATIVEID.eq(YOUR_REP_ID),
+);
+// highlight-end
+
+```
+
+</InlineFilter>
+
 <Accordion title="Review how this works under the hood with Amazon DynamoDB">
 
 Amplify uses Amazon DynamoDB tables as the default data source for `a.model()`. For key-value databases, it is critical to model your access patterns with "secondary indexes". Use the `.secondaryIndexes()` modifier to configure a secondary index.
@@ -133,7 +154,7 @@ export const schema = a.schema({
 });
 ```
 
-<InlineFilter filters={["javascript", "angular", "react-native", "react", "nextjs", "vue", "android", "flutter"]}>
+<InlineFilter filters={["javascript", "angular", "react-native", "react", "nextjs", "vue", "android",]}>
 
 On the client side, you should find a new `listBy...` query that's named after hash key and sort keys. For example, in this case: `listByAccountRepresentativeIdAndName`. You can supply the filter as part of this new list query:
 
@@ -185,6 +206,26 @@ let queriedCustomers = try await Amplify.API.query(
 ```
 </InlineFilter>
 
+<InlineFilter filters={["flutter"]}>
+
+The example client query below allows you to query for "Customer" records based on their `name` AND their `accountRepresentativeId`:
+
+```dart title="lib/main.dart"
+import 'package:amplify_api/amplify_api.dart';
+import 'package:amplify_flutter/amplify_flutter.dart';
+import 'models/ModelProvider.dart';
+
+// highlight-start
+final request = ModelQueries.list(
+  Customer.classType,
+  where: Customer.ACCOUNTREPRESENTATIVEID.eq(YOUR_REP_ID) & Customer.NAME.beginsWith("Rene"),
+);
+// highlight-end
+
+```
+
+</InlineFilter>
+
 ## Customize the query field for secondary indexes
 
 You can also customize the auto-generated query name under `client.models.<MODEL_NAME>.listBy...` by setting the `queryField()` modifier.
@@ -206,7 +247,7 @@ const schema = a.schema({
 });
 ```
 
-<InlineFilter filters={["javascript", "angular", "react-native", "react", "nextjs", "vue", "android", "flutter"]}>
+<InlineFilter filters={["javascript", "angular", "react-native", "react", "nextjs", "vue", "android"]}>
 
 In your client app code, you'll see query updated under the Data client:
 
@@ -258,6 +299,43 @@ let queriedCustomers = try await Amplify.API.query(
 ```
 </InlineFilter>
 
+<InlineFilter filters={["flutter"]}>
+
+In your client app code, you can use the updated query name.
+
+```dart title="lib/main.dart"
+import 'package:amplify_api/amplify_api.dart';
+import 'package:amplify_flutter/amplify_flutter.dart';
+import 'models/ModelProvider.dart';
+
+var accountRepresentativeId = "John";
+var operationName = "listByRep";
+var document = """
+  query ListByRep {
+    $operationName(accountRepresentativeId: "$accountRepresentativeId") {
+      items {
+        accountRepresentativeId
+        createdAt
+        id
+        name
+        phoneNumber
+        updatedAt
+      }
+      nextToken
+    }
+  }
+  """;
+
+final request = GraphQLRequest(
+  document: document,
+  variables: {
+    'accountRepresentativeId': accountRepresentativeId,
+    'operationName': operationName, 
+  },
+);
+```
+</InlineFilter>
+
 
 ## Customize the name of secondary indexes