React & Spring Boot Graphql Fullstack Microservice Application on Kubernetes

Hello everyone, In this article, we will develop a fullstack graphql microservice application using React and Spring Boot and deploy this application on Kubernetes.

GraphQL

GraphQL is a query language and server-side runtime for application programming interfaces (APIs) that prioritizes giving clients exactly the data they request and no more.

GraphQL is designed to make APIs fast, flexible, and developer-friendly. It can even be deployed within an integrated development environment (IDE) known as GraphiQL. As an alternative to REST, GraphQL lets developers construct requests that pull data from multiple data sources in a single API call.

Apollo Federation

Although Apollo Federation is a complex structure, we can briefly say that it is a technology that enables multiple graphql schemes to be gathered under a single gateway and accessed as a single scheme.

Apollo federation is an elegant approach to apply microservice pattern with GraphQL. Using federation you can easily split your schema into multiple subschemas and implement each subschema logic in it’s own service.

In this article we gonna implement a simple product-review graph, so we will have 4 services:

• product service
• review service
• apollo gateway
• auth service

Auth service

We are using oauth2 authorization server that implemented using spring security authorization server framework to secure the application.we will not focus on this service in this article. OAuth authorization server is responsible for authenticating the users and issuing access tokens containing the user data and proper access policies.

The OAuth2 Authorization Server can be accessed from this link via kubernetes.

http://auth.susimsek.github.io

The OAuth2 Authorization Server can be accessed from this link via heroku. https://graphql-fullstack-auth-service.herokuapp.com

Apollo Gateway

Let’s define our Apollo Federation gateway.

npm install @apollo/gateway apollo-server graphql --save

We added cors configuration, Vault and Consul configuration to apollo gateway.And also added authorization header value to context to send authorization header to subgraph.We used manuel composition to compose a supergraph schema from a collection of subgraph schemas.manuel composition recommended for production environment by the apollo federation team.

Product service

First, we use spring graphql starter.Spring for GraphQL provides support for Spring applications built on GraphQL Java.The project reached version 1.0 in May 2022.

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-graphql</artifactId>
</dependency>

Then we will user spring webflux starter to provide reactive programming support.Reactive systems better utilize modern processors. Also, the inclusion of back-pressure in reactive programming ensures better resilience between decoupled components.

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-webflux</artifactId>
</dependency>

Then let’s define our product schema

Take a note of that @key directive in Product type. It indicates that we defined a GraphQL entity.

Let’s create our controller to serve our product subgraph

Review service

Once we installed same dependencies as for product service we can define the schema.

As you can see, for now review subgraph doesn’t have Query section at all — we defined the Review type and what the most interesting — extended the Product type with a new reviews property that returns an array of product’s reviews.

Let’s create our controller to serve our review subgraph

Getting everything together

Now, let’s launch and query. First start auth service and then our subgraphs. finally start the gateway. Apollo studio should be available on http://localhost:4000/.

Get access token from oauth2 server and assign it to Authorization header. Then, run the following query.

The result should be

Frontend

We use GraphQL Code Generator is a CLI tool that generates code out of our GraphQL schema.

Install the following npm packages required to run GraphQL Code Generator

npm install @graphql-codegen/cli @graphql-codegen/introspection @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo --save-dev

And also install the following npm packages generate types for TypeScript,Graphql and Apollo.

npm install graphql @apollo/client typescript --save

Then add the codegen.yml file to your project. This file is a config for GraphQL-Codegen.

The next step is to add scripts to package.json

"scripts": {
  "generate": "graphql-codegen --config codegen.yml",
  "sonar": "node sonarqube-scanner.js"
}

You’ll run this script (npm run codegen) every time you've changed anything in your GraphQL API or in your GraphQL files to get the most up-to-date types generated.

Let’s create the following GraphQL query to fetch product reviews

Run the codegen to generate types and hooks:

npm run generate

Use the generated hook in react.

That’s it. Graphql codegen is amazing tool to generate reusable hooks in your GraphQL files.By using this approach we are able to;

• Avoid generating dynamic queries at runtime.
• Use graphql query language rather than a language-specific syntax like tagged template literals
• Improve on the DX for we auto-generate reusable hooks with type-safety and IDE IntelliSense
• Validate queries against our schema
• Rebuild our code when we change our queries

Heroku

I just deployed oauth2 authorization server fullstack application to heroku.You can access the oauth2 authorization server via the links below.

The Oauth2 Authorization server can be accessed from this link.

http://graphql-fullstack-auth-service.herokuapp.com

You can log in to the authorization server using that credential information or login to the authorization server with gmail.

username: admin
password: password

Deployment with Docker Compose

Docker Compose is a tool for defining and running multi-container Docker applications.

You can deploy the app by running the following bash command

sudo chmod +x deploy.sh
./deploy.sh -d

You can uninstall app the following bash command

./deploy.sh -d -r

The Fullstack GraphQL App be accessed with nginx from the link below.

http://127.0.0.1

The OAuth2 Authorization Server be accessed from the link below. (default nginx ingress)

http://127.0.0.1:9000

Kubernetes Deployment with Helm

Helm is a package manager for Kubernetes that allows developers and operators to more easily package, configure, and deploy applications and services onto Kubernetes clusters.

You can deploy the app by running the following bash command

sudo chmod +x deploy.sh
./deploy.sh -k

You can uninstall app the following bash command

./deploy.sh -k -r

You can upgrade the App (if you have made any changes to the generated manifests) by running the following bash command

./deploy.sh -u

The Fullstack GraphQL App be accessed with ingress from the link below.(default nginx ingress)

http://gqlmsweb.susimsek.github.io/

The OAuth2 Authorization Server be accessed with ingress from the link below. (default nginx ingress)

http://auth.susimsek.github.io/

Summary

In this article, we have focused on how to develop a fullstack microservice application graphql based on Kubernetes.

GraphQL is a very exciting new technology that can potentially revolutionize the way we develop Web APIs.With Apollo Federation, implementing federated GraphQL in the context of microservices becomes easier than ever.

Finally, the full implementation of this article can be found in the GitHub project.

My article ends here. See you in the next articles.