const GET_DATA_SOURCES_NAMES = gql`

{

    __type(name: "DataSourceType") {

       name

       states: enumValues {

           name

       }

    }

}

`

const DataSourcesNames = () => {

    return <Query query={GET_DATA_SOURCES_NAMES}>

        {({loading, error, data}) => {

            if (loading) return "Loading...";

            if (error) return error.message;

            const items = data.__type.states.map((item, idx) => {

                return (

                    <ListView.Item

                        key={idx}

                    name={item.name}

                    className="ds-list-item"

                    leftContent={<span className="list-item-name">{item.name}</span>}

                    >

                    </ListView.Item>

                )

            })

            return (

                <div>

                    <ListView>

                        {items}

                    </ListView>

                </div>

            );

        }}

    </Query>

};

  <div>

                  <DataSourcesNames/>

  </div>