@flowuent-org/diagramming-core 1.3.9 → 1.4.0

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

@@ -1,679 +0,0 @@
-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
-    );
-});