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

Posted 2023-03-08

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

【英文标题】：How to use GraphQL enums in frontend code (e.g. in a <select>)?

【发布时间】：2019-05-29 04:39:39

【问题描述】：

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

enum PassType 
    DailyFit
    StarterFit
    MonthlyFit
    QuarterlyFit
    DoubleFit
    MultiFit10
    MultiFit20

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

【参考方案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>

【讨论】：

嗨，Daniel，我需要使用 react、PWA 和 Link-state apollo 配置一个项目，能否请您指导到一些教程，这样我就可以在最好的水平上配置它。