diff --git a/desktop/plugins/public/network/RequestDetails.tsx b/desktop/plugins/public/network/RequestDetails.tsx
index ecb912cc7..62050ef4f 100644
--- a/desktop/plugins/public/network/RequestDetails.tsx
+++ b/desktop/plugins/public/network/RequestDetails.tsx
@@ -9,7 +9,6 @@
import React from 'react';
import {Component} from 'react';
-import querystring from 'querystring';
import xmlBeautifier from 'xml-beautifier';
import {Base64} from 'js-base64';
@@ -23,7 +22,13 @@ import {
} from 'flipper-plugin';
import {Select, Typography} from 'antd';
-import {bodyAsBinary, bodyAsString, formatBytes, getHeaderValue} from './utils';
+import {
+ bodyAsBinary,
+ bodyAsString,
+ formatBytes,
+ getHeaderValue,
+ queryToObj,
+} from './utils';
import {Request, Header, Insights, RetryInsights} from './types';
import {BodyOptions} from './index';
import {ProtobufDefinitionsRepository} from './ProtobufDefinitionsRepository';
@@ -523,7 +528,7 @@ class JSONFormatter {
class LogEventFormatter {
formatRequest(request: Request) {
if (request.url.indexOf('logging_client_event') > 0) {
- const data = querystring.parse(bodyAsString(request.requestData));
+ const data = queryToObj(bodyAsString(request.requestData));
if (typeof data.message === 'string') {
data.message = JSON.parse(data.message);
}
@@ -535,7 +540,7 @@ class LogEventFormatter {
class GraphQLBatchFormatter {
formatRequest(request: Request) {
if (request.url.indexOf('graphqlbatch') > 0) {
- const data = querystring.parse(bodyAsString(request.requestData));
+ const data = queryToObj(bodyAsString(request.requestData));
if (typeof data.queries === 'string') {
data.queries = JSON.parse(data.queries);
}
@@ -575,7 +580,7 @@ class GraphQLFormatter {
if (!decoded) {
return undefined;
}
- const data = querystring.parse(bodyAsString(decoded));
+ const data = queryToObj(bodyAsString(decoded));
if (typeof data.variables === 'string') {
data.variables = JSON.parse(data.variables);
}
@@ -636,10 +641,7 @@ class FormUrlencodedFormatter {
return undefined;
}
return (
-
+
);
}
};
diff --git a/desktop/plugins/public/network/index.tsx b/desktop/plugins/public/network/index.tsx
index b9ce02eb1..812dd91cb 100644
--- a/desktop/plugins/public/network/index.tsx
+++ b/desktop/plugins/public/network/index.tsx
@@ -57,7 +57,6 @@ import {
decodeBody,
} from './utils';
import RequestDetails from './RequestDetails';
-import {URL} from 'url';
import {assembleChunksIfResponseIsComplete} from './chunks';
import {DeleteOutlined} from '@ant-design/icons';
import {ManageMockResponsePanel} from './request-mocking/ManageMockResponsePanel';
diff --git a/desktop/plugins/public/network/utils.tsx b/desktop/plugins/public/network/utils.tsx
index fdd64b6de..8ddc9953b 100644
--- a/desktop/plugins/public/network/utils.tsx
+++ b/desktop/plugins/public/network/utils.tsx
@@ -170,6 +170,15 @@ export function bodyAsBinary(
return undefined;
}
+export const queryToObj = (query: string) => {
+ const params = new URLSearchParams(query);
+ const obj: Record = {};
+ params.forEach((value, key) => {
+ obj[key] = value;
+ });
+ return obj;
+};
+
function escapeCharacter(x: string) {
const code = x.charCodeAt(0);
return code < 16 ? '\\u0' + code.toString(16) : '\\u' + code.toString(16);