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

Question

I'm building a React Native application using GraphQL (Hosted on graph.cool) with a Relay Schema. I have a QueryRenderer in the top-level component, fetching data for the presentational components using fragments, which is working fine.

My problem: I want to do an introspection query to fetch possible enum values as a list, for a specific field in my schema and fetch these alongside the fragments. My current query with fragments:

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

The MainList_items fragment:

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

I got the following query working for fetching enumValues via introspection (using: 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
        }
    }
}

But i can't seem to find a way to create a fragment that can be added to the top-level query. I could just paste the introspection directly into the top-level query, but that would kind of work against the relay framework, as far as I understand it. Since doing it this way I would have to explicitly pass the result down as a props, instead of letting the presentational component specify what it needs and supplying that as a fragment to the QueryRenderer at the top-level and letting the relay framework implicitly pass the query result down to the component.

Answer 1

After some tinkering around i found a way to solve it - it leaves two places to maintain the fragments query, but it was the only way I found that solved it. :)

In my component i defined the following fragment:

fragment GenderTile_items on __Type {
  enumValues{
    name
  }
}

Then in my main container, i expanded the query in the QueryRenderer with the following

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

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

The resulting enum data from the QueryRenderer is then available in the successblock by passing 'props.__type' down to the component with the corresponding fragment and from there accessing props.items.enumValues (As the prop for the data was defined as 'items' in the fragment (e.g GenderTile_items when following the naming convention 'FileName_propName'. (https://facebook.github.io/relay/docs/fragment-container.html#data-dependencies-with-graphql)).

I then ran into the problem where i wanted to fetch more than one type of enums and the query returned an error with duplicate __type assignments. This can be fixed this by using alias' like this:

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

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

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

The data is then available via props.[alias] (e.g. 'props.genderEnums' and 'props.otherEnums'), which you then pass to the component with the fragment and as above access it via props.items.enumValues.

Hope that made sense for anyone else running into the same problem as me. :D