Request body is now an object

src-web/components/App.tsx

@@ -1,4 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { MotionConfig } from 'framer-motion';
 import { Suspense } from 'react';
 import { DndProvider } from 'react-dnd';
@@ -23,10 +24,10 @@ export function App() {
       <MotionConfig transition={{ duration: 0.1 }}>
         <HelmetProvider>
           <DndProvider backend={HTML5Backend}>
-              <Suspense>
-                <AppRouter />
-                {/*<ReactQueryDevtools initialIsOpen={false} />*/}
-              </Suspense>
+            <Suspense>
+              <AppRouter />
+              <ReactQueryDevtools initialIsOpen={false} />
+            </Suspense>
           </DndProvider>
         </HelmetProvider>
       </MotionConfig>

src-web/components/RequestPane.tsx

@@ -133,8 +133,8 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
     [activeRequest, updateRequest],
   );
 
-  const handleBodyChange = useCallback(
-    (body: string) => updateRequest.mutate({ body }),
+  const handleBodyTextChange = useCallback(
+    (text: string) => updateRequest.mutate({ body: { text } }),
     [updateRequest],
   );
   const handleHeadersChange = useCallback(
@@ -211,9 +211,9 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                   placeholder="..."
                   className="!bg-gray-50"
                   heightMode={fullHeight ? 'full' : 'auto'}
-                  defaultValue={activeRequest.body ?? ''}
+                  defaultValue={`${activeRequest?.body?.text}` ?? ''}
                   contentType="application/json"
-                  onChange={handleBodyChange}
+                  onChange={handleBodyTextChange}
                   format={(v) => tryFormatJson(v)}
                 />
               ) : activeRequest.bodyType === BODY_TYPE_XML ? (
@@ -224,17 +224,17 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                   placeholder="..."
                   className="!bg-gray-50"
                   heightMode={fullHeight ? 'full' : 'auto'}
-                  defaultValue={activeRequest.body ?? ''}
+                  defaultValue={`${activeRequest?.body?.text}` ?? ''}
                   contentType="text/xml"
-                  onChange={handleBodyChange}
+                  onChange={handleBodyTextChange}
                 />
               ) : activeRequest.bodyType === BODY_TYPE_GRAPHQL ? (
                 <GraphQLEditor
                   forceUpdateKey={forceUpdateKey}
                   baseRequest={activeRequest}
                   className="!bg-gray-50"
-                  defaultValue={activeRequest?.body ?? ''}
-                  onChange={handleBodyChange}
+                  defaultValue={`${activeRequest?.body?.text}` ?? ''}
+                  onChange={handleBodyTextChange}
                 />
               ) : (
                 <EmptyStateText>No Body</EmptyStateText>

src-web/components/WorkspaceActionsDropdown.tsx

@@ -2,7 +2,6 @@ import { invoke } from '@tauri-apps/api';
 import classNames from 'classnames';
 import { memo, useMemo } from 'react';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
-import { useAlert } from '../hooks/useAlert';
 import { useAppRoutes } from '../hooks/useAppRoutes';
 import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
 import { useDeleteWorkspace } from '../hooks/useDeleteWorkspace';
@@ -39,7 +38,6 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
   const { appearance, toggleAppearance } = useTheme();
   const dialog = useDialog();
   const prompt = usePrompt();
-  const alert = useAlert();
   const routes = useAppRoutes();
 
   const items: DropdownItem[] = useMemo(() => {

src-web/components/responseViewers/TextViewer.tsx

@@ -1,4 +1,3 @@
-import { w } from '@tauri-apps/api/clipboard-79413165';
 import { useResponseBodyText } from '../../hooks/useResponseBodyText';
 import { useResponseContentType } from '../../hooks/useResponseContentType';
 import { tryFormatJson } from '../../lib/formatters';

src-web/hooks/useActiveEnvironment.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 import type { Environment } from '../lib/models';
 import { useActiveEnvironmentId } from './useActiveEnvironmentId';
 import { useEnvironments } from './useEnvironments';
@@ -6,10 +6,5 @@ import { useEnvironments } from './useEnvironments';
 export function useActiveEnvironment(): Environment | null {
   const id = useActiveEnvironmentId();
   const environments = useEnvironments();
-  const environment = useMemo(
-    () => environments.find((w) => w.id === id) ?? null,
-    [environments, id],
-  );
-
-  return environment;
+  return useMemo(() => environments.find((w) => w.id === id) ?? null, [environments, id]);
 }

src-web/hooks/useActiveEnvironmentId.ts

@@ -1,5 +1,4 @@
-import { useCallback } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import type { RouteParamsRequest } from './useAppRoutes';
 
 export function useActiveEnvironmentId(): string | null {

src-web/hooks/useFolders.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
-import type { Folder, HttpRequest } from '../lib/models';
+import type { Folder } from '../lib/models';
 import { useActiveWorkspaceId } from './useActiveWorkspaceId';
 
 export function foldersQueryKey({ workspaceId }: { workspaceId: string }) {

src-web/hooks/useIntrospectGraphQL.ts

@@ -32,7 +32,11 @@ export function useIntrospectGraphQL(baseRequest: HttpRequest) {
     const fetchIntrospection = async () => {
       setIsLoading(true);
       setError(undefined);
-      const args = { ...baseRequest, body: introspectionRequestBody };
+      const args = {
+        ...baseRequest,
+        bodyType: 'graphql',
+        body: { text: introspectionRequestBody },
+      };
       const response = await minPromiseMillis(sendEphemeralRequest(args, activeEnvironmentId), 700);
 
       if (response.error) {

src-web/hooks/useUpdateAnyFolder.ts

@@ -1,8 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
-import type { Folder, HttpRequest } from '../lib/models';
-import { getFolder, getRequest } from '../lib/store';
-import { requestsQueryKey } from './useRequests';
+import type { Folder } from '../lib/models';
+import { getFolder } from '../lib/store';
 import { foldersQueryKey } from './useFolders';
 
 export function useUpdateAnyFolder() {

src-web/hooks/useVariables.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api';
-import type { Variable } from '../lib/models';
+import type { EnvironmentVariable } from '../lib/models';
 
 export function variablesQueryKey({ environmentId }: { environmentId: string }) {
   return ['variables', { environmentId }];
@@ -11,7 +11,7 @@ export function useVariables({ environmentId }: { environmentId: string }) {
     useQuery({
       queryKey: variablesQueryKey({ environmentId }),
       queryFn: async () => {
-        return (await invoke('list_variables', { environmentId })) as Variable[];
+        return (await invoke('list_variables', { environmentId })) as EnvironmentVariable[];
       },
     }).data ?? []
   );

src-web/lib/models.ts

@@ -56,7 +56,7 @@ export interface HttpRequest extends BaseModel {
   sortPriority: number;
   name: string;
   url: string;
-  body: string | null;
+  body: Record<string, string | number | boolean | null | undefined>;
   bodyType: string | null;
   authentication: Record<string, string | number | boolean | null | undefined>;
   authenticationType: string | null;