diff --git a/src-web/components/responseViewers/CsvViewer.tsx b/src-web/components/responseViewers/CsvViewer.tsx index 9a49037c..185295a1 100644 --- a/src-web/components/responseViewers/CsvViewer.tsx +++ b/src-web/components/responseViewers/CsvViewer.tsx @@ -13,8 +13,8 @@ export function CsvViewer({ response, className }: Props) { const body = useResponseBodyText(response); const parsed = useMemo(() => { - if (body === null) return null; - return Papa.parse(body); + if (body.data == null) return null; + return Papa.parse(body.data); }, [body]); if (parsed === null) return null; diff --git a/src-web/components/responseViewers/JsonViewer.tsx b/src-web/components/responseViewers/JsonViewer.tsx index 62949b3a..b30dd2ce 100644 --- a/src-web/components/responseViewers/JsonViewer.tsx +++ b/src-web/components/responseViewers/JsonViewer.tsx @@ -9,12 +9,15 @@ interface Props { } export function JsonViewer({ response, className }: Props) { - const rawBody = useResponseBodyText(response) ?? ''; + const rawBody = useResponseBodyText(response); + + if (rawBody.isLoading || rawBody.data == null) return null; + let parsed = {}; try { - parsed = JSON.parse(rawBody); + parsed = JSON.parse(rawBody.data); } catch (e) { - // foo + // Nothing yet } return ( diff --git a/src-web/components/responseViewers/TextViewer.tsx b/src-web/components/responseViewers/TextViewer.tsx index 5947efa7..ce2a316f 100644 --- a/src-web/components/responseViewers/TextViewer.tsx +++ b/src-web/components/responseViewers/TextViewer.tsx @@ -37,7 +37,7 @@ export function TextViewer({ response, pretty, className }: Props) { ); const contentType = useContentTypeFromHeaders(response.headers); - const rawBody = useResponseBodyText(response) ?? null; + const rawBody = useResponseBodyText(response); const isSearching = filterText != null; const filteredResponse = useFilterResponse({ @@ -99,7 +99,11 @@ export function TextViewer({ response, pretty, className }: Props) { return result; }, [canFilter, filterText, isJson, isSearching, response.id, setFilterText, toggleSearch]); - if (rawBody == null) { + if (rawBody.isLoading) { + return null; + } + + if (rawBody.data == null) { return ; } @@ -109,10 +113,11 @@ export function TextViewer({ response, pretty, className }: Props) { const formattedBody = pretty && contentType?.includes('json') - ? tryFormatJson(rawBody) + ? tryFormatJson(rawBody.data) : pretty && contentType?.includes('xml') - ? tryFormatXml(rawBody) - : rawBody; + ? tryFormatXml(rawBody.data) + : rawBody.data; + const body = isSearching && filterText?.length > 0 ? filteredResponse : formattedBody; return ( diff --git a/src-web/components/responseViewers/WebPageViewer.tsx b/src-web/components/responseViewers/WebPageViewer.tsx index cb675c72..8b761975 100644 --- a/src-web/components/responseViewers/WebPageViewer.tsx +++ b/src-web/components/responseViewers/WebPageViewer.tsx @@ -8,7 +8,7 @@ interface Props { export function WebPageViewer({ response }: Props) { const { url } = response; - const body = useResponseBodyText(response) ?? ''; + const body = useResponseBodyText(response).data ?? ''; const contentForIframe: string | undefined = useMemo(() => { if (body.includes('')) { diff --git a/src-web/hooks/useResponseBodyText.ts b/src-web/hooks/useResponseBodyText.ts index b676942d..0fe191fa 100644 --- a/src-web/hooks/useResponseBodyText.ts +++ b/src-web/hooks/useResponseBodyText.ts @@ -5,7 +5,6 @@ import { getResponseBodyText } from '../lib/responseBody'; export function useResponseBodyText(response: HttpResponse) { return useQuery({ queryKey: ['response-body-text', response?.updatedAt], - initialData: null, queryFn: () => getResponseBodyText(response), - }).data; + }); }