reactjs - 如何在react js中使用从useQuery获得的graphql枚举进行表单竞争？

Question

我使用 React，apollo graphql。我正在尝试使用自省查询通过 graphql 枚举在表单中添加医生的指定。

我有一个代表医生指定的 graphql 枚举类型，我正在使用useQuery来显示它。我想要做的是将从此useQuery获得的枚举数据使用到表单中（在组件 AddDoctor 中）。但我总是收到 null（数据未定义）错误“ Uncaught TypeError: Cannot read property 'map' of null ”。

这是我的片段：

枚举类型

enum DesignationType{
 Podiatrist
 GeneralPractitioner
 Pediatrician
 Endocrinologist
}

添加GQL.js

export const ADD_DOCTOR_MUTATION = gql`
  mutation addDoctors($name: String!, $designation:DesignationType! ) {
    addDoctors(
        name: $name,        
        designation: $designation
    ) {
        _id
        name
        designation
        
    }
  }
`

AddDoctor.js

const AddDoctor = () => {
const DESIGNATION_QUERY = gql`
    query GetEnum {
        __type(name: "DesignationType") {
            enumValues {
                name
            }
        }
    }
`
const {  data, loading } = useQuery(DESIGNATION_QUERY);
const enumValues = loading ? null : data.__type.enumValues;


const [formState, setFormState] = useState({
    name: '',
    designation: ''
    
});

const [addDoctors] = useMutation(ADD_DOCTOR_MUTATION,{
    variables:{
        name: formState.name,
        designation: enumValues       
    }
});
   
return (
    <form 
        onSubmit = {async (e)=>{
            e.preventDefault();
            await addDoctors();

        }}>
       <div> 
        <label> Name: </label>
        <input type ='text' 
               value = {formState.name} 
               onChange={(e)=>
                setFormState({
                    ...formState,
                    name: e.target.value
                })
               }
               placeholder = 'name'/>
       </div>
             
       

       <div> 
        <label>Designation: </label>            
        <select>
            {enumValues.map(enumValue => (
                <option value={enumValue.name}>{enumValue.name}</option>
            ))}   
        </select>
              
       </div>

        <button type = "submit">Add Doctor</button>
    </form>
    
)

}

我也尝试useEffect在此链接中使用如何正确链接 GraphQL 中的 useQuery 和 useMutation？，但我无法正确使用 useEffect 。任何人都可以让我知道，我如何使用要在表单中使用的枚举值来添加名称？提前致谢 ！

标签： reactjsenumsgraphqlapollo