Apollo Client with Arbitrary GraphQL Schemas: Part 1

Through example, we will explore creating a Create-Read-Update-Delete (CRUD) frontend application consuming an arbitrary GraphQL schema.

The Goal

Creating a Create-Read-Update-Delete (CRUD) frontend application consuming a predefined GraphQL schema is old news. Rather, to make things interesting, we will explore creating such an application consuming an arbitrary schema, i.e., at runtime the application adapts to the GraphQL schema.

Prerequisites

As for software, all one needs is the latests Node.js LTS version (10.15.3 as of this writing), Docker, and an editor (recommend Visual Studio Code).

Additionally, the writing assumes the reader is comfortable with:

• TypeScript
• React
• GraphQL
• Apollo Client

Yes, this is a fairly high bar.

Quick Start GraphQL Server

As our interest is in exploring a frontend GraphQL solution, we first need to spin up a GraphQL backend. One such solution is to use Graphile.

Instantly spin-up a GraphQL API server by pointing PostGraphile at your existing PostgreSQL database
…
PostGraphile automatically detects tables, columns, indexes, relationships, views, types, functions, comments, and more — providing a GraphQL server that is highly intelligent about your data, and that automatically updates itself without restarting when you modify your database.

— PostGraphile — PostGraphile

Using Docker, we can create a local GraphQL backend from the command-line. We first create a Docker network:

docker network create some-network

We create a PostgreSQL server with a database on the network:

docker run --network some-network --name some-postgres -e POSTGRES_PASSWORD=mysecretpassword -d postgres

This PostgreSQL database can be accessed by other Docker containers on the network using the following URL:

postgresl://postgres:mysecretpassword@some-postgres:5432/postgres

We create a PostGraphile server backed by the PostgreSQL database:

docker run --network some-network --name some-postgraphile -p 5000:5000 -d graphile/postgraphile --connection postgresl://postgres:mysecretpassword@some-postgres:5432/postgres -s app_public --watch --cors

Observations:

• The PostGraphile server exposes port 5000 to the local host
• It is configured to watch the database’s app_public schema; automatically exposing its tables as entities

We can now access a graphical tool that interacts with the PostGraphile server using a browser at the URL:

http://localhost:5000/graphiql

At this point, the server does not have any entities. Let us correct this by defining a Todo entity. We accomplish this by connecting to the PostgreSQL database and creating a todos table. We first login to the PostgreSQL server:

docker exec -it some-postgres /bin/bash
su postgres
psql

We then connect to the database and create the app_public schema:

\c postgres
CREATE SCHEMA app_public;

We now create the todos table:

CREATE TABLE app_public.todos(
  id SERIAL PRIMARY KEY,
  title TEXT NOT NULL
);

and insert a sample record:

insert into app_public.todos (title) values ('Apple');

note: Use the command \q to logout of the PostgreSQL server. Use the command exit to exit the various terminals.

After reloading the browser window, with the graphical tool, we can see the PostGraphile server created a Todo entity.

We can then execute a GraphQL query to return all the Todo entities:

{
  allTodos {
    nodes {
      id
      title
    }
  }
}

The Old News

Now that we have a GraphQL API with a predefined schema, a Todo entity, we first create a CRUD frontend application using it.

note: To keep things simpler, we will not implement an update feature.

Specifically, the application has a form to create Todos and a list of Todos. Each Todo listing has a button to delete the Todo.

The implementation, also available for download (old-news branch), primarily consists of:

• src/components/Todos/index.tsx: Uses react-apollo Query and Mutation components to wrap GraphQL API queries
• src/components/Todos/TodosCreate.tsx: Render and handle a form to create Todos
• src/components/Todos/TodosTodo.tsx: Render a Todo listing

Observations:

• Graphile maintains a secondary entity (Todo) identifier property, nodeId. In this example, this identifier is used when deleting Todos
• The code is fairly dense; TypeScript adds an extra layer of complexity
• One important thing to keep in mind is that one must must provide a new value to writeCache instead of mutating the previous value

Next Steps

In the next article, Apollo Client with Arbitrary GraphQL Schemas: Part 2, we will refactor our Todos application to handle arbitrary GraphQL entities.