Vandal is the Graphiti UI. It’s helpful for exploring data, testing and generating URLs. To take Vandal for a spin, view our sample app (initial load may take a second).

1 Installation

1.1 Installing via Template

If you ran our application template, you already have Vandal installed. Check your routes to see it mounted.

1.2 Installing via Gem

  • Add the vandal_ui gem.
  • Run rake vandal:install
  • Mount the engine:
# config/routes.rb
scope path: ApplicationResource.endpoint_namespace, defaults: { format: :jsonapi } do
  # ... routes ...
  mount VandalUi::Engine, at: '/vandal'

That’s it! Vandal will dynamically generate a schema at <api_namespace>/vandal/schema.json, and you can view the UI at <api_namespace>/vandal.

1.3 Manual Installation

Vandal is a VueJS application. Just grab the dist files and put them anywhere you’d like.

Note that index.html has a placeholder, __SCHEMA_PATH__. Replace this with a URL hosting your schema, and you’ll be good to go.

2 Usage

First, make sure your schema is being correctly generated. You should see Vandal make a request something like /vandal/schema.json - make sure that looks correct. If it doesn’t, you may need to bounce your server.

After selecting an endpoint, use the left rail to configure your request. Click a relationship once to include it in the response. If a relationship is included, you can click any row in the table to view related data.

Click a relationship twice and you can configure the deep query of the associated Resource. In other words, if you’re fetching Posts and Comments, click comments twice to say things like “only active comments should be returned”.

When you hit ‘submit’, the top URL bar will change to reflect your query and results will show in the center table.