diff --git a/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-http-datasource/index.mdx b/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-http-datasource/index.mdx
index b8f531bf2f5..c0aaea5302c 100644
--- a/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-http-datasource/index.mdx
+++ b/src/pages/[platform]/build-a-backend/data/custom-business-logic/connect-http-datasource/index.mdx
@@ -395,6 +395,8 @@ export function response(ctx) {
 
 ## Step 5 - Invoke custom queries or mutations
 
+<InlineFilter filters={["javascript", "angular", "react-native", "react", "nextjs", "vue"]}>
+
 From your generated Data client, you can find all your custom queries and mutations under the client.queries. and client.mutations. APIs respectively.
 
 <BlockSwitcher>
@@ -431,6 +433,486 @@ const { data, errors } = await client.mutations.deletePost({
 </Block>
 </BlockSwitcher>
 
+</InlineFilter>
+
+<InlineFilter filters={["swift"]}>
+
+From your client code, you can create a custom GraphQL request for each custom query and mutation. First define a type that matches the `Post` return type:
+
+```swift
+struct Post: Codable {
+  public let title: String?
+  public let content: String?
+  public let author: String
+}
+```
+
+<BlockSwitcher>
+<Block name="addPost">
+```swift
+struct AddPostResponse: Codable {
+  public let addPost: Post
+}
+
+let document = """
+  mutation AddPost($title: String, $content: String, $author: String!) {
+    addPost(title: $title, content: $content, author: $author) {
+      title
+      content
+      author
+    }
+  }
+  """
+
+let result = try await Amplify.API.mutate(request: GraphQLRequest<AddPostResponse>(
+  document: document,
+  variables: [
+    "title": "My Post",
+    "content": "My Content",
+    "author": "Chris"
+  ],
+  responseType: AddPostResponse.self
+))
+switch result {
+case .success(let response):
+  print(response.addPost)
+case .failure(let error):
+  print(error)
+}
+```
+</Block>
+<Block name="getPost">
+```swift
+struct GetPostResponse: Codable {
+  public let getPost: Post
+}
+
+let document = """
+  query GetPost($id: ID!) {
+    getPost(id: $id) {
+      title
+      content
+      author
+    }
+  }
+  """
+
+let result = try await Amplify.API.query(request: GraphQLRequest<GetPostResponse>(
+  document: document,
+  variables: [
+    "id": "<post-id>"
+  ],
+  responseType: GetPostResponse.self
+))
+switch result {
+case .success(let response):
+  print(response.getPost)
+case .failure(let error):
+  print(error)
+}
+```
+</Block>
+<Block name="updatePost">
+```swift
+struct UpdatePostResponse: Codable {
+  public let updatePost: Post
+}
+
+let document = """
+  mutation UpdatePost($id: ID!, $title: String) {
+    updatePost(id: $id, title: $title) {
+      title
+      content
+      author
+    }
+  }
+  """
+
+let result = try await Amplify.API.mutate(request: GraphQLRequest<UpdatePostResponse>(
+  document: document,
+  variables: [
+    "id": "<post-id>",
+    "title": "An Updated Post"
+  ],
+  responseType: UpdatePostResponse.self
+))
+switch result {
+case .success(let response):
+  print(response.updatePost)
+case .failure(let error):
+  print(error)
+}
+```
+</Block>
+<Block name="deletePost">
+```swift
+struct DeletePostResponse: Codable {
+  public let deletePost: Post
+}
+
+let document = """
+  mutation DeletePost($id: ID!) {
+    deletePost(id: $id) {
+      title
+      content
+      author
+    }
+  }
+  """
+
+let result = try await Amplify.API.mutate(request: GraphQLRequest<DeletePostResponse>(
+  document: document,
+  variables: [
+    "id": "<post-id>"
+  ],
+  responseType: DeletePostResponse.self
+))
+switch result {
+case .success(let response):
+  print(response.deletePost)
+case .failure(let error):
+  print(error)
+}
+```
+</Block>
+</BlockSwitcher>
+
+</InlineFilter>
+
+<InlineFilter filters={["android"]}>
+
+From your client code, you can create a custom GraphQL request for each custom query and mutation. First define a data class that matches the `Post` return type:
+
+```kotlin
+data class Post(
+  val title: String?,
+  val content: String?,
+  val author: String
+)
+```
+
+<BlockSwitcher>
+<Block name="addPost">
+```kotlin
+data class AddPostResponse(
+  val addPost: Post
+)
+
+val document = """
+  mutation AddPost(${'$'}title: String, ${'$'}content: String, ${'$'}author: String!) {
+    addPost(title: ${'$'}title, content: ${'$'}content, author: ${'$'}author) {
+      title
+      content
+      author
+    }
+  }
+""".trimIndent()
+
+val request = SimpleGraphQLRequest<String>(
+  document,
+  mapOf(
+    "title" to "My Post",
+    "content" to "My Content",
+    "author" to "Chris"
+  ),
+  String::class.java,
+  GsonVariablesSerializer())
+
+Amplify.API.mutate(
+  request,
+  {
+    if (it.hasErrors()) {
+      Log.e("MyAmplifyApp", "Mutation returned errors: ${it.errors}")
+    } else {
+      var gson = Gson()
+      val response = gson.fromJson(it.data, AddPostResponse::class.java)
+      Log.i("MyAmplifyApp", "${response.addPost}")
+    }
+  },
+  { Log.e("MyAmplifyApp", "Mutation failed", it) }
+)
+```
+</Block>
+<Block name="getPost">
+```kotlin
+data class GetPostResponse(
+  val getPost: Post
+)
+
+val document = """
+  query GetPost(${'$'}id: ID!) {
+    getPost(id: ${'$'}id) {
+      title
+      content
+      author
+    }
+  }
+""".trimIndent()
+
+val request = SimpleGraphQLRequest<String>(
+  document,
+  mapOf(
+    "id" to "<post-id>"
+  ),
+  String::class.java,
+  GsonVariablesSerializer())
+
+Amplify.API.query(
+  request,
+  {
+    if (it.hasErrors()) {
+      Log.e("MyAmplifyApp", "Query returned errors: ${it.errors}")
+    } else {
+      var gson = Gson()
+      val response = gson.fromJson(it.data, GetPostResponse::class.java)
+      Log.i("MyAmplifyApp", "${response.getPost}")
+    }
+  },
+  { Log.e("MyAmplifyApp", "Query failed", it) }
+)
+```
+</Block>
+<Block name="updatePost">
+```kotlin
+data class UpdatePostResponse(
+  val updatePost: Post
+)
+
+val document = """
+  mutation UpdatePost(${'$'}id: ID!, ${'$'}title: String) {
+    updatePost(id: ${'$'}id, title: ${'$'}title) {
+      title
+      content
+      author
+    }
+  }
+""".trimIndent()
+
+val request = SimpleGraphQLRequest<String>(
+  document,
+  mapOf(
+    "id" to "<post-id>",
+    "title" to "An Updated Post"
+  ),
+  String::class.java,
+  GsonVariablesSerializer())
+
+Amplify.API.mutate(
+  request,
+  {
+    if (it.hasErrors()) {
+      Log.e("MyAmplifyApp", "Mutation returned errors: ${it.errors}")
+    } else {
+      var gson = Gson()
+      val response = gson.fromJson(it.data, UpdatePostResponse::class.java)
+      Log.i("MyAmplifyApp", "${response.updatePost}")
+    }
+  },
+  { Log.e("MyAmplifyApp", "Mutation failed", it) }
+)
+```
+</Block>
+<Block name="deletePost">
+```kotlin
+data class DeletePostResponse(
+  val deletePost: Post
+)
+
+val document = """
+  mutation DeletePost(${'$'}id: ID!) {
+    deletePost(id: ${'$'}id) {
+      title
+      content
+      author
+    }
+  }
+""".trimIndent()
+
+val request = SimpleGraphQLRequest<String>(
+  document,
+  mapOf(
+    "id" to "<post-id>"
+  ),
+  String::class.java,
+  GsonVariablesSerializer())
+
+Amplify.API.mutate(
+  request,
+  {
+    if (it.hasErrors()) {
+      Log.e("MyAmplifyApp", "Mutation returned errors: ${it.errors}")
+    } else {
+      var gson = Gson()
+      val response = gson.fromJson(it.data, DeletePostResponse::class.java)
+      Log.i("MyAmplifyApp", "${response.deletePost}")
+    }
+  },
+  { Log.e("MyAmplifyApp", "Mutation failed", it) }
+)
+```
+</Block>
+</BlockSwitcher>
+
+</InlineFilter>
+
+<InlineFilter filters={["flutter"]}>
+
+From your client code, you can create a custom GraphQL request for each custom query and mutation. First define a class that matches the `Post` return type:
+
+```dart
+class Post {
+  final String? title;
+  final String? content;
+  final String author;
+
+  Post({this.title, this.content, required this.author});
+
+  factory Post.fromJson(Map<String, dynamic> json) {
+    return Post(
+      title: json['title'],
+      content: json['content'],
+      author: json['author'],
+    );
+  }
+}
+```
+
+<BlockSwitcher>
+<Block name="addPost">
+```dart
+import 'dart:convert';
+
+const graphQLDocument = '''
+  mutation AddPost(\$title: String, \$content: String, \$author: String!) {
+    addPost(title: \$title, content: \$content, author: \$author) {
+      title
+      content
+      author
+    }
+  }
+''';
+
+final request = GraphQLRequest<String>(
+  document: graphQLDocument,
+  variables: <String, dynamic>{
+    'title': 'My Post',
+    'content': 'My Content',
+    'author': 'Chris',
+  },
+);
+
+final response = await Amplify.API.mutate(request: request).response;
+
+if (response.hasErrors) {
+  safePrint('errors: ${response.errors}');
+} else {
+  Map<String, dynamic> jsonMap = json.decode(response.data!);
+  final post = Post.fromJson(jsonMap['addPost']);
+  safePrint(post.author);
+}
+```
+</Block>
+<Block name="getPost">
+```dart
+import 'dart:convert';
+
+const graphQLDocument = '''
+  query GetPost(\$id: ID!) {
+    getPost(id: \$id) {
+      title
+      content
+      author
+    }
+  }
+''';
+
+final request = GraphQLRequest<String>(
+  document: graphQLDocument,
+  variables: <String, dynamic>{
+    'id': '<post-id>',
+  },
+);
+
+final response = await Amplify.API.query(request: request).response;
+
+if (response.hasErrors) {
+  safePrint('errors: ${response.errors}');
+} else {
+  Map<String, dynamic> jsonMap = json.decode(response.data!);
+  final post = Post.fromJson(jsonMap['getPost']);
+  safePrint(post.author);
+}
+```
+</Block>
+<Block name="updatePost">
+```dart
+import 'dart:convert';
+
+const graphQLDocument = '''
+  mutation UpdatePost(\$id: ID!, \$title: String) {
+    updatePost(id: \$id, title: \$title) {
+      title
+      content
+      author
+    }
+  }
+''';
+
+final request = GraphQLRequest<String>(
+  document: graphQLDocument,
+  variables: <String, dynamic>{
+    'id': '<post-id>',
+    'title': 'An Updated Post',
+  },
+);
+
+final response = await Amplify.API.mutate(request: request).response;
+
+if (response.hasErrors) {
+  safePrint('errors: ${response.errors}');
+} else {
+  Map<String, dynamic> jsonMap = json.decode(response.data!);
+  final post = Post.fromJson(jsonMap['updatePost']);
+  safePrint(post.author);
+}
+```
+</Block>
+<Block name="deletePost">
+```dart
+import 'dart:convert';
+
+const graphQLDocument = '''
+  mutation DeletePost(\$id: ID!) {
+    deletePost(id: \$id) {
+      title
+      content
+      author
+    }
+  }
+''';
+
+final request = GraphQLRequest<String>(
+  document: graphQLDocument,
+  variables: <String, dynamic>{
+    'id': '<post-id>',
+  },
+);
+
+final response = await Amplify.API.mutate(request: request).response;
+
+if (response.hasErrors) {
+  safePrint('errors: ${response.errors}');
+} else {
+  Map<String, dynamic> jsonMap = json.decode(response.data!);
+  final post = Post.fromJson(jsonMap['deletePost']);
+  safePrint(post.author);
+}
+```
+</Block>
+</BlockSwitcher>
+
+</InlineFilter>
+
 ## Conclusion
 
 In this guide, you’ve added an external REST API as a HTTP data source to an Amplify Data API and defined custom queries and mutations, handled by AppSync JS resolvers, to manipulate Post items in an external REST API using the Amplify Gen 2 Data client.