Using the Selector Builder GUI - skyscreamer/yoga GitHub Wiki

We've created a simple GUI that allows you to build selectors by simply clicking through the object tree.

To use this GUI, simply replace the suffix of the URL with ".yoga". You can play with an example on our running demo server here. It looks like this:

Yoga Selector Builder (default)

To the right of the selector builder address bar, the selector page prints out the load time for the query. It will highlight the query in orange or red as it exceeds certain configurable thresholds. This will give you an idea of how a selector performs.

To create a query that returns a list of songs a user's friends like, click on favoriteArtists, followed by albums, then songs. As I click on each entity, it expands to show the fields and children that can be added to the request. It also refreshes the preview pane, to show the new results:

Yoga Selector Builder (stuff selected)

The selector builder will ignore clicks on core fields, since they are returned by default. Navigation links which are used to explore the API are disabled by default when a selector is applied. This behavior can be changed in the configuration.