如何在前端代码中使用 GraphQL 枚举(例如在 <select>)中？

Question

我有一个简单的 GraphQL 枚举，定义如下：

enum PassType {
    DailyFit
    StarterFit
    MonthlyFit
    QuarterlyFit
    DoubleFit
    MultiFit10
    MultiFit20
}

我想在<select>标签中重用这些值。我正在使用 Apollo 和 AWS Appync 作为 GraphQL 基础设施。有没有办法从 Apollo 客户端获取这些，而无需在前端手动复制它们？

Answer 1

您可以利用自检查询来获取有关架构中任何特定类型（包括枚举）的信息。利用阿波罗的Query组件，这看起来像：

const PASS_TYPE_QUERY = gql`
  query GetEnum {
    __type(name: "PassType") {
      enumValues {
        name
      }
    }
  }
`
<Query query={PASS_TYPE_QUERY}>
  {({ data }) => {
    // Handle loading/errors as usual
    if (!data.__type) {
      return null
    }
    return (
      <select>
        {data.__type.enumValues.map(enumValue => (
          <option value={enumValue.name}>{enumValue.name}</option>
        ))}   
      </select>
    )
  }}
</Query>