Exploring GraphQL

In an attempt to explore new technologies, I have recently digged into GraphQL, which may be the future protocol for fetching data with mobile and web applications. In contrast to the current standard (REST APIs), GraphQL fetches exactly the data you need, in one request. This is vital for mobile applications and can also be handy for web applications.

The basic idea is a replacement for my current theatre project page. I would like to have productions, production detail pages, actor pages etc. A little bit like IMDB for amateur theatre. However, that is a long way to go and learning technologies is my primary focus.

Architecture

My set-up, preferrably in Docker containers, is

  1. Database layer (PostgreSQL)
  2. Database access layer (GraphQL)
  3. Web application (Angular 5)

PostGraphile

The big question is how to get the GraphQL layer working. What I have found was a project called PostGraphile, which even has a Docker image. Everything worked well, you can create and test queries with the GraphiQL web interface, which has autocompletion. The best part of this approach is that you define your database schema only once, in the PostgreSQL database. PostGraphile detects the schema and creates GraphQL queries automatically.

To get all productions with the primary photo, the GraphQL query is

query AllProductions {
  allProductions {
    nodes {
      title,
      releaseDate,
      productionPhotosByProductionId(condition: {productionPhotoType: 1}) {
        nodes {
          photoByPhotoId {
            title,
            src
          }
        }
      }
    }
  }
}

Note that allProductions was created automatically from the existing table production. Similarly, the many-to-many relationship table production_photo was converted to the lengthy productionPhotosByProductionId. This saves you from writing your schema twice, but you have to live with the naming conventions.

The issue, I was experiencing with this particular Docker image was the unability to run GraphQL mutations. Those are needed to change data, e.g. for adding a new production. And this is absolutely necessary for my application.

Apollo Server and Sequelize

The next approach I will dive into is using Apollo Server with Sequelize. This means much more work, as I have to implement the GraphQL resolvers myself. But as I understand the Sequelize approach, I would define the database schema directly in the application with loads of helpers for foreign-key relations. This gives a little redundancy, but more flexibility and a deeper understanding of GraphQL.

Angular and GraphQL

To fetch data with my application, I have used the samples provided by Apollo Client, which also has an Angular version.