获得不变违规：apollo graphql 中突变查询的不变违规 47答案

【问题标题】：Getting Invariant Violation : invariant violation 47 on mutation query in appolo graphql获得不变违规：apollo graphql 中突变查询的不变违规 47
【发布时间】：2022-10-18 17:25:25
【问题描述】：

我正在使用突变查询从用户那里获取输入并在数据库中更新它，但是在更新它时会抛出这个我无法理解的错误不变违规，在突变中我有四个对象的最小值和最大值来自用户：

export const ADD_INSIGHT_META_DATA = gql`
mutation MyMutation ($data : [projectInsightsMetadata_insert_input!]!) {
    insert_projectInsightsMetadata(objects: $data) {
      returning {
        id
        createdAt
      }
    }
  }
`

这就是我使用上述查询的方式：

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;
}

现在我在代码之一中使用 updateScheduleInsightMetaData 函数：

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

当我单击更新按钮以插入数据库时，我遇到了不变的违规：47 错误，我在此处粘贴错误

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

【问题讨论】：

我没有答案，但我有下一步要做：您粘贴的错误中有一个 URL，告诉您查看本地目录中的文件 node_modules/@apollo/client/invariantErrorCodes.js 以找出这个不变的错误是什么。
@DanCrews 谢谢！！，在浏览了你提到的这个文件后，我能够解决我的问题

标签： graphql apollo apollo-client react-apollo hasura

【解决方案1】：

转到错误提供的 github url 后，即https://github.com/apollographql/invariant-packages 它告诉进入节点模块中的特定文件以更好地理解不变数错误

node_modules/@apollo/client/invariantErrorCodes.js 进入上述文件后，他们提供了一些与错误代码相关的额外信息，所以对我来说，我得到了不变的违规：47

47: {
    file: "@apollo/client/utilities/graphql/getFromAST.js",
    node: invariant(queryDef && queryDef.operation === 'query', 'Must contain a query definition.')
  },

在我的情况下，我有突变查询并尝试查询它而不是进行突变，这就是我收到错误的原因，所以我在代码中所做的更改以使其正常工作是：

而不是这样做：

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;
}

我需要这样做：

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;
}

【讨论】：