feat: Add GraphQL variables support (#576)

lib/consts.dart

@@ -480,6 +480,7 @@ const kHintContent = "Enter content";
 const kHintText = "Enter text";
 const kHintJson = "Enter JSON";
 const kHintQuery = "Enter Query";
+const kHintVariables = "Enter Variables as JSON";
 // TODO: CodeField widget does not allow this hint. To be solved.
 const kHintScript = "// Use Javascript to modify this request dynamically";
 // Response Pane

lib/providers/collection_providers.dart

@@ -235,6 +235,7 @@ class CollectionStateNotifier
     ContentType? bodyContentType,
     String? body,
     String? query,
+    String? variables,
     List<FormDataModel>? formData,
     int? responseStatus,
     String? message,
@@ -296,6 +297,7 @@ class CollectionStateNotifier
               bodyContentType ?? currentHttpRequestModel.bodyContentType,
           body: body ?? currentHttpRequestModel.body,
           query: query ?? currentHttpRequestModel.query,
+          variables: variables ?? currentHttpRequestModel.variables,
           formData: formData ?? currentHttpRequestModel.formData,
         ),
         responseStatus: responseStatus ?? currentModel.responseStatus,

lib/screens/home_page/editor_pane/details_card/request_pane/request_body.dart

@@ -83,16 +83,46 @@ class EditRequestBody extends ConsumerWidget {
           APIType.graphql => Expanded(
             child: Padding(
               padding: kPt5o10,
-              child: TextFieldEditor(
-                key: Key("$selectedId-query"),
-                fieldKey: "$selectedId-query-editor",
-                initialValue: requestModel?.httpRequestModel?.query,
-                onChanged: (String value) {
-                  ref
-                      .read(collectionStateNotifierProvider.notifier)
-                      .update(query: value);
-                },
-                hintText: kHintQuery,
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  const Text(kLabelQuery),
+                  kVSpacer5,
+                  Expanded(
+                    flex: 2,
+                    child: TextFieldEditor(
+                      key: Key("$selectedId-query"),
+                      fieldKey: "$selectedId-query-editor",
+                      initialValue: requestModel?.httpRequestModel?.query,
+                      onChanged: (String value) {
+                        ref
+                            .read(collectionStateNotifierProvider.notifier)
+                            .update(query: value);
+                      },
+                      hintText: kHintQuery,
+                    ),
+                  ),
+                  kVSpacer10,
+                  const Text(kLabelVariables),
+                  kVSpacer5,
+                  Expanded(
+                    flex: 1,
+                    child: JsonTextFieldEditor(
+                      key: Key("$selectedId-graphql-variables"),
+                      fieldKey:
+                          "$selectedId-graphql-variables-editor-$darkMode",
+                      isDark: darkMode,
+                      initialValue:
+                          requestModel?.httpRequestModel?.variables,
+                      onChanged: (String value) {
+                        ref
+                            .read(collectionStateNotifierProvider.notifier)
+                            .update(variables: value);
+                      },
+                      hintText: kHintVariables,
+                    ),
+                  ),
+                ],
               ),
             ),
           ),

packages/better_networking/lib/models/http_request_model.dart

@@ -25,6 +25,7 @@ abstract class HttpRequestModel with _$HttpRequestModel {
     @Default(ContentType.json) ContentType bodyContentType,
     String? body,
     String? query,
+    String? variables,
     List<FormDataModel>? formData,
   }) = _HttpRequestModel;
 
@@ -64,6 +65,7 @@ abstract class HttpRequestModel with _$HttpRequestModel {
       hasFormDataContentType &&
       formDataMapList.isNotEmpty;
   bool get hasQuery => query?.isNotEmpty ?? false;
+  bool get hasVariables => variables?.isNotEmpty ?? false;
   List<FormDataModel> get formDataList => formData ?? <FormDataModel>[];
   List<Map<String, String>> get formDataMapList =>
       rowsToFormDataMapList(formDataList) ?? [];

packages/better_networking/lib/utils/graphql_utils.dart

@@ -1,9 +1,19 @@
+import 'dart:convert';
 import '../consts.dart';
 import '../models/models.dart';
 
 String? getGraphQLBody(HttpRequestModel httpRequestModel) {
   if (httpRequestModel.hasQuery) {
-    return kJsonEncoder.convert({"query": httpRequestModel.query});
+    final Map<String, dynamic> graphqlBody = {"query": httpRequestModel.query};
+    if (httpRequestModel.hasVariables) {
+      try {
+        graphqlBody["variables"] = jsonDecode(httpRequestModel.variables!);
+      } catch (_) {
+        // Keep the raw text if it isn't valid JSON so nothing is lost.
+        graphqlBody["variables"] = httpRequestModel.variables;
+      }
+    }
+    return kJsonEncoder.convert(graphqlBody);
   }
   return null;
 }

packages/better_networking/test/utils/http_request_utils_test.dart

@@ -241,6 +241,44 @@ void main() {
       final result = getRequestBody(APIType.graphql, model);
       expect(result, isNull);
     });
+
+    test('Includes parsed variables as JSON object when present', () {
+      const model = HttpRequestModel(
+        query: r'query($id: ID!) { user(id: $id) { name } }',
+        variables: '{"id": "42"}',
+        method: HTTPVerb.post,
+      );
+      final result = getRequestBody(APIType.graphql, model);
+      expect(
+        result,
+        '{\n  "query": "query(\$id: ID!) { user(id: \$id) { name } }",\n'
+        '  "variables": {\n    "id": "42"\n  }\n}',
+      );
+    });
+
+    test('Omits variables key for GraphQL when variables are empty', () {
+      const model = HttpRequestModel(
+        query: '{ users { name } }',
+        variables: '',
+        method: HTTPVerb.post,
+      );
+      final result = getRequestBody(APIType.graphql, model);
+      expect(result, '{\n  "query": "{ users { name } }"\n}');
+    });
+
+    test('Falls back to raw variables string when JSON is invalid', () {
+      const model = HttpRequestModel(
+        query: '{ users { name } }',
+        variables: 'not valid json',
+        method: HTTPVerb.post,
+      );
+      final result = getRequestBody(APIType.graphql, model);
+      expect(
+        result,
+        '{\n  "query": "{ users { name } }",\n'
+        '  "variables": "not valid json"\n}',
+      );
+    });
   });
 
   group('getFormDataType', () {