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

Question

我有一个简单的GraphQL枚举，定义如下： 枚举PassType {     每日健身     入门健身     每月健身     每季健身     DoubleFit     MultiFit10     MultiFit20 } 我想在标记中重用这些值。我正在使用Apollo和AWS Appync作为GraphQL基础架构。有没有一种方法可以从Apollo客户端获取这些信息而无需在前端手动复制它们？

1 个答案:

答案 0 :(得分：2)

您可以利用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>

相关问题

• 如何将存储在数据库中的定义用于源代码中的定义？
• 如何使用isValidJSValue在我的客户端代码中验证查询变量？
• 如何使用现有页面内容的Marionette 3 Regions？ （例如服务器生成的HTML）
• 如何在GraphQL查询中使用distinct？
• 使用d3画笔选择折线图中的元素
• 如何在代码中使用Apollo Codegen Typescript类型？
• Vue-动态创建使用例如v-on：div的div
• 如何在前端代码中使用GraphQL枚举（例如在<select>中）？
• 如何以非英语语言使用GraphQL枚举？后石墨
• 如何在graphQL中使用where参数？

最新问题

• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

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>