Chapter 10
Driving Phoenix Actions with GraphQL

As you’ve learned in the previous chapters, the foundation of a GraphQL API is the definition of its schema, which models the domain and provides a cohesive interface for accessing and modifying its data.

GraphQL APIs are commonly used (and in fact, GraphQL was originally developed) to support data fetching for user interfaces that aren’t co-located with the server code. Mobile applications and single-page JavaScript applications are the conventional clients for a web-facing GraphQL API. But it doesn’t need to be that way. You can use the power of GraphQL directly from other parts of your Elixir application too.

You can even use GraphQL to build more traditional, server-side, rendered user interfaces, and in this chapter, we’re going to show you how.

We’re going to work on building out a basic administrative interface for our example application, PlateSlate. We’ll add features so that administrators can list and get the details of menu items, and we’ll do this all by using—and improving—our existing GraphQL schema.

We’ll be building the user interface on top of Phoenix’s controllers and templating. If you’ve never used Phoenix to build a UI, don’t worry; we’ll work through it step by step.

Along the way, you’re going to learn about an advanced GraphQL feature, directives, which are special annotations that you can use to customize GraphQL execution. You’ll see that they’re a pretty handy feature to have around.

Let’s jump right in and start building our first GraphQL-driven Phoenix action, complete with a user interface!