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

Question

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

enum PassType {
    DailyFit
    StarterFit
    MonthlyFit
    QuarterlyFit
    DoubleFit
    MultiFit10
    MultiFit20
}

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

Answer 1

您可以使用 introspection查询以获取有关架构中任何特定类型的信息，包括枚举。使用 Apollo 的 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>