Rapid Application Development

Solution Overview

Innovation at a rapid pace brings the challenge of achieving a balance between go fast, fail fast while ensuring efficiency, security, maintainability, and scalability. An open-source data language called GraphQL can assist in the rapid creation of backend web services by minimizing the number of server round trips, reducing code, and enabling faster product iterations. However, the traditional approach to implementing GraphQL requires coding GraphQL resolvers, which can impede the translation process.

Dgraph is the native graph database with native GraphQL support that eliminates the need for resolvers or custom queries by implementing efficient graph traversal queries. This solution provides fast, secure, and scalable GraphQL development, accelerating the creation of APIs and data.

‍

GraphQL & Dgraph Overview

GraphQL is an open-source data language for APIs which is gaining traction as an alternative to more traditional REST API style for building backend web services. GraphQL exposes a single endpoint, uses a strictly-typed schema and gives the developers the ability to query the exact dataset they need for a particular screen in a single operation. GraphQL is often used alongside javascript frameworks such as React or Vue on the front end to serve up specific new components when needed.

GraphQL main premise over REST is to

eliminate the over-fetching and under-fetching problems.
offer out-the-box validation and type checking.
fetch data in a single network and minimize round trips to the server.
streamline development with fewer lines of code.
enable agility through faster product iterations.
reduce effort to produce and maintain the API documentation

By design, the GraphQL schema defines the resources available for retrieval in addition to the accepted parameters when fetching that data.

Dgraph is the native Graph database with native GraphQL support. It is open-source, scalable, distributed, highly-available, and lightning fast.

GraphQL traditional implementations require a 'layer' translating the GraphQL request into database queries. This usually implies coding GraphQL 'resolvers'. Even with tools generating resolvers for specific databases the resulting translation is slow.
With Dgraph no resolvers or custom queries are needed. Simply update a GraphQL schema, and all APIs are ready to go. The “resolvers” are transparently implemented in a very efficient way through graph traversal queries with native graph performance.

Let's see how to leverage Dgraph and its native GraphQL API endpoint.

We will illustrate the process with a "message board app" :

Users who are logged-in can create new posts organized in categories, and each post can have a stream of comments from other users.
Anonymous users can see the messages unless the category is marked private, in this case users have to get viewer permission.

This paper is providing an overview of the implementation process, for a complete tutorial please look at Build a Message Board App.

‍

Step 1 - Analysis

One of the first steps is probably to start brainstorming about what your application is about, how UI components could look like, which data are involved and how they relate to each other.

Your brainstorming session may well start with some screen mockup :

… and it could end up with a sketch like this about the data.

It's certainly interesting to note that people naturally think in terms of graphs !

If you have some people with database experience you might have something like this :

You may prefer boxes to bubble but it's still a graph !

‍

Step 2 - Build the GraphQL schema

From you analysis session you are ready to create a GraphQL schema :


type User {
  username: String! @id
  displayName: String
  avatarImg: String
  posts: [Post!]
  comments: [Comment!]
}


type Post {
  id: ID!
  title: String! @search(by: [term])
  text: String! @search(by: [fulltext])
  tags: String @search(by: [term])
  datePublished: DateTime
  author: User!  @hasInverse(field: posts)
  category: Category! @hasInverse(field: posts)
  comments: [Comment!]
}


type Comment {
  id: ID!
  text: String!
  commentsOn: Post! @hasInverse(field: comments)
  author: User! @hasInverse(field: comments)
}


type Category {
  id: ID!
  name: String! @search(by: [term])
  posts: [Post!]
}

Your GraphQL 'types' are the entities you have identified, and definitions such as


comments: [Comment!] 
…
author: User! @hasInverse(field: comments)

Defines relationships between the entities.

Refers to Dgraph documentation - GraphQL API Schema for details about the notation.

Step 3 - Deploy the GraphQL schema in Dgraph

Just deploy the GraphQL Schema from the Dgraph Cloud dashboard or through our admin API.

Your backend is ready ! no code, no resolvers, no database schema to create, no mapping between GraphQL and tables !

‍

Step 4 - Populate your backend

Dgraph generates queries and mutations for the GraphQL schema.

You can easily use mutation requests to populate your data.


mutation {
  addUser(input: [
    { username: "User1" }
  ]) {
    user {
      username
      displayName
    }
  }
  addCategory(input: [
    { name: "Category1",
      posts : [
    {
      title: "Post1",
      text: "Post1",
      author: { username: "User1" }
    }, 
    {
      title: "Post2",
      text: "Post2",
      author: { username: "User1" }
    },
    {
      title: "Post3",
      text: "Post3",
      author: { username: "User1" }
    }   
    ]
    }
  ]) {
    category {
      id
      name
      posts { text }
    }
    
  }
  
}

As Dgraph is also the graph backend you can bypass the API and leverage low level fast data loading capabilities (Dgraph documentation - Import Data) to rapidly inject large amounts of data.

‍

Step 5 - UI stack

As GraphQL is a standard, you can basically use any UI technology and framework with a capability to fetch data using a GraphQL endpoint.

Type safety is usually a must for rapid application development in order to quickly spot and address changes during your iterations : by hooking up GraphQL Code Generator to the Dgraph instance serving your GraphQL API, you can regenerate types as you iterate on the schema and use those types to lay out the UI components.

The combination of Dgraph, GraphQL Code Generator and GraphQL client constitutes an effective app factory and a mostly declarative way to build your applications.

Our favorite stack as of today (2023) is probably :

Dgaph backend and GraphQL endpoint

React.js frontend

Graphql-code-generator GraphQL code generator

urql, react-relay or apollo client GraphQL client

‍

Going further

Your application will need authentication. You can use Dgraph and the built-in User and Group entities to build a user/password login or use any login system that can generate a JWT token such as oauth0, AWS Cognito ...

Then, you want to use the identity of the users and provide access control to the resources. Dgraph allows you to create sophisticated access control rules using the @auth directive.

You can also leverage GraphQL Subscription to have real-time notifications in your application when data is changing.

Your GraphQL API is probably not replacing all your REST APIs ! With Dgraph Lambda, you can bring RESTful Data into your GraphQL responses. Check this blog for more details. Lambda provides a way to write your custom logic in JavaScript, integrate it with your GraphQL schema, and execute it using the GraphQL API.

References

https://dgraph.io/graphql/
https://dgraph.io/blog/post/graphql-rest/#how-to-get-started-using-graphql-a-idget-started-with-graphqla/

Rapid Application Development with GraphQL