EnumValues 的内省查询作为反应组件中的 GraphQL 片段

Question

我正在使用带有中继架构的 GraphQL（托管在 graph.cool）构建一个 React Native 应用程序。我在顶级组件中有一个 QueryRenderer，使用片段为展示组件获取数据，工作正常。

我的问题：我想做一个内省查询，以获取可能的枚举值作为列表，针对我的架构中的特定字段，并将这些值与片段一起获取。我当前的片段查询：

query ReportingContainerQuery {
    viewer {
        ...MainList_items
           ...
    }
}

MainList_items片段：

fragment AnimalList_items on Viewer {
    allAnimalCategories {
        edges {
            node{
                id
                ...AnimalListRow_item
            }
        }
    }
}

我得到了以下用于通过内省获取枚举值的查询（使用：https://www.graph.cool/forum/t/how-to-access-the-possible-values-of-an-enum-type-created-inside-the-console/23/2）：

query {
    __type(name: "JOURNAL_ENTRY_GENDER") {
        enumValues {
            name
        }
    }
}

但我似乎找不到创建可添加到顶级查询的片段的方法。我可以直接将内省粘贴到顶级查询中，但据我所知，这会在某种程度上反对中继框架。因为这样做，我将不得不显式地将结果作为 props 传递下去，而不是让展示组件指定它需要什么并将其作为片段提供给顶层的 QueryRenderer 并让中继框架隐式传递查询结果细化到组件。

Answer 1

经过一些修补后，我找到了解决它的方法 - 它留下了两个地方来维护片段查询，但这是我发现解决它的唯一方法。 :)

在我的组件中，我定义了以下片段：

fragment GenderTile_items on __Type {
  enumValues{
    name
  }
}

然后在我的主容器中，我使用以下内容扩展了 QueryRenderer 中的查询

query ReportingContainerQuery {
  viewer {
    ...MainList_items
       ...
  }

  __type(name: "JOURNAL_ENTRY_GENDER"){
     ...GenderTile_items
  }
}

然后，通过将 'props.__type' 向下传递到具有相应片段的组件并从那里访问 props.items.enumValues（因为数据的属性是在片段中定义为 'items'（例如 GenderTile_items 遵循命名约定 'FileName_propName'。（https://facebook.github.io/relay/docs/fragment-container.html#data-dependencies-with-graphql））。

然后我运行遇到了我想获取不止一种类型的枚举的问题，查询返回了一个错误，其中包含重复的 __type 赋值。这可以通过像这样使用别名来解决：

query ReportingContainerQuery {
  viewer {
    ...MainList_items
       ...
  }

  genderEnums: __type(name: "JOURNAL_ENTRY_GENDER"){
     ...GenderTile_items
  }

  otherEnums: __type(name: "JOURNAL_ENTRY_OTHER"){
     ...OtherComponent_items
  }
}

然后可以通过 props.[alias]（例如 'props.genderEnums' 和 'props.otherEnums'）获取数据，然后将其传递给带有片段的组件，并如上所述通过 [=35 访问它=].

希望这对其他运行和我遇到同样问题的人有意义。 :D

EnumValues 的内省查询作为反应组件中的 GraphQL 片段

Introspection query for EnumValues as a GraphQL fragment in react-component

enums

graphql

react-native

relayjs