Search⌘ K
Home
Courses
Craft GraphQL APIs in Elixir with Absinthe

Order History

Explore how to create an order history page using GraphQL with Phoenix. Learn to handle queries, manage user input for filtering by date, and update the UI to show relevant historical data alongside menu items. Understand how to keep your GraphQL API and frontend in sync while adding useful features.

We'll cover the following...

Displaying order history

Our GraphQL schema is good to go at this point, so it’s all UI work from here. We now want to put together a page that shows the details of a specific menu item, its order history, and the statistics we compute. The controller action itself is nice and simple:

use Absinthe.Phoenix.Controller, 
   schema: PlateSlateWeb.Schema, 
   action: [mode: :internal]
# «Rest of controller»
@graphql """
query ($id: ID!, $since: Date) {
  menu_item(id: $id) @put {
    order_history(since: $since) {
      quantity
      gross
      orders
   }
  }
}
"""
def show(conn, %{data: %{menu_item: nil}}) do
  conn
  |> put_flash(:info, "Menu item not found") 
  |> redirect(to: "/admin/items")
end
def show(conn, %{data: %{menu_item: item}}) do
  since = variables(conn)["since"] || "2018-01-01"
  render(conn, "show.html", item: item, since: since) 
end

One thing that’s different from before is that instead of including an @action directive on this particular GraphQL query, we set a configuration value and then use the Absinthe.Phoenix.Controller invocation. If all the GraphQL documents within a controller should use the mode :internal option, we can simply specify this on the use call. This way, we don’t have to add that boilerplate to every document. The callback itself has two clauses. The first is if the ID we’re given fails to turn up a menu ...