GraphQL Tab

[NghiaTranUIT]

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

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