chore(flutter): GraphQL subscriptions by id (#5187)

* chore(flutter): GraphQL subscriptions by id

* fix: removed old cli method from Flutter path

* Fix: updated schema

* fix: added auth rules to old schema

* fix: spacing and auth mode

src/fragments/guides/api-graphql/android/subscriptions-by-id.mdx

@@ -1,4 +1,6 @@
-Now you can create a custom subscription for comment creation with a specific post id:
+import all0 from "/src/fragments/guides/api-graphql/common/subscriptions-by-id.mdx";
+
+<Fragments fragments={{all: all0}} />
 
 <BlockSwitcher>
 <Block name="Java">

src/fragments/guides/api-graphql/common/subscriptions-by-id.mdx

@@ -0,0 +1,58 @@
+Take for example the following GraphQL schema:
+
+```graphql
+type Post @model @auth(rules: [{ allow: public, provider: apiKey }]){
+  id: ID!
+  title: String!
+  content: String
+  comments: [Comment] @hasMany
+}
+
+type Comment @model @auth(rules: [{ allow: public, provider: apiKey }]){
+  id: ID!
+  content: String
+}
+```
+
+By default, subscriptions will be created for the following mutations:
+
+```graphql
+# Post type
+onCreatePost
+onUpdatePost
+onDeletePost
+
+# Comment type
+onCreateComment
+onUpdateComment
+onDeleteComment
+```
+
+One operation that is not covered is if you wanted to only subscribe to comments for a specific post.
+
+Because the schema has a one to many relationship enabled between posts and comments, you can use the auto-generated field `postCommentsId` that defines the relationship between the post and the comment to set this up in a new Subscription definition.
+
+To implement this, you could update the schema with the following:
+
+```graphql
+type Post @model @auth(rules: [{ allow: public, provider: apiKey }]){
+  id: ID!
+  title: String!
+  content: String
+  comments: [Comment] @hasMany
+}
+
+type Comment @model @auth(rules: [{ allow: public, provider: apiKey }]){
+  id: ID!
+  content: String
+  postCommentsId: ID!
+}
+
+type Subscription {
+  onCommentByPostId(postCommentsId: ID!): Comment
+    @aws_subscribe(mutations: ["createComment"])
+}
+
+```
+
+Now you can create a custom subscription for comment creation with a specific post id:

src/fragments/guides/api-graphql/flutter/subscriptions-by-id.mdx

@@ -1,4 +1,10 @@
-Now you can create a custom subscription for comment creation with a specific post id:
+<BlockSwitcher>
+
+<Block name="Stable (Mobile)">
+
+import all0 from "/src/fragments/guides/api-graphql/common/subscriptions-by-id.mdx";
+
+<Fragments fragments={{all: all0}} />
 
 ```dart
 Future<void> subscribeByPostId(String postId) async {
@@ -27,4 +33,55 @@ Future<void> subscribeByPostId(String postId) async {
     print('Error in subscription stream: $e');
   }
 }
-```
+```
+
+</Block>
+
+<Block name="Developer Preview (Mobile, Web & Desktop)">
+
+Take for example the following GraphQL schema:
+
+```graphql
+type Post @model @auth(rules: [{ allow: public, provider: apiKey }]){
+  id: ID!
+  title: String!
+  content: String
+  comments: [Comment] @hasMany
+}
+
+type Comment @model @auth(rules: [{ allow: public, provider: apiKey }]){
+  id: ID!
+  content: String
+  post: Post @belongsTo(fields: ["postCommentsId"])
+  postCommentsId: ID! 
+}
+```
+
+You can subscribe to comments from a specific post with the following:
+
+```dart
+Future<void> subscribeByPostId(String postId) async {
+  final subscriptionRequest = ModelSubscriptions.onCreate(
+    Comment.classType,
+    where: Comment.POST.eq(postId),
+    authorizationMode: APIAuthorizationType.apiKey,
+  );
+
+  final operation = Amplify.API.subscribe(
+    subscriptionRequest,
+    onEstablished: () => print('Subscription established'),
+  );
+
+  try {
+    await for (var event in operation) {
+      print('Subscription event data received: ${event.data}');
+    }
+  } on Exception catch (e) {
+    print('Error in subscription stream: $e');
+  }
+}
+```
+
+</Block>
+
+</BlockSwitcher>

src/fragments/guides/api-graphql/ios/subscriptions-by-id.mdx

@@ -1,4 +1,7 @@
-Now you can create a custom subscription for comment creation with a specific post id:
+import all0 from "/src/fragments/guides/api-graphql/common/subscriptions-by-id.mdx";
+
+<Fragments fragments={{all: all0}} />
+
 
 ```swift
 extension GraphQLRequest {

src/fragments/guides/api-graphql/js/subscriptions-by-id.mdx

@@ -1,3 +1,7 @@
+import all0 from "/src/fragments/guides/api-graphql/common/subscriptions-by-id.mdx";
+
+<Fragments fragments={{all: all0}} />
+
 ```js
 import { API } from 'aws-amplify';
 import { onCommentByPostId } from './graphql/subscriptions';

src/pages/guides/api-graphql/subscriptions-by-id/q/platform/[platform].mdx

@@ -7,63 +7,6 @@ In this guide you will learn how to create a custom GraphQL subscription that wi
 
 When using the Amplify GraphQL transform library, there will often be times when you need to expand the GraphQL schema and operations created by the `@model` directive. A common use case is when fine grained control is needed for GraphQL subscriptions.
 
-Take for example the following GraphQL schema:
-
-```graphql
-type Post @model {
-  id: ID!
-  title: String!
-  content: String
-  comments: [Comment] @hasMany
-}
-
-type Comment @model {
-  id: ID!
-  content: String
-}
-```
-
-By default, subscriptions will be created for the following mutations:
-
-```graphql
-# Post type
-onCreatePost
-onUpdatePost
-onDeletePost
-
-# Comment type
-onCreateComment
-onUpdateComment
-onDeleteComment
-```
-
-One operation that is not covered is if you wanted to only subscribe to comments for a specific post.
-
-Because the schema has a one to many relationship enabled between posts and comments, you can use the auto-generated field `postCommentsId` that defines the relationship between the post and the comment to set this up in a new Subscription definition.
-
-To implement this, you could update the schema with the following:
-
-```graphql
-type Post @model {
-  id: ID!
-  title: String!
-  content: String
-  comments: [Comment] @hasMany
-}
-
-type Comment @model {
-  id: ID!
-  content: String
-  postCommentsId: ID!
-}
-
-type Subscription {
-  onCommentByPostId(postCommentsId: ID!): Comment
-    @aws_subscribe(mutations: ["createComment"])
-}
-
-```
-
 import ios0 from "/src/fragments/guides/api-graphql/ios/subscriptions-by-id.mdx";
 
 <Fragments fragments={{ios: ios0}} />