Getting Invariant Violation : invariant violation 47 on mutation query in appolo graphql - graphql

Question

I am using a mutation query to take the input from user and update it in database but while updating it is throwing this error invariant violation which I am not able to understand, In mutation I have four objects with min and max value that is coming from user:
export const ADD_INSIGHT_META_DATA = gql`
mutation MyMutation ($data : [projectInsightsMetadata_insert_input!]!) {
insert_projectInsightsMetadata(objects: $data) {
returning {
id
createdAt
}
}
}
`
This is how I am using the above query :
export const updateScheduleInsightMetaData = async(InsertData:any )=>{
const response:ApolloQueryResult<any> = await client.query({
query:ADD_INSIGHT_META_DATA,
context:{
role:"updateMasterPlan",
token:getProjectExchangeToken()
},
fetchPolicy: 'network-only',
variables:{
data:InsertData
}
})
return response.data;
}
Now I am using updateScheduleInsightMetaData function in one of code :
import React, { useContext, useEffect, useState } from "react";
import { IconButton, makeStyles, Paper, TextField, Typography } from "#material-ui/core";
import { useParams } from "react-router-dom";
import { Button } from "#material-ui/core";
import { Box } from "#mui/system";
import {getScheduleInsightMetaData,updateScheduleInsightMetaData} from "./InsightsSettingsActions";
import { setIsLoading } from "src/modules/root/context/authentication/action";
import { stateContext } from "src/modules/root/context/authentication/authContext";
import Notification, { AlertTypes } from "src/modules/shared/components/Toaster/Toaster";
import { projectDetailsContext } from "src/modules/baseService/projects/Context/ProjectDetailsContext";
import {
decodeExchangeToken,
getProjectExchangeToken
} from "../../../../../services/authservice";
import "./InsightsSettings.scss";
import NoDataMessage from "src/modules/shared/components/NoDataMessage/NoDataMessage";
interface Params {
projectId:any
}
interface InputType{
min:number,
max:number
}
export const noPermissionMessage = "You don't have permission to view project insight settings";
const InsightsSettings: React.FC =()=>{
const { projectDetailsState }: any = useContext(projectDetailsContext);
const { dispatch, stateCont }: any = useContext(stateContext);
const {projectId} = useParams<Params>();
const [hasCreateAccess, setCreateAccess] = useState<boolean>(false);
const [informationalConstraints, setInformationalConstraints] = useState<any>({min:Number(""),max:Number("")});
const [rfiResponse, setRfiResponse] = useState<any>({min:Number(""),max:Number("")});
const [physicalConstraints, setPhysicalConstraints] = useState<any>({min:Number(""),max:Number("")});
const [managementConstraints, setManagementConstraints] = useState<any>({min:Number(""),max:Number("")});
const tenantId = decodeExchangeToken().tenantId;
console.log("informationalConstraints",informationalConstraints);
console.log("rfiResponse",rfiResponse);
console.log("physicalConstraints",physicalConstraints);
console.log("managementConstraints",managementConstraints);
const projectToken = getProjectExchangeToken();
useEffect(()=>{
setCreateAccess(decodeExchangeToken(projectToken).allowedRoles.includes("viewMasterPlan"))
},[projectToken])
const navigateback = () => {
// props.navBack();
}
useEffect(()=>{
const token = projectDetailsState.projectToken;
fetchInsightsData(projectId,tenantId,token)
},[projectId,tenantId])
const fetchInsightsData = async(projectId:any,tenantId:any,token:any)=>{
try{
// const tenantId = decodeExchangeToken().tenantId;
// const token = projectDetailsState.projectToken;
dispatch(setIsLoading(true));
const res = await getScheduleInsightMetaData(projectId, tenantId ,token)
dispatch(setIsLoading(false));
}catch(err){
console.log("error in fetching insights metadata",err)
Notification.sendNotification('An error occured while fetching insights metadata', AlertTypes.warn);
dispatch(setIsLoading(false));
}
}
const handleInformationalInputChange = (e:any)=>{
setInformationalConstraints((prevState:any)=>({...prevState,[e.target.name]:Number(e.target.value)}))
}
const handleRfiInputChange = (e:any)=>{
setRfiResponse((prevState:any)=>({...prevState,[e.target.name]:Number(e.target.value)}))
}
const handlePhysicalInputChange = (e:any)=>{
setPhysicalConstraints((prevState:any)=>({...prevState,[e.target.name]:Number(e.target.value)}))
}
const handleManagementInputChange = (e:any)=>{
setManagementConstraints((prevState:any)=>({...prevState,[e.target.name]:Number(e.target.value)}))
}
const handleUpdate = async(e:any,informationalConstraints:any,rfiResponse:any,physicalConstraints:any,managementConstraints:any)=>{
try{
dispatch(setIsLoading(true));
const data = {
LeadtimeMgmntConstraints:managementConstraints,
LeadtimePhysicalConstraints:physicalConstraints,
ChangeOrderIssueReview:rfiResponse,
RFIReviewResponse:informationalConstraints
}
const response = await updateScheduleInsightMetaData(data)
// const response = await updateScheduleInsightMetaData(managementConstraints,physicalConstraints,rfiResponse,informationalConstraints)
Notification.sendNotification("Successfully updated insights", AlertTypes.success);
dispatch(setIsLoading(false));
}catch(err){
dispatch(setIsLoading(false));
Notification.sendNotification(err, AlertTypes.warn);
console.log(err)
}
}
return(
<>
{hasCreateAccess?
<div className="InsightsSettings">
<>
<div className="InsightsSettings__header">
<Typography component="p">Insight Settings</Typography>
</div>
<div className="InsightsSettings__input_area">
<div className="InsightsSettings__individual_box">
<Typography component="p">How far ahead of an activity start does the team review and resolve management or informational constraints?</Typography>
<div className="InsightsSettings__constraints">
<input name="min" className="InsightsSettings__constraints__style" value={informationalConstraints.min} placeholder="min" onChange={handleInformationalInputChange}/>
<input name="max" className="InsightsSettings__constraints__style" value={informationalConstraints.max} placeholder="max" onChange={handleInformationalInputChange}/>
</div>
</div>
<div className="InsightsSettings__individual_box">
<Typography component="p">What is the average (or typical) RFI design response period for this project?</Typography>
<div className="InsightsSettings__constraints">
<input name="min" className="InsightsSettings__constraints__style" value={rfiResponse.min} placeholder="min" onChange={handleRfiInputChange}/>
<input name="max" className="InsightsSettings__constraints__style" value={rfiResponse.max} placeholder="max" onChange={handleRfiInputChange}/>
</div>
</div>
<div className="InsightsSettings__individual_box">
<Typography component="p">How far ahead of an activity start does the team review and resolve physical or site constraints ?</Typography>
<div className="InsightsSettings__constraints">
<input name="min" className="InsightsSettings__constraints__style" value={physicalConstraints.min} placeholder="min" onChange={handlePhysicalInputChange}/>
<input name="max" className="InsightsSettings__constraints__style" value={physicalConstraints.max} placeholder="max" onChange={handlePhysicalInputChange}/>
</div>
</div>
<div className="InsightsSettings__individual_box">
<Typography component="p">How far ahead of an activity start does the team review and resolve management or informational constraints?</Typography>
<div className="InsightsSettings__constraints">
<input name="min" className="InsightsSettings__constraints__style" value={managementConstraints.min} placeholder="min" onChange={handleManagementInputChange}/>
<input name="max" className="InsightsSettings__constraints__style" value={managementConstraints.max} placeholder="max" onChange={handleManagementInputChange}/>
</div>
</div>
</div>
</>
<div className="InsightsSettings__action-button">
<Button data-testid={'cancel-update'} variant="outlined" onClick={navigateback} className="cancel-button">
Cancel
</Button>
<Button
variant="outlined"
className="update-button"
onClick={(e:any)=>{handleUpdate(e,informationalConstraints,rfiResponse,physicalConstraints,managementConstraints)}}
>
Update
</Button>
</div>
</div>: (
<div className="noCreatePermission-insight">
<div className="no-permission-insight">
<NoDataMessage message={noPermissionMessage}/>
</div>
</div>
) }
</>
)
}
export default InsightsSettings
When I am clicking on update button to make the insertion in database I am getting invariant violation: 47 error ,I am pasting the error here
Invariant Violation: Invariant Violation: 47 (see https://github.com/apollographql/invariant-packages)
at new InvariantError (http://localhost:3000/static/js/vendors~main.chunk.js:327507:24)
at invariant (http://localhost:3000/static/js/vendors~main.chunk.js:327521:11)
at getQueryDefinition (http://localhost:3000/static/js/vendors~main.chunk.js:9716:230)
at StoreReader.diffQueryAgainstStore (http://localhost:3000/static/js/vendors~main.chunk.js:2449:286)
at InMemoryCache.diff (http://localhost:3000/static/js/vendors~main.chunk.js:1132:29)
at http://localhost:3000/static/js/vendors~main.chunk.js:4864:28
at perform (http://localhost:3000/static/js/vendors~main.chunk.js:1264:31)
at InMemoryCache.batch (http://localhost:3000/static/js/vendors~main.chunk.js:1288:7)
at InMemoryCache.performTransaction (http://localhost:3000/static/js/vendors~main.chunk.js:1321:17)
at QueryInfo.markResult (http://localhost:3000/static/js/vendors~main.chunk.js:4842:20)
at http://localhost:3000/static/js/vendors~main.chunk.js:5713:19
at both (http://localhost:3000/static/js/vendors~main.chunk.js:10788:20)
at http://localhost:3000/static/js/vendors~main.chunk.js:10777:26
at new Promise (<anonymous>)
at Object.then (http://localhost:3000/static/js/vendors~main.chunk.js:10776:16)
at Object.next (http://localhost:3000/static/js/vendors~main.chunk.js:10791:39)
at notifySubscription (http://localhost:3000/static/js/vendors~main.chunk.js:332559:18)
at onNotify (http://localhost:3000/static/js/vendors~main.chunk.js:332603:3)
at SubscriptionObserver.next (http://localhost:3000/static/js/vendors~main.chunk.js:332652:5)
at http://localhost:3000/static/js/vendors~main.chunk.js:10848:23
at Array.forEach (<anonymous>)
at iterateObserversSafely (http://localhost:3000/static/js/vendors~main.chunk.js:10847:23)
at Object.next (http://localhost:3000/static/js/vendors~main.chunk.js:10586:87)
at notifySubscription (http://localhost:3000/static/js/vendors~main.chunk.js:332559:18)
at onNotify (http://localhost:3000/static/js/vendors~main.chunk.js:332603:3)
at SubscriptionObserver.next (http://localhost:3000/static/js/vendors~main.chunk.js:332652:5)
at Object.next (http://localhost:3000/static/js/vendors~main.chunk.js:6773:22)
at notifySubscription (http://localhost:3000/static/js/vendors~main.chunk.js:332559:18)
at onNotify (http://localhost:3000/static/js/vendors~main.chunk.js:332603:3)
at SubscriptionObserver.next (http://localhost:3000/static/js/vendors~main.chunk.js:332652:5)
at notifySubscription (http://localhost:3000/static/js/vendors~main.chunk.js:332559:18)
at onNotify (http://localhost:3000/static/js/vendors~main.chunk.js:332603:3)
at SubscriptionObserver.next (http://localhost:3000/static/js/vendors~main.chunk.js:332652:5)
at http://localhost:3000/static/js/vendors~main.chunk.js:7061:18

Answer 1

After going to the github url provided in error i.e https://github.com/apollographql/invariant-packages it tells to go into particular file in your node-modules to get the more understanding of invariant number error
node_modules/#apollo/client/invariantErrorCodes.js
after going into above file they have provided some extra information related to error code so for me I was getting invariant violation: 47
47: {
file: "#apollo/client/utilities/graphql/getFromAST.js",
node: invariant(queryDef && queryDef.operation === 'query', 'Must contain a query definition.')
},
In my case I am having mutation query and trying to query it instead of doing mutation that's why I was getting error so the changes that I did in my code to make it working is :
Instead of doing this:
export const updateScheduleInsightMetaData = async(InsertData:any )=>{
const response:ApolloQueryResult<any> = await client.query({
query:ADD_INSIGHT_META_DATA,
context:{
role:"updateMasterPlan",
token:getProjectExchangeToken()
},
fetchPolicy: 'network-only',
variables:{
data:InsertData
}
})
return response.data;
}
I needed to do this:
export const updateScheduleInsightMetaData = async(InsightsData:any )=>{
const response = await client.mutate({
mutation:ADD_INSIGHT_META_DATA,
context:{
role:"updateMasterPlan",
token:getProjectExchangeToken()
},
fetchPolicy: 'network-only',
variables:{
data:InsightsData
}
})
return response.data;
}