[GH-ISSUE #159] GraphQL Tab #159

New issue

Open

opened 2026-03-03 19:48:56 +03:00 by kerem · 0 comments

kerem commented

2026-03-03 19:48:56 +03:00

Owner

Originally created by @NghiaTranUIT on GitHub (Jan 2, 2023).
Original GitHub issue: https://github.com/ProxymanApp/proxyman-windows-linux/issues/159

Originally assigned to: @kics223w1 on GitHub.

Description

Acceptance Criteria

Add the GraphQL Tab in the Customize Tabs
GraphQL Tab will have 2 Code Mirrors
Add npm for: CodeMirror GraphQL Syntax Highlighting
Render the Query + Variables
Write some Unit tests to make sure GraphQLMetadataBuilder can extract the GraphQL Query and Variables properly

Suggestion Implementation

public struct GraphQLMetadataBuilder {
    public struct GraphQLInfo {
        public let query: String?
        public let variables: [String: Any]?
    }

    // MARK: - Public

    public static func getGraphQLInfo(data: Data) -> GraphQLInfo? {
        guard let dict = GraphQLMetadataBuilder.parseJSONDict(data: data) else {
            return nil
        }
        // Get Query and Variable at the same time
        let query = dict["query"] as? String
        if let variablesEntry = dict["variables"] as? [String: Any] {
            let variables: [String: Any] = ["variables": variablesEntry]
            return GraphQLInfo(query: query, variables: variables)
        }
        return GraphQLInfo(query: query, variables: nil)
    }
}

getGraphQLInfo() accepts the Request's Body and converts it to GraphQLInfo
Use 3rd lib to Prettify the Query GraphQL
Use simple JSON to prettify variables

How to test

Open https://www.producthunt.com/ (HomePage, User, Login, Notification)
There are many GraphQL requests that will be called
Verify it displays the GraphQL value properly

Originally created by @NghiaTranUIT on GitHub (Jan 2, 2023). Original GitHub issue: https://github.com/ProxymanApp/proxyman-windows-linux/issues/159 Originally assigned to: @kics223w1 on GitHub. ## Description ![Screenshot_2023-01-02_at_19_12_08](https://user-images.githubusercontent.com/5878421/210229871-3dc83e1c-5508-4aa0-b9ae-660bfd4dc036.jpg) ![Screenshot_2023-01-02_at_19_12_37](https://user-images.githubusercontent.com/5878421/210229882-30846cf8-1dae-47c5-a796-21b7eb4156b2.jpg) ## Acceptance Criteria - Add the GraphQL Tab in the Customize Tabs - GraphQL Tab will have 2 Code Mirrors - Add npm for: CodeMirror GraphQL Syntax Highlighting - Render the Query + Variables - Write some Unit tests to make sure GraphQLMetadataBuilder can extract the GraphQL Query and Variables properly ## Suggestion Implementation ```swift public struct GraphQLMetadataBuilder { public struct GraphQLInfo { public let query: String? public let variables: [String: Any]? } // MARK: - Public public static func getGraphQLInfo(data: Data) -> GraphQLInfo? { guard let dict = GraphQLMetadataBuilder.parseJSONDict(data: data) else { return nil } // Get Query and Variable at the same time let query = dict["query"] as? String if let variablesEntry = dict["variables"] as? [String: Any] { let variables: [String: Any] = ["variables": variablesEntry] return GraphQLInfo(query: query, variables: variables) } return GraphQLInfo(query: query, variables: nil) } } ``` - `getGraphQLInfo()` accepts the Request's Body and converts it to GraphQLInfo - Use 3rd lib to Prettify the Query GraphQL - Use simple JSON to prettify variables ## How to test 1. Open https://www.producthunt.com/ (HomePage, User, Login, Notification) 2. There are many GraphQL requests that will be called 3. Verify it displays the GraphQL value properly