如何在前端代码中使用 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>

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

How to use GraphQL enums in frontend code (e.g. in a <select>)?

apollo

graphql

appsync-apollo-client