(feat) add graphql support (#11)

* (feat) add graphql tab

* (feat) add gql to axios req

src/extension.ts

@@ -105,6 +105,12 @@ export function activate(context: vscode.ExtensionContext) {
           } else if (body.mode === "binary") {
             data = body.fileData;
             headersObj["Content-Type"] = "application/octet-stream";
+          } else if (body.mode === "graphql") {
+            data = JSON.stringify({
+              query: body.graphql.query,
+              variables: body.graphql.variables,
+            });
+            headersObj["Content-Type"] = "application/json";
           }
 
           axios({

webpack.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 //@ts-check
 
 "use strict";
@@ -104,7 +105,7 @@ const webviewConfig = (webpackEnv) => {
     },
     plugins: [
       new MonacoWebpackPlugin({
-        languages: ["html", "xml", "json"],
+        languages: ["html", "xml", "json", "graphql"],
       }),
       new webpack.ProvidePlugin({
         Buffer: ["buffer", "Buffer"],

webview/features/requestBody/GraphQL/index.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { Editor } from "../../../shared/Editor";
+import "./styles.css";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import {
+  requestBodyGraphqlQueryUpdated,
+  requestBodyGraphqlVariablesUpdated,
+  selectRequestBodyGraphqlQuery,
+  selectRequestBodyGraphqlVariables,
+} from "../requestBodySlice";
+
+export const GraphQL = () => {
+  const query = useAppSelector(selectRequestBodyGraphqlQuery);
+  const variables = useAppSelector(selectRequestBodyGraphqlVariables);
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="gql-wrapper">
+      <div className="gql-section">
+        <div className="gql-section-heading">QUERY</div>
+        <Editor
+          className="gql-editor"
+          value={query}
+          language="graphql"
+          onChange={(data) => dispatch(requestBodyGraphqlQueryUpdated(data))}
+        />
+      </div>
+      <div className="gql-section">
+        <div className="gql-section-heading">VARIABLES</div>
+        <Editor
+          className="gql-editor"
+          value={variables}
+          language="json"
+          onChange={(data) =>
+            dispatch(requestBodyGraphqlVariablesUpdated(data))
+          }
+        />
+      </div>
+    </div>
+  );
+};

webview/features/requestBody/GraphQL/styles.css

@@ -0,0 +1,23 @@
+.gql-wrapper {
+  display: flex;
+  height: 100%;
+  margin-top: 10px;
+}
+
+.gql-section {
+  height: 95%;
+  padding: 0 10px 0 10px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.gql-section-heading {
+  font-size: var(--default-font-size);
+  padding-bottom: 10px;
+  font-weight: 700;
+}
+
+.gql-editor {
+  height: 90%;
+}

webview/features/requestBody/RequestBody/index.tsx

@@ -4,6 +4,7 @@ import { FormData } from "../FormData";
 import { None } from "../NoBody";
 import { Raw } from "../Raw";
 import { UrlEncoded } from "../UrlEncoded";
+import { GraphQL } from "../GraphQL";
 import {
   requestBodyModes,
   requestBodyRawLanguages,
@@ -68,6 +69,8 @@ export const Body = () => {
           <Raw />
         ) : bodyMode === "binary" ? (
           <Binary />
+        ) : bodyMode === "graphql" ? (
+          <GraphQL />
         ) : null}
       </div>
     </div>

webview/features/requestBody/requestBodySlice.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { RootState } from "../../redux/store";
 
@@ -7,6 +8,7 @@ export const requestBodyModes = [
   { name: "x-www-form-urlencoded", value: "x-www-form-urlencoded" },
   { name: "raw", value: "raw" },
   { name: "binary", value: "binary" },
+  { name: "GraphQL", value: "graphql" },
 ];
 
 export const requestBodyRawLanguages = [
@@ -25,6 +27,7 @@ export interface RequestBodyState {
   formdata: { key: string; value: string; description: string }[];
   urlencoded: { key: string; value: string; description: string }[];
   options: any;
+  graphql: { query: string; variables: string };
 }
 
 const initialState: RequestBodyState = {
@@ -35,6 +38,7 @@ const initialState: RequestBodyState = {
   formdata: [],
   urlencoded: [],
   options: { raw: { language: "json" } },
+  graphql: { query: "", variables: "" },
 };
 
 const requestBodySlice = createSlice({
@@ -69,6 +73,12 @@ const requestBodySlice = createSlice({
       state.file = action.payload.name;
       state.fileData = action.payload.data;
     },
+    requestBodyGraphqlQueryUpdated(state, action: PayloadAction<string>) {
+      state.graphql.query = action.payload;
+    },
+    requestBodyGraphqlVariablesUpdated(state, action: PayloadAction<string>) {
+      state.graphql.variables = action.payload;
+    },
     requestBodyModeUpdated(state, action: PayloadAction<string>) {
       if (action.payload === "none") {
         state.mode = undefined;
@@ -91,6 +101,8 @@ export const {
   requestBodyUrlEncodedItemAdded,
   requestBodyUrlEncodedItemDeleted,
   requestBodyUrlEncodedItemUpdated,
+  requestBodyGraphqlQueryUpdated,
+  requestBodyGraphqlVariablesUpdated,
 } = requestBodySlice.actions;
 
 export const selectRequestBody = (state: RootState) => state.requestBody;
@@ -107,5 +119,9 @@ export const selectRequestBodyFormData = (state: RootState) =>
   state.requestBody.formdata;
 export const selectRequestBodyUrlEncoded = (state: RootState) =>
   state.requestBody.urlencoded;
+export const selectRequestBodyGraphqlQuery = (state: RootState) =>
+  state.requestBody.graphql.query;
+export const selectRequestBodyGraphqlVariables = (state: RootState) =>
+  state.requestBody.graphql.variables;
 
 export default requestBodySlice.reducer;