GraphQL和AWS Appsync：未捕获承诺错误：变量'input'已将NonNull类型的Null值强制为

问题描述

因此，我尝试研究出现的错误消息，但未找到任何解决方案。我似乎在突变中遇到了障碍，它需要一个名为CreateEmployeeInput！的输入，我假设它是一个带有{名，姓，[技能]}的对象，并且ID是自动生成的。

我的模式

type Employee @model {
  id: String
  firstname: String
  lastname: String
  skills: [Skill]
}
type Skill @model {
  id: String
  name: String
}

如您所见，

自动生成的GQL突变支架$ input：CreateEmployeeInput！是我被困住的地方

export const createEmployee = /* GraphQL */ `
  mutation CreateEmployee(
    $input: CreateEmployeeInput!
    $condition: ModelEmployeeConditionInput
  ) {
    createEmployee(input: $input,condition: $condition) {
      id
      firstname
      lastname
      skills {
        id
        name
        createdAt
        updatedAt
      }
      createdAt
      updatedAt
    }
  }
`;

完整错误是

index.ts:49 Uncaught (in promise) Error: Variable 'input' has coerced Null value for NonNull type 'CreateEmployeeInput!'

我的App.js

import "./App.css";
import React,{ useState,useEffect } from "react";
import { useQuery,useMutation,gql } from "@apollo/client";

import Employees from "./components/Employees";
import CreateEmployee from "./components/CreateEmployee";

import { createEmployee } from "./graphql/mutations";
import { listemployees } from "./graphql/queries";

Amplify.configure(awsExports);


const CREATE_EMPLOYEE = gql(createEmployee);
const LIST_EMPLOYEES = gql(listemployees);

function App() {
  const [employees,setEmployees] = useState([]);
  const { loading,error,data } = useQuery(LIST_EMPLOYEES);

// the issue is the the mutation below vvvvv

  const [addEmployee] = useMutation(CREATE_EMPLOYEE,{
    refetchQueries: (mutationResult) => [{ query: LIST_EMPLOYEES }],});

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error </p>;

  if (data.listemployees.items.length > 0) {
    setEmployees([...data.listemployees.items]);
  }
  return (
    <div className="App">
      <header>
        <h1>Employees List</h1>
      </header>
      <CreateEmployee addEmployee={addEmployee} />
      <Employees employees={employees} />
    </div>
  );
}

export default App;

CreateEmployee.js

import React,{ useState } from "react";
import {
  FormControl,InputLabel,Input,FormHelperText,Box,Button,} from "@material-ui/core";

let l = console.log;

export default function CreateEmployee(props) {
  const [firstName,setFirstName] = useState("Joe");
  const [lastName,setLastName] = useState("Schmo");
  const [skill,setSkill] = useState("");
  const [skills,setSkills] = useState(["HTML","CSS","REACT"]);

  const addSkill = (curSkill) => {
    setSkills((prevSkills) => [curSkill,...prevSkills]);
    setSkill("");
  };


  const addEmployeeHandler = () => {
    let curVariables = {
      firstname: firstName,lastname: lastName,skills,};
 //the problem seems to be here.  not sure how to pass CreateEmployeeInput!,function takes an //object with variables as a key and the and an object with the information to be passed to the //mutation as the value
    props.addEmployee({
      variables: curVariables,});
  };

  return (
    <div id="CreateEmployeeContainer">
      Create New Employee
      <Box
        width={1 / 4}
        // display="flex" flexDirection="column"
      >
        
      <Button
        variant="outlined"
        color="primary"
        onClick={() => addEmployeeHandler()}
      >
        Add Employee
      </Button>
    </div>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）