Tyrique  Littel

Tyrique Littel

1603573200

Discover GraphQL by Building a Headless Blog with Apollo and Slash GraphQL

In this article, I’m going to explore graph databases/GraphQL by building a proof of concept blog powered by the recently launched Slash GraphQL - a hosted GraphQL backend.

Graphs are a fascinating way to model the information in a system where the relationships (edges) between pieces of data (nodes) are first-class entities of the system. This is a different approach to the more common relational database (RDBMS) model, where the relationships between records are implied. For example, “this user owns this post because user.id == post.user_id”.

Graphs are most useful when the relationships among the data are as important as the data itself. For instance:

  • Knowledge graphs
  • Recommendation engines
  • Supply chain management
  • Social media

In general, graphs offer more descriptive queries, greater flexibility in adapting your model, and better performance when traversing relationships. _GraphQL _(which we will be working with in this article) is a data manipulation and query language that gives you the power of graph through an API.

Working with graphs can feel a little unfamiliar if you’re used to working with RDBMSs, so in this article, I’ll try to show you some of the basics. I’m going to build a GraphQL-powered blog. The relationships between Users, Posts, and Comments (user has many posts, post has many comments, user has many comments) highlight the power of GraphQL, as you’ll see below. As usual, I’m not trying to produce finished, production-ready code here—just simple examples to show you the underlying concepts.

You can find all the example code for this article here.

Dgraph

For this article, I’m going to use Dgraph, a native GraphQL database (as opposed to a GraphQL layer on top of a relational datastore) written in Go, and designed for large-scale application with high-availability and transaction support. If you’re interested in learning more about the project, there are some good introductory videos on their YouTube Channel. Using a native GraphQL database over a GraphQL layer is usually preferred, as it offers easier data modeling, deep join speed, and solves the n+1 problem.

Rather than installing Dgraph on a server, or running it locally via docker, I’m going to use their hosted GraphQL backend service Slash GraphQL. The free tier (at the time of writing) allows 10,000 operations per month, which is plenty for our purposes.

Let’s get started.

Creating a GraphQL Backend on Slash GraphQL

In order to use Slash GraphQL, you need to log in using your GitHub or Google account, and you’ll then see the web interface with options to create and manage your backends, as well as many links to tutorials and other documentation, which I recommend exploring.

Dgraph recently released slash-graphql, a hosted GraphQL backend. With a hosted backend, you don’t need to manage your own infrastructure, create and manage your own database, or create API endpoints. That’s all taken care of for you, so it’s a great choice for our project. Because I strongly prefer working on the command-line, I’m going to use that for this article. But you can do everything via the web interface, if you prefer.

Slash Graph dashboard

You can install the command-line tool by running:

npm install --global slash-graphql

Create a Backend

Using slash-graphql to manage Slash GraphQL backends feels a lot like using the Heroku command-line tool to manage Heroku applications, so if you’re comfortable with that, you should find this quite familiar.

To create a Slash GraphQL backend via the command-line, we first have to log in:

slash-graphql login

This will prompt you to confirm that a code on your terminal matches a code shown on the web page that the command will open. Once you have done this, you can issue commands to Slash GraphQL.

Now we can create our GraphQL backend like this:

slash-graphql create-backend blog

This will output the “endpoint” of your backend, which usually takes around 20 seconds to create. This is the URL we will use to interact with our GraphQL database. You’ll be using this throughout this article, so please make a note of it.

#graph database #graphql #vue #database architecture #web programming #database application development #apollo #graph query languages #dgraph

Discover GraphQL by Building a Headless Blog with Apollo and Slash GraphQL