@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/node-forms/GraphQLForm.tsx

@@ -1,679 +1,679 @@
-import React, { useState, useCallback, memo } from 'react';
-import {
-    Box,
-    Button,
-    TextField,
-    Typography,
-    Stack,
-    IconButton,
-    Divider,
-    Accordion,
-    AccordionSummary,
-    AccordionDetails,
-    Tab,
-    Tabs,
-} from '@mui/material';
-import { Add as AddIcon, Delete as DeleteIcon, ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
-import { useTranslation } from 'react-i18next';
-import { useFormValidation } from '../../hooks/useFormValidation';
-import ValidationError from '../../atoms/ValidationError';
-import { GraphQLNodeForm } from '../../types/workflow-node-data-types';
-import GraphQLCustomCodeModal from '../../components/GraphQLCustomCodeModal';
-
-interface GraphQLFormProps {
-    formData: GraphQLNodeForm;
-    handleInputChange: (key: string, value: unknown) => void;
-    handleMultipleInputChanges: (changes: { [key: string]: unknown }) => void;
-}
-
-const GraphQLForm: React.FC<GraphQLFormProps> = ({
-    formData,
-    handleInputChange,
-    handleMultipleInputChanges,
-}) => {
-    const { t } = useTranslation();
-    const [expandedSections, setExpandedSections] = useState({
-        operation: true,
-        fields: true,
-        arguments: true,
-        variables: true,
-        headers: false,
-    });
-    const [isModalOpen, setModalOpen] = useState(false);
-
-    const {
-        validationState,
-        setFieldError,
-        setFieldTouched,
-        shouldShowFieldError,
-        getFieldError,
-        clearFieldError,
-    } = useFormValidation();
-
-    // Handle section expansion - memoized to prevent recreation
-    const handleSectionToggle = useCallback((section: keyof typeof expandedSections) => {
-        setExpandedSections(prev => ({
-            ...prev,
-            [section]: !prev[section]
-        }));
-    }, []);
-
-    // Handle mode change
-    const handleModeChange = useCallback((event: React.SyntheticEvent, newMode: string) => {
-        handleInputChange('mode', newMode);
-    }, [handleInputChange]);
-
-    // Handle modal
-    const handleModalOpen = useCallback(() => {
-        setModalOpen(true);
-    }, []);
-
-    const handleModalClose = useCallback(() => {
-        setModalOpen(false);
-    }, []);
-
-    const handleCustomQueryChange = useCallback((code: string) => {
-        handleInputChange('customQuery', code);
-    }, [handleInputChange]);
-
-    // Handle header management
-    const addHeader = useCallback(() => {
-        const newHeaders = [...(formData.headers || []), { key: '', value: '' }];
-        handleInputChange('headers', newHeaders);
-    }, [formData.headers, handleInputChange]);
-
-    const updateHeader = useCallback((index: number, field: 'key' | 'value', value: string) => {
-        const updatedHeaders = [...(formData.headers || [])];
-        updatedHeaders[index] = { ...updatedHeaders[index], [field]: value };
-        handleInputChange('headers', updatedHeaders);
-    }, [formData.headers, handleInputChange]);
-
-    const removeHeader = useCallback((index: number) => {
-        const updatedHeaders = (formData.headers || []).filter((_, i) => i !== index);
-        handleInputChange('headers', updatedHeaders);
-    }, [formData.headers, handleInputChange]);
-
-    // Handle arguments management
-    const addArgument = useCallback(() => {
-        const newArguments = [...(formData.arguments || []), { key: '', value: '' }];
-        handleInputChange('arguments', newArguments);
-    }, [formData.arguments, handleInputChange]);
-
-    const updateArgument = useCallback((index: number, field: 'key' | 'value', value: string) => {
-        const updatedArguments = [...(formData.arguments || [])];
-        updatedArguments[index] = { ...updatedArguments[index], [field]: value };
-        handleInputChange('arguments', updatedArguments);
-    }, [formData.arguments, handleInputChange]);
-
-    const removeArgument = useCallback((index: number) => {
-        const updatedArguments = (formData.arguments || []).filter((_, i) => i !== index);
-        handleInputChange('arguments', updatedArguments);
-    }, [formData.arguments, handleInputChange]);
-
-    // Handle fields management
-    const addField = useCallback(() => {
-        const newFields = [...(formData.fields || []), { name: '' }];
-        handleInputChange('fields', newFields);
-    }, [formData.fields, handleInputChange]);
-
-    const updateField = useCallback((index: number, field: 'name', value: string) => {
-        const updatedFields = [...(formData.fields || [])];
-        updatedFields[index] = { ...updatedFields[index], [field]: value };
-        handleInputChange('fields', updatedFields);
-    }, [formData.fields, handleInputChange]);
-
-    const removeField = useCallback((index: number) => {
-        const updatedFields = (formData.fields || []).filter((_, i) => i !== index);
-        handleInputChange('fields', updatedFields);
-    }, [formData.fields, handleInputChange]);
-
-    // Handle variables management
-    const addVariable = useCallback(() => {
-        const newVariables = [...(formData.variables || []), { key: '', value: '', type: 'String' }];
-        handleInputChange('variables', newVariables);
-    }, [formData.variables, handleInputChange]);
-
-    const updateVariable = useCallback((index: number, field: 'key' | 'value' | 'type', value: string) => {
-        const updatedVariables = [...(formData.variables || [])];
-        updatedVariables[index] = { ...updatedVariables[index], [field]: value };
-        handleInputChange('variables', updatedVariables);
-    }, [formData.variables, handleInputChange]);
-
-    const removeVariable = useCallback((index: number) => {
-        const updatedVariables = (formData.variables || []).filter((_, i) => i !== index);
-        handleInputChange('variables', updatedVariables);
-    }, [formData.variables, handleInputChange]);
-
-    // Memoized handlers for accordion toggles
-    const handleOperationToggle = useCallback(() => {
-        handleSectionToggle('operation');
-    }, [handleSectionToggle]);
-
-    const handleFieldsToggle = useCallback(() => {
-        handleSectionToggle('fields');
-    }, [handleSectionToggle]);
-
-    const handleArgumentsToggle = useCallback(() => {
-        handleSectionToggle('arguments');
-    }, [handleSectionToggle]);
-
-    const handleVariablesToggle = useCallback(() => {
-        handleSectionToggle('variables');
-    }, [handleSectionToggle]);
-
-    const handleHeadersToggle = useCallback(() => {
-        handleSectionToggle('headers');
-    }, [handleSectionToggle]);
-
-    const graphqlFormStyles = {
-        accordion: {
-            backgroundColor: 'transparent',
-            color: '#FFFFFF',
-            '&:before': {
-                backgroundColor: 'transparent',
-            },
-            '& .MuiAccordionSummary-root': {
-                color: '#FFFFFF',
-            },
-        },
-        textField: {
-            '& .MuiOutlinedInput-root': {
-                color: '#FFFFFF',
-                '& fieldset': {
-                    borderColor: '#8E8E93',
-                },
-                '&:hover fieldset': {
-                    borderColor: '#FFFFFF',
-                },
-                '&.Mui-focused fieldset': {
-                    borderColor: '#3688A2',
-                },
-            },
-            '& .MuiInputLabel-root': {
-                color: '#8E8E93',
-                '&.Mui-focused': {
-                    color: '#3688A2',
-                },
-            },
-        },
-    };
-
-    // Generate GraphQL query preview
-    const generateQueryPreview = useCallback(() => {
-        const operationType = formData.operationType || 'query';
-        const operationName = formData.operationName ? ` ${formData.operationName}` : '';
-        const rootField = formData.rootField || 'field';
-
-        // Build arguments string
-        const args = (formData.arguments || [])
-            .filter(arg => arg.key && arg.value)
-            .map(arg => `${arg.key}: ${arg.value}`)
-            .join(', ');
-        const argsString = args ? `(${args})` : '';
-
-        // Build fields string
-        const fields = (formData.fields || [])
-            .filter(field => field.name)
-            .map(field => field.name)
-            .join('\n    ');
-        const fieldsString = fields ? ` {\n    ${fields}\n  }` : '';
-
-        return `${operationType}${operationName} {\n  ${rootField}${argsString}${fieldsString}\n}`;
-    }, [formData]);
-
-    return (
-        <Stack spacing={2}>
-            {/* Mode Selection Tabs */}
-            <Tabs
-                value={formData.mode || 'normal'}
-                onChange={handleModeChange}
-                TabIndicatorProps={{ style: { display: 'none' } }}
-            >
-                <Tab value={'normal'} label={t('graphqlForm.normal')} />
-                <Tab value={'advanced'} label={t('graphqlForm.advanced')} />
-            </Tabs>
-
-            {formData.mode !== 'advanced' && (
-                <>
-                    {/* Operation Type and URL */}
-                    <Stack direction="row" spacing={2}>
-                        <Box sx={{ minWidth: 140 }}>
-                            <select
-                                value={formData.operationType || 'query'}
-                                onChange={(e) => handleInputChange('operationType', e.target.value)}
-                                style={{
-                                    width: '100%',
-                                    height: '100%',
-                                    padding: '8px 12px',
-                                    backgroundColor: 'transparent',
-                                    color: '#FFFFFF',
-                                    border: '1px solid #8E8E93',
-                                    borderRadius: '4px',
-                                    fontSize: '14px',
-                                    outline: 'none',
-                                    cursor: 'pointer'
-                                }}
-                                onFocus={(e) => {
-                                    e.target.style.borderColor = '#3688A2';
-                                }}
-                                onBlur={(e) => {
-                                    e.target.style.borderColor = '#8E8E93';
-                                }}
-                            >
-                                <option value="query" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Query</option>
-                                <option value="mutation" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Mutation</option>
-                                <option value="subscription" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Subscription</option>
-                            </select>
-                        </Box>
-
-                        <TextField
-                            fullWidth
-                            label="GraphQL Endpoint URL"
-                            value={formData.url || ''}
-                            onChange={(e) => handleInputChange('url', e.target.value)}
-                            placeholder="https://api.example.com/graphql"
-                            sx={graphqlFormStyles.textField}
-                        />
-                    </Stack>
-
-                    {/* Operation Name */}
-                    <TextField
-                        fullWidth
-                        label="Operation Name (optional)"
-                        value={formData.operationName || ''}
-                        onChange={(e) => handleInputChange('operationName', e.target.value)}
-                        placeholder="GetUser"
-                        sx={graphqlFormStyles.textField}
-                    />
-
-                    {/* Root Field */}
-                    <TextField
-                        fullWidth
-                        label="Root Field"
-                        value={formData.rootField || ''}
-                        onChange={(e) => handleInputChange('rootField', e.target.value)}
-                        placeholder="user, posts, createUser, etc."
-                        sx={graphqlFormStyles.textField}
-                    />
-
-                    {/* Query Preview */}
-                    <Accordion
-                        expanded={expandedSections.operation}
-                        onChange={handleOperationToggle}
-                        sx={graphqlFormStyles.accordion}
-                    >
-                        <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
-                            <Typography sx={{ color: '#FFFFFF' }}>Query Preview</Typography>
-                        </AccordionSummary>
-                        <AccordionDetails>
-                            <Box
-                                sx={{
-                                    backgroundColor: '#1a1a1a',
-                                    padding: 2,
-                                    borderRadius: 1,
-                                    fontFamily: 'monospace',
-                                    fontSize: '14px',
-                                    color: '#FFFFFF',
-                                    whiteSpace: 'pre-wrap',
-                                    border: '1px solid #3a3a3a',
-                                }}
-                            >
-                                {generateQueryPreview()}
-                            </Box>
-                        </AccordionDetails>
-                    </Accordion>
-
-                    {/* Fields Section */}
-                    <Accordion
-                        expanded={expandedSections.fields}
-                        onChange={handleFieldsToggle}
-                        sx={graphqlFormStyles.accordion}
-                    >
-                        <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
-                            <Typography sx={{ color: '#FFFFFF' }}>Fields to Fetch</Typography>
-                        </AccordionSummary>
-                        <AccordionDetails>
-                            <Stack spacing={1}>
-                                {(formData.fields || []).map((field, index) => (
-                                    <Stack key={index} direction="row" spacing={1} alignItems="center">
-                                        <TextField
-                                            label="Field Name"
-                                            value={field.name}
-                                            onChange={(e) => updateField(index, 'name', e.target.value)}
-                                            size="small"
-                                            placeholder="id, name, email, etc."
-                                            sx={graphqlFormStyles.textField}
-                                        />
-                                        <IconButton
-                                            onClick={() => removeField(index)}
-                                            sx={{ color: '#FF6B6B' }}
-                                        >
-                                            <DeleteIcon />
-                                        </IconButton>
-                                    </Stack>
-                                ))}
-                                <Button
-                                    startIcon={<AddIcon />}
-                                    onClick={addField}
-                                    sx={{
-                                        color: '#3688A2',
-                                        borderColor: '#3688A2',
-                                        '&:hover': {
-                                            borderColor: '#4A90E2',
-                                            backgroundColor: 'rgba(54, 136, 162, 0.1)',
-                                        },
-                                    }}
-                                    variant="outlined"
-                                >
-                                    Add Field
-                                </Button>
-                            </Stack>
-                        </AccordionDetails>
-                    </Accordion>
-
-                    {/* Arguments Section */}
-                    <Accordion
-                        expanded={expandedSections.arguments}
-                        onChange={handleArgumentsToggle}
-                        sx={graphqlFormStyles.accordion}
-                    >
-                        <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
-                            <Typography sx={{ color: '#FFFFFF' }}>Arguments / Filters</Typography>
-                        </AccordionSummary>
-                        <AccordionDetails>
-                            <Stack spacing={1}>
-                                {(formData.arguments || []).map((arg, index) => (
-                                    <Stack key={index} direction="row" spacing={1} alignItems="center">
-                                        <TextField
-                                            label="Key"
-                                            value={arg.key}
-                                            onChange={(e) => updateArgument(index, 'key', e.target.value)}
-                                            size="small"
-                                            placeholder="id, limit, etc."
-                                            sx={graphqlFormStyles.textField}
-                                        />
-                                        <TextField
-                                            label="Value"
-                                            value={arg.value}
-                                            onChange={(e) => updateArgument(index, 'value', e.target.value)}
-                                            size="small"
-                                            placeholder="1, 10, etc."
-                                            sx={graphqlFormStyles.textField}
-                                        />
-                                        <IconButton
-                                            onClick={() => removeArgument(index)}
-                                            sx={{ color: '#FF6B6B' }}
-                                        >
-                                            <DeleteIcon />
-                                        </IconButton>
-                                    </Stack>
-                                ))}
-                                <Button
-                                    startIcon={<AddIcon />}
-                                    onClick={addArgument}
-                                    sx={{
-                                        color: '#3688A2',
-                                        borderColor: '#3688A2',
-                                        '&:hover': {
-                                            borderColor: '#4A90E2',
-                                            backgroundColor: 'rgba(54, 136, 162, 0.1)',
-                                        },
-                                    }}
-                                    variant="outlined"
-                                >
-                                    Add Argument
-                                </Button>
-                            </Stack>
-                        </AccordionDetails>
-                    </Accordion>
-
-                    {/* Variables Section */}
-                    <Accordion
-                        expanded={expandedSections.variables}
-                        onChange={handleVariablesToggle}
-                        sx={graphqlFormStyles.accordion}
-                    >
-                        <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
-                            <Typography sx={{ color: '#FFFFFF' }}>Variables (optional)</Typography>
-                        </AccordionSummary>
-                        <AccordionDetails>
-                            <Typography variant="body2" sx={{ color: '#8E8E93', mb: 2 }}>
-                                Variables make your GraphQL queries dynamic. Define variables here and use them in your query arguments.
-                                Example: Define variable "id" with type "ID" and use it in arguments as "id: $id".
-                            </Typography>
-                            <Stack spacing={1}>
-                                {(formData.variables || []).map((variable, index) => (
-                                    <Stack key={index} direction="row" spacing={1} alignItems="center">
-                                        <TextField
-                                            label="Variable Name"
-                                            value={variable.key}
-                                            onChange={(e) => updateVariable(index, 'key', e.target.value)}
-                                            size="small"
-                                            placeholder="id (without $)"
-                                            sx={{ ...graphqlFormStyles.textField, flex: 1.5 }}
-                                        />
-                                        <TextField
-                                            label="Default Value"
-                                            value={variable.value}
-                                            onChange={(e) => updateVariable(index, 'value', e.target.value)}
-                                            size="small"
-                                            placeholder="123, 10, true, etc."
-                                            sx={{ ...graphqlFormStyles.textField, flex: 1.5 }}
-                                        />
-                                        <Box sx={{ minWidth: 80, maxWidth: 80 }}>
-                                            <select
-                                                value={variable.type}
-                                                onChange={(e) => updateVariable(index, 'type', e.target.value)}
-                                                style={{
-                                                    width: '100%',
-                                                    height: '40px',
-                                                    padding: '8px 12px',
-                                                    backgroundColor: 'transparent',
-                                                    color: '#FFFFFF',
-                                                    border: '1px solid #8E8E93',
-                                                    borderRadius: '4px',
-                                                    fontSize: '14px',
-                                                    outline: 'none',
-                                                    cursor: 'pointer'
-                                                }}
-                                                onFocus={(e) => {
-                                                    e.target.style.borderColor = '#3688A2';
-                                                }}
-                                                onBlur={(e) => {
-                                                    e.target.style.borderColor = '#8E8E93';
-                                                }}
-                                            >
-                                                <option value="String" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>String</option>
-                                                <option value="Int" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Int</option>
-                                                <option value="Float" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Float</option>
-                                                <option value="Boolean" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Boolean</option>
-                                                <option value="ID" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>ID</option>
-                                            </select>
-                                        </Box>
-                                        <IconButton
-                                            onClick={() => removeVariable(index)}
-                                            sx={{ color: '#FF6B6B' }}
-                                        >
-                                            <DeleteIcon />
-                                        </IconButton>
-                                    </Stack>
-                                ))}
-                                <Button
-                                    startIcon={<AddIcon />}
-                                    onClick={addVariable}
-                                    sx={{
-                                        color: '#3688A2',
-                                        borderColor: '#3688A2',
-                                        '&:hover': {
-                                            borderColor: '#4A90E2',
-                                            backgroundColor: 'rgba(54, 136, 162, 0.1)',
-                                        },
-                                    }}
-                                    variant="outlined"
-                                >
-                                    Add Variable
-                                </Button>
-                            </Stack>
-                        </AccordionDetails>
-                    </Accordion>
-
-                    {/* Headers Section */}
-                    <Accordion
-                        expanded={expandedSections.headers}
-                        onChange={handleHeadersToggle}
-                        sx={graphqlFormStyles.accordion}
-                    >
-                        <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
-                            <Typography sx={{ color: '#FFFFFF' }}>Headers</Typography>
-                        </AccordionSummary>
-                        <AccordionDetails>
-                            <Stack spacing={1}>
-                                {(formData.headers || []).map((header, index) => (
-                                    <Stack key={index} direction="row" spacing={1} alignItems="center">
-                                        <TextField
-                                            label="Key"
-                                            value={header.key}
-                                            onChange={(e) => updateHeader(index, 'key', e.target.value)}
-                                            size="small"
-                                            sx={graphqlFormStyles.textField}
-                                        />
-                                        <TextField
-                                            label="Value"
-                                            value={header.value}
-                                            onChange={(e) => updateHeader(index, 'value', e.target.value)}
-                                            size="small"
-                                            sx={graphqlFormStyles.textField}
-                                        />
-                                        <IconButton
-                                            onClick={() => removeHeader(index)}
-                                            sx={{ color: '#FF6B6B' }}
-                                        >
-                                            <DeleteIcon />
-                                        </IconButton>
-                                    </Stack>
-                                ))}
-                                <Button
-                                    startIcon={<AddIcon />}
-                                    onClick={addHeader}
-                                    sx={{
-                                        color: '#3688A2',
-                                        borderColor: '#3688A2',
-                                        '&:hover': {
-                                            borderColor: '#4A90E2',
-                                            backgroundColor: 'rgba(54, 136, 162, 0.1)',
-                                        },
-                                    }}
-                                    variant="outlined"
-                                >
-                                    Add Header
-                                </Button>
-                            </Stack>
-                        </AccordionDetails>
-                    </Accordion>
-
-                    {/* Response Configuration */}
-                    <Divider sx={{ borderColor: '#3a3a3a' }} />
-                    <Typography variant="h6" sx={{ color: '#FFFFFF' }}>Response Configuration</Typography>
-
-                    <Stack direction="row" spacing={2}>
-                        <TextField
-                            label="Response Variable Name"
-                            value={formData.responseVariable || ''}
-                            onChange={(e) => handleInputChange('responseVariable', e.target.value)}
-                            placeholder="userData"
-                            sx={graphqlFormStyles.textField}
-                        />
-
-                        <Box sx={{ minWidth: 120 }}>
-                            <select
-                                value={formData.responseDataType || 'Object'}
-                                onChange={(e) => handleInputChange('responseDataType', e.target.value)}
-                                style={{
-                                    width: '100%',
-                                    height: '100%',
-                                    padding: '8px 12px',
-                                    backgroundColor: 'transparent',
-                                    color: '#FFFFFF',
-                                    border: '1px solid #8E8E93',
-                                    borderRadius: '4px',
-                                    fontSize: '14px',
-                                    outline: 'none',
-                                    cursor: 'pointer'
-                                }}
-                                onFocus={(e) => {
-                                    e.target.style.borderColor = '#3688A2';
-                                }}
-                                onBlur={(e) => {
-                                    e.target.style.borderColor = '#8E8E93';
-                                }}
-                            >
-                                <option value="String" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>String</option>
-                                <option value="Object" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Object</option>
-                                <option value="Array" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Array</option>
-                            </select>
-                        </Box>
-                    </Stack>
-                </>
-            )}
-
-            {formData.mode === 'advanced' && (
-                <Box>
-                    <Typography variant="h6" sx={{ color: '#8E8E93', mb: 2 }}>
-                        {t('graphqlForm.advanced')}
-                    </Typography>
-                    <Button
-                        variant="contained"
-                        onClick={handleModalOpen}
-                        sx={{
-                            backgroundColor: '#3688A2',
-                            '&:hover': {
-                                backgroundColor: '#2a6b7a',
-                            },
-                        }}
-                    >
-                        {t('graphqlForm.injectCustomQuery')}
-                    </Button>
-                </Box>
-            )}
-
-            <GraphQLCustomCodeModal
-                open={isModalOpen}
-                onClose={handleModalClose}
-                code={formData.customQuery || ''}
-                onCodeChange={handleCustomQueryChange}
-                title={t('graphqlForm.customQuery')}
-                description={t('graphqlForm.customQueryDescription')}
-                onSave={handleModalClose}
-            />
-        </Stack>
-    );
-};
-
-// Memoize the component to prevent unnecessary re-renders
-export default memo(GraphQLForm, (prevProps, nextProps) => {
-    // Only re-render if formData actually changes
-    const prevFormData = prevProps.formData;
-    const nextFormData = nextProps.formData;
-
-    // Check if formData reference is the same (most efficient)
-    if (prevFormData === nextFormData) {
-        return true; // Don't re-render
-    }
-
-    // Deep comparison for formData changes
-    return (
-        prevFormData.type === nextFormData.type &&
-        prevFormData.mode === nextFormData.mode &&
-        prevFormData.operationType === nextFormData.operationType &&
-        prevFormData.operationName === nextFormData.operationName &&
-        prevFormData.rootField === nextFormData.rootField &&
-        prevFormData.url === nextFormData.url &&
-        JSON.stringify(prevFormData.headers) === JSON.stringify(nextFormData.headers) &&
-        JSON.stringify(prevFormData.arguments) === JSON.stringify(nextFormData.arguments) &&
-        JSON.stringify(prevFormData.fields) === JSON.stringify(nextFormData.fields) &&
-        JSON.stringify(prevFormData.variables) === JSON.stringify(nextFormData.variables) &&
-        prevFormData.responseVariable === nextFormData.responseVariable &&
-        prevFormData.responseDataType === nextFormData.responseDataType &&
-        prevFormData.customQuery === nextFormData.customQuery
-    );
-});
+import React, { useState, useCallback, memo } from 'react';
+import {
+    Box,
+    Button,
+    TextField,
+    Typography,
+    Stack,
+    IconButton,
+    Divider,
+    Accordion,
+    AccordionSummary,
+    AccordionDetails,
+    Tab,
+    Tabs,
+} from '@mui/material';
+import { Add as AddIcon, Delete as DeleteIcon, ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+import { useFormValidation } from '../../hooks/useFormValidation';
+import ValidationError from '../../atoms/ValidationError';
+import { GraphQLNodeForm } from '../../types/workflow-node-data-types';
+import GraphQLCustomCodeModal from '../../components/GraphQLCustomCodeModal';
+
+interface GraphQLFormProps {
+    formData: GraphQLNodeForm;
+    handleInputChange: (key: string, value: unknown) => void;
+    handleMultipleInputChanges: (changes: { [key: string]: unknown }) => void;
+}
+
+const GraphQLForm: React.FC<GraphQLFormProps> = ({
+    formData,
+    handleInputChange,
+    handleMultipleInputChanges,
+}) => {
+    const { t } = useTranslation();
+    const [expandedSections, setExpandedSections] = useState({
+        operation: true,
+        fields: true,
+        arguments: true,
+        variables: true,
+        headers: false,
+    });
+    const [isModalOpen, setModalOpen] = useState(false);
+
+    const {
+        validationState,
+        setFieldError,
+        setFieldTouched,
+        shouldShowFieldError,
+        getFieldError,
+        clearFieldError,
+    } = useFormValidation();
+
+    // Handle section expansion - memoized to prevent recreation
+    const handleSectionToggle = useCallback((section: keyof typeof expandedSections) => {
+        setExpandedSections(prev => ({
+            ...prev,
+            [section]: !prev[section]
+        }));
+    }, []);
+
+    // Handle mode change
+    const handleModeChange = useCallback((event: React.SyntheticEvent, newMode: string) => {
+        handleInputChange('mode', newMode);
+    }, [handleInputChange]);
+
+    // Handle modal
+    const handleModalOpen = useCallback(() => {
+        setModalOpen(true);
+    }, []);
+
+    const handleModalClose = useCallback(() => {
+        setModalOpen(false);
+    }, []);
+
+    const handleCustomQueryChange = useCallback((code: string) => {
+        handleInputChange('customQuery', code);
+    }, [handleInputChange]);
+
+    // Handle header management
+    const addHeader = useCallback(() => {
+        const newHeaders = [...(formData.headers || []), { key: '', value: '' }];
+        handleInputChange('headers', newHeaders);
+    }, [formData.headers, handleInputChange]);
+
+    const updateHeader = useCallback((index: number, field: 'key' | 'value', value: string) => {
+        const updatedHeaders = [...(formData.headers || [])];
+        updatedHeaders[index] = { ...updatedHeaders[index], [field]: value };
+        handleInputChange('headers', updatedHeaders);
+    }, [formData.headers, handleInputChange]);
+
+    const removeHeader = useCallback((index: number) => {
+        const updatedHeaders = (formData.headers || []).filter((_, i) => i !== index);
+        handleInputChange('headers', updatedHeaders);
+    }, [formData.headers, handleInputChange]);
+
+    // Handle arguments management
+    const addArgument = useCallback(() => {
+        const newArguments = [...(formData.arguments || []), { key: '', value: '' }];
+        handleInputChange('arguments', newArguments);
+    }, [formData.arguments, handleInputChange]);
+
+    const updateArgument = useCallback((index: number, field: 'key' | 'value', value: string) => {
+        const updatedArguments = [...(formData.arguments || [])];
+        updatedArguments[index] = { ...updatedArguments[index], [field]: value };
+        handleInputChange('arguments', updatedArguments);
+    }, [formData.arguments, handleInputChange]);
+
+    const removeArgument = useCallback((index: number) => {
+        const updatedArguments = (formData.arguments || []).filter((_, i) => i !== index);
+        handleInputChange('arguments', updatedArguments);
+    }, [formData.arguments, handleInputChange]);
+
+    // Handle fields management
+    const addField = useCallback(() => {
+        const newFields = [...(formData.fields || []), { name: '' }];
+        handleInputChange('fields', newFields);
+    }, [formData.fields, handleInputChange]);
+
+    const updateField = useCallback((index: number, field: 'name', value: string) => {
+        const updatedFields = [...(formData.fields || [])];
+        updatedFields[index] = { ...updatedFields[index], [field]: value };
+        handleInputChange('fields', updatedFields);
+    }, [formData.fields, handleInputChange]);
+
+    const removeField = useCallback((index: number) => {
+        const updatedFields = (formData.fields || []).filter((_, i) => i !== index);
+        handleInputChange('fields', updatedFields);
+    }, [formData.fields, handleInputChange]);
+
+    // Handle variables management
+    const addVariable = useCallback(() => {
+        const newVariables = [...(formData.variables || []), { key: '', value: '', type: 'String' }];
+        handleInputChange('variables', newVariables);
+    }, [formData.variables, handleInputChange]);
+
+    const updateVariable = useCallback((index: number, field: 'key' | 'value' | 'type', value: string) => {
+        const updatedVariables = [...(formData.variables || [])];
+        updatedVariables[index] = { ...updatedVariables[index], [field]: value };
+        handleInputChange('variables', updatedVariables);
+    }, [formData.variables, handleInputChange]);
+
+    const removeVariable = useCallback((index: number) => {
+        const updatedVariables = (formData.variables || []).filter((_, i) => i !== index);
+        handleInputChange('variables', updatedVariables);
+    }, [formData.variables, handleInputChange]);
+
+    // Memoized handlers for accordion toggles
+    const handleOperationToggle = useCallback(() => {
+        handleSectionToggle('operation');
+    }, [handleSectionToggle]);
+
+    const handleFieldsToggle = useCallback(() => {
+        handleSectionToggle('fields');
+    }, [handleSectionToggle]);
+
+    const handleArgumentsToggle = useCallback(() => {
+        handleSectionToggle('arguments');
+    }, [handleSectionToggle]);
+
+    const handleVariablesToggle = useCallback(() => {
+        handleSectionToggle('variables');
+    }, [handleSectionToggle]);
+
+    const handleHeadersToggle = useCallback(() => {
+        handleSectionToggle('headers');
+    }, [handleSectionToggle]);
+
+    const graphqlFormStyles = {
+        accordion: {
+            backgroundColor: 'transparent',
+            color: '#FFFFFF',
+            '&:before': {
+                backgroundColor: 'transparent',
+            },
+            '& .MuiAccordionSummary-root': {
+                color: '#FFFFFF',
+            },
+        },
+        textField: {
+            '& .MuiOutlinedInput-root': {
+                color: '#FFFFFF',
+                '& fieldset': {
+                    borderColor: '#8E8E93',
+                },
+                '&:hover fieldset': {
+                    borderColor: '#FFFFFF',
+                },
+                '&.Mui-focused fieldset': {
+                    borderColor: '#3688A2',
+                },
+            },
+            '& .MuiInputLabel-root': {
+                color: '#8E8E93',
+                '&.Mui-focused': {
+                    color: '#3688A2',
+                },
+            },
+        },
+    };
+
+    // Generate GraphQL query preview
+    const generateQueryPreview = useCallback(() => {
+        const operationType = formData.operationType || 'query';
+        const operationName = formData.operationName ? ` ${formData.operationName}` : '';
+        const rootField = formData.rootField || 'field';
+
+        // Build arguments string
+        const args = (formData.arguments || [])
+            .filter(arg => arg.key && arg.value)
+            .map(arg => `${arg.key}: ${arg.value}`)
+            .join(', ');
+        const argsString = args ? `(${args})` : '';
+
+        // Build fields string
+        const fields = (formData.fields || [])
+            .filter(field => field.name)
+            .map(field => field.name)
+            .join('\n    ');
+        const fieldsString = fields ? ` {\n    ${fields}\n  }` : '';
+
+        return `${operationType}${operationName} {\n  ${rootField}${argsString}${fieldsString}\n}`;
+    }, [formData]);
+
+    return (
+        <Stack spacing={2}>
+            {/* Mode Selection Tabs */}
+            <Tabs
+                value={formData.mode || 'normal'}
+                onChange={handleModeChange}
+                TabIndicatorProps={{ style: { display: 'none' } }}
+            >
+                <Tab value={'normal'} label={t('graphqlForm.normal')} />
+                <Tab value={'advanced'} label={t('graphqlForm.advanced')} />
+            </Tabs>
+
+            {formData.mode !== 'advanced' && (
+                <>
+                    {/* Operation Type and URL */}
+                    <Stack direction="row" spacing={2}>
+                        <Box sx={{ minWidth: 140 }}>
+                            <select
+                                value={formData.operationType || 'query'}
+                                onChange={(e) => handleInputChange('operationType', e.target.value)}
+                                style={{
+                                    width: '100%',
+                                    height: '100%',
+                                    padding: '8px 12px',
+                                    backgroundColor: 'transparent',
+                                    color: '#FFFFFF',
+                                    border: '1px solid #8E8E93',
+                                    borderRadius: '4px',
+                                    fontSize: '14px',
+                                    outline: 'none',
+                                    cursor: 'pointer'
+                                }}
+                                onFocus={(e) => {
+                                    e.target.style.borderColor = '#3688A2';
+                                }}
+                                onBlur={(e) => {
+                                    e.target.style.borderColor = '#8E8E93';
+                                }}
+                            >
+                                <option value="query" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Query</option>
+                                <option value="mutation" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Mutation</option>
+                                <option value="subscription" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Subscription</option>
+                            </select>
+                        </Box>
+
+                        <TextField
+                            fullWidth
+                            label="GraphQL Endpoint URL"
+                            value={formData.url || ''}
+                            onChange={(e) => handleInputChange('url', e.target.value)}
+                            placeholder="https://api.example.com/graphql"
+                            sx={graphqlFormStyles.textField}
+                        />
+                    </Stack>
+
+                    {/* Operation Name */}
+                    <TextField
+                        fullWidth
+                        label="Operation Name (optional)"
+                        value={formData.operationName || ''}
+                        onChange={(e) => handleInputChange('operationName', e.target.value)}
+                        placeholder="GetUser"
+                        sx={graphqlFormStyles.textField}
+                    />
+
+                    {/* Root Field */}
+                    <TextField
+                        fullWidth
+                        label="Root Field"
+                        value={formData.rootField || ''}
+                        onChange={(e) => handleInputChange('rootField', e.target.value)}
+                        placeholder="user, posts, createUser, etc."
+                        sx={graphqlFormStyles.textField}
+                    />
+
+                    {/* Query Preview */}
+                    <Accordion
+                        expanded={expandedSections.operation}
+                        onChange={handleOperationToggle}
+                        sx={graphqlFormStyles.accordion}
+                    >
+                        <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
+                            <Typography sx={{ color: '#FFFFFF' }}>Query Preview</Typography>
+                        </AccordionSummary>
+                        <AccordionDetails>
+                            <Box
+                                sx={{
+                                    backgroundColor: '#1a1a1a',
+                                    padding: 2,
+                                    borderRadius: 1,
+                                    fontFamily: 'monospace',
+                                    fontSize: '14px',
+                                    color: '#FFFFFF',
+                                    whiteSpace: 'pre-wrap',
+                                    border: '1px solid #3a3a3a',
+                                }}
+                            >
+                                {generateQueryPreview()}
+                            </Box>
+                        </AccordionDetails>
+                    </Accordion>
+
+                    {/* Fields Section */}
+                    <Accordion
+                        expanded={expandedSections.fields}
+                        onChange={handleFieldsToggle}
+                        sx={graphqlFormStyles.accordion}
+                    >
+                        <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
+                            <Typography sx={{ color: '#FFFFFF' }}>Fields to Fetch</Typography>
+                        </AccordionSummary>
+                        <AccordionDetails>
+                            <Stack spacing={1}>
+                                {(formData.fields || []).map((field, index) => (
+                                    <Stack key={index} direction="row" spacing={1} alignItems="center">
+                                        <TextField
+                                            label="Field Name"
+                                            value={field.name}
+                                            onChange={(e) => updateField(index, 'name', e.target.value)}
+                                            size="small"
+                                            placeholder="id, name, email, etc."
+                                            sx={graphqlFormStyles.textField}
+                                        />
+                                        <IconButton
+                                            onClick={() => removeField(index)}
+                                            sx={{ color: '#FF6B6B' }}
+                                        >
+                                            <DeleteIcon />
+                                        </IconButton>
+                                    </Stack>
+                                ))}
+                                <Button
+                                    startIcon={<AddIcon />}
+                                    onClick={addField}
+                                    sx={{
+                                        color: '#3688A2',
+                                        borderColor: '#3688A2',
+                                        '&:hover': {
+                                            borderColor: '#4A90E2',
+                                            backgroundColor: 'rgba(54, 136, 162, 0.1)',
+                                        },
+                                    }}
+                                    variant="outlined"
+                                >
+                                    Add Field
+                                </Button>
+                            </Stack>
+                        </AccordionDetails>
+                    </Accordion>
+
+                    {/* Arguments Section */}
+                    <Accordion
+                        expanded={expandedSections.arguments}
+                        onChange={handleArgumentsToggle}
+                        sx={graphqlFormStyles.accordion}
+                    >
+                        <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
+                            <Typography sx={{ color: '#FFFFFF' }}>Arguments / Filters</Typography>
+                        </AccordionSummary>
+                        <AccordionDetails>
+                            <Stack spacing={1}>
+                                {(formData.arguments || []).map((arg, index) => (
+                                    <Stack key={index} direction="row" spacing={1} alignItems="center">
+                                        <TextField
+                                            label="Key"
+                                            value={arg.key}
+                                            onChange={(e) => updateArgument(index, 'key', e.target.value)}
+                                            size="small"
+                                            placeholder="id, limit, etc."
+                                            sx={graphqlFormStyles.textField}
+                                        />
+                                        <TextField
+                                            label="Value"
+                                            value={arg.value}
+                                            onChange={(e) => updateArgument(index, 'value', e.target.value)}
+                                            size="small"
+                                            placeholder="1, 10, etc."
+                                            sx={graphqlFormStyles.textField}
+                                        />
+                                        <IconButton
+                                            onClick={() => removeArgument(index)}
+                                            sx={{ color: '#FF6B6B' }}
+                                        >
+                                            <DeleteIcon />
+                                        </IconButton>
+                                    </Stack>
+                                ))}
+                                <Button
+                                    startIcon={<AddIcon />}
+                                    onClick={addArgument}
+                                    sx={{
+                                        color: '#3688A2',
+                                        borderColor: '#3688A2',
+                                        '&:hover': {
+                                            borderColor: '#4A90E2',
+                                            backgroundColor: 'rgba(54, 136, 162, 0.1)',
+                                        },
+                                    }}
+                                    variant="outlined"
+                                >
+                                    Add Argument
+                                </Button>
+                            </Stack>
+                        </AccordionDetails>
+                    </Accordion>
+
+                    {/* Variables Section */}
+                    <Accordion
+                        expanded={expandedSections.variables}
+                        onChange={handleVariablesToggle}
+                        sx={graphqlFormStyles.accordion}
+                    >
+                        <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
+                            <Typography sx={{ color: '#FFFFFF' }}>Variables (optional)</Typography>
+                        </AccordionSummary>
+                        <AccordionDetails>
+                            <Typography variant="body2" sx={{ color: '#8E8E93', mb: 2 }}>
+                                Variables make your GraphQL queries dynamic. Define variables here and use them in your query arguments.
+                                Example: Define variable "id" with type "ID" and use it in arguments as "id: $id".
+                            </Typography>
+                            <Stack spacing={1}>
+                                {(formData.variables || []).map((variable, index) => (
+                                    <Stack key={index} direction="row" spacing={1} alignItems="center">
+                                        <TextField
+                                            label="Variable Name"
+                                            value={variable.key}
+                                            onChange={(e) => updateVariable(index, 'key', e.target.value)}
+                                            size="small"
+                                            placeholder="id (without $)"
+                                            sx={{ ...graphqlFormStyles.textField, flex: 1.5 }}
+                                        />
+                                        <TextField
+                                            label="Default Value"
+                                            value={variable.value}
+                                            onChange={(e) => updateVariable(index, 'value', e.target.value)}
+                                            size="small"
+                                            placeholder="123, 10, true, etc."
+                                            sx={{ ...graphqlFormStyles.textField, flex: 1.5 }}
+                                        />
+                                        <Box sx={{ minWidth: 80, maxWidth: 80 }}>
+                                            <select
+                                                value={variable.type}
+                                                onChange={(e) => updateVariable(index, 'type', e.target.value)}
+                                                style={{
+                                                    width: '100%',
+                                                    height: '40px',
+                                                    padding: '8px 12px',
+                                                    backgroundColor: 'transparent',
+                                                    color: '#FFFFFF',
+                                                    border: '1px solid #8E8E93',
+                                                    borderRadius: '4px',
+                                                    fontSize: '14px',
+                                                    outline: 'none',
+                                                    cursor: 'pointer'
+                                                }}
+                                                onFocus={(e) => {
+                                                    e.target.style.borderColor = '#3688A2';
+                                                }}
+                                                onBlur={(e) => {
+                                                    e.target.style.borderColor = '#8E8E93';
+                                                }}
+                                            >
+                                                <option value="String" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>String</option>
+                                                <option value="Int" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Int</option>
+                                                <option value="Float" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Float</option>
+                                                <option value="Boolean" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Boolean</option>
+                                                <option value="ID" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>ID</option>
+                                            </select>
+                                        </Box>
+                                        <IconButton
+                                            onClick={() => removeVariable(index)}
+                                            sx={{ color: '#FF6B6B' }}
+                                        >
+                                            <DeleteIcon />
+                                        </IconButton>
+                                    </Stack>
+                                ))}
+                                <Button
+                                    startIcon={<AddIcon />}
+                                    onClick={addVariable}
+                                    sx={{
+                                        color: '#3688A2',
+                                        borderColor: '#3688A2',
+                                        '&:hover': {
+                                            borderColor: '#4A90E2',
+                                            backgroundColor: 'rgba(54, 136, 162, 0.1)',
+                                        },
+                                    }}
+                                    variant="outlined"
+                                >
+                                    Add Variable
+                                </Button>
+                            </Stack>
+                        </AccordionDetails>
+                    </Accordion>
+
+                    {/* Headers Section */}
+                    <Accordion
+                        expanded={expandedSections.headers}
+                        onChange={handleHeadersToggle}
+                        sx={graphqlFormStyles.accordion}
+                    >
+                        <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: '#FFFFFF' }} />}>
+                            <Typography sx={{ color: '#FFFFFF' }}>Headers</Typography>
+                        </AccordionSummary>
+                        <AccordionDetails>
+                            <Stack spacing={1}>
+                                {(formData.headers || []).map((header, index) => (
+                                    <Stack key={index} direction="row" spacing={1} alignItems="center">
+                                        <TextField
+                                            label="Key"
+                                            value={header.key}
+                                            onChange={(e) => updateHeader(index, 'key', e.target.value)}
+                                            size="small"
+                                            sx={graphqlFormStyles.textField}
+                                        />
+                                        <TextField
+                                            label="Value"
+                                            value={header.value}
+                                            onChange={(e) => updateHeader(index, 'value', e.target.value)}
+                                            size="small"
+                                            sx={graphqlFormStyles.textField}
+                                        />
+                                        <IconButton
+                                            onClick={() => removeHeader(index)}
+                                            sx={{ color: '#FF6B6B' }}
+                                        >
+                                            <DeleteIcon />
+                                        </IconButton>
+                                    </Stack>
+                                ))}
+                                <Button
+                                    startIcon={<AddIcon />}
+                                    onClick={addHeader}
+                                    sx={{
+                                        color: '#3688A2',
+                                        borderColor: '#3688A2',
+                                        '&:hover': {
+                                            borderColor: '#4A90E2',
+                                            backgroundColor: 'rgba(54, 136, 162, 0.1)',
+                                        },
+                                    }}
+                                    variant="outlined"
+                                >
+                                    Add Header
+                                </Button>
+                            </Stack>
+                        </AccordionDetails>
+                    </Accordion>
+
+                    {/* Response Configuration */}
+                    <Divider sx={{ borderColor: '#3a3a3a' }} />
+                    <Typography variant="h6" sx={{ color: '#FFFFFF' }}>Response Configuration</Typography>
+
+                    <Stack direction="row" spacing={2}>
+                        <TextField
+                            label="Response Variable Name"
+                            value={formData.responseVariable || ''}
+                            onChange={(e) => handleInputChange('responseVariable', e.target.value)}
+                            placeholder="userData"
+                            sx={graphqlFormStyles.textField}
+                        />
+
+                        <Box sx={{ minWidth: 120 }}>
+                            <select
+                                value={formData.responseDataType || 'Object'}
+                                onChange={(e) => handleInputChange('responseDataType', e.target.value)}
+                                style={{
+                                    width: '100%',
+                                    height: '100%',
+                                    padding: '8px 12px',
+                                    backgroundColor: 'transparent',
+                                    color: '#FFFFFF',
+                                    border: '1px solid #8E8E93',
+                                    borderRadius: '4px',
+                                    fontSize: '14px',
+                                    outline: 'none',
+                                    cursor: 'pointer'
+                                }}
+                                onFocus={(e) => {
+                                    e.target.style.borderColor = '#3688A2';
+                                }}
+                                onBlur={(e) => {
+                                    e.target.style.borderColor = '#8E8E93';
+                                }}
+                            >
+                                <option value="String" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>String</option>
+                                <option value="Object" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Object</option>
+                                <option value="Array" style={{ backgroundColor: '#2a2a2a', color: '#FFFFFF' }}>Array</option>
+                            </select>
+                        </Box>
+                    </Stack>
+                </>
+            )}
+
+            {formData.mode === 'advanced' && (
+                <Box>
+                    <Typography variant="h6" sx={{ color: '#8E8E93', mb: 2 }}>
+                        {t('graphqlForm.advanced')}
+                    </Typography>
+                    <Button
+                        variant="contained"
+                        onClick={handleModalOpen}
+                        sx={{
+                            backgroundColor: '#3688A2',
+                            '&:hover': {
+                                backgroundColor: '#2a6b7a',
+                            },
+                        }}
+                    >
+                        {t('graphqlForm.injectCustomQuery')}
+                    </Button>
+                </Box>
+            )}
+
+            <GraphQLCustomCodeModal
+                open={isModalOpen}
+                onClose={handleModalClose}
+                code={formData.customQuery || ''}
+                onCodeChange={handleCustomQueryChange}
+                title={t('graphqlForm.customQuery')}
+                description={t('graphqlForm.customQueryDescription')}
+                onSave={handleModalClose}
+            />
+        </Stack>
+    );
+};
+
+// Memoize the component to prevent unnecessary re-renders
+export default memo(GraphQLForm, (prevProps, nextProps) => {
+    // Only re-render if formData actually changes
+    const prevFormData = prevProps.formData;
+    const nextFormData = nextProps.formData;
+
+    // Check if formData reference is the same (most efficient)
+    if (prevFormData === nextFormData) {
+        return true; // Don't re-render
+    }
+
+    // Deep comparison for formData changes
+    return (
+        prevFormData.type === nextFormData.type &&
+        prevFormData.mode === nextFormData.mode &&
+        prevFormData.operationType === nextFormData.operationType &&
+        prevFormData.operationName === nextFormData.operationName &&
+        prevFormData.rootField === nextFormData.rootField &&
+        prevFormData.url === nextFormData.url &&
+        JSON.stringify(prevFormData.headers) === JSON.stringify(nextFormData.headers) &&
+        JSON.stringify(prevFormData.arguments) === JSON.stringify(nextFormData.arguments) &&
+        JSON.stringify(prevFormData.fields) === JSON.stringify(nextFormData.fields) &&
+        JSON.stringify(prevFormData.variables) === JSON.stringify(nextFormData.variables) &&
+        prevFormData.responseVariable === nextFormData.responseVariable &&
+        prevFormData.responseDataType === nextFormData.responseDataType &&
+        prevFormData.customQuery === nextFormData.customQuery
+    );
+});