GraphQL Rundown

GraphQL is a query language and server application that abstracts data sources and APIs and gives clients the requested data. GraphQL supports three operations they include Queries, Mutation, and Subscription.

Here we see how to configure GraphQL using Java Web Flux and React JS

Dependencies for Java & React JS:

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

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

 "graphql": "^16.10.0",
 "graphql-ws": "^6.0.4",
 "@apollo/client": "^3.13.1",
 "react": "^18.0.0",
 "react-dom": "^18.0.0"

Let’s create a basic customer class to understand web operations like GET, PUT, DELETE, and POST using GraphQL

public class CustomerDTO {
    private Integer id;
    private String name;
    private Integer age;
    private String city;
}

Create a schema file for your Graphql queries in resources it should be named schema.graphqls, which defines a schema for GraphQL API that the client can use to interact with the server. Please find the customer schema below

type Customer{
    id:ID
    name: String
    age: Int
    city: String
}

Now we see how we perform operations

Queries: This operation is used to perform all the get calls on the APIs. We choose GraphQL over REST, when client requests vary on the same API and expect different responses.

Java Snippet:

To query the data we need to create a query schema that uses our customer type to represent what to return.

For mapping our controller we use Query Mapping instead of Get Mapping which we do traditionally in Java. We use the same name that we provided in the schema to map to the controller, so we name the end-point as customers as given in the Query above for proper mapping.

Once you have set the basic end-point we will be writing a service that gets details from DB/APIs and returns to our end-point (you can implement your Data Layer).

After you start your application you will have Graphql started, and you see the server up and running. Query and get your results as follows.

As our backend is up and running, now let’s see how can we call this end-point from the UI react app.

React Snippet:

We use Appolo Client in the UI to get the details, once you add the graphql dependencies you can use the following code in your components in use effect in the front end.

import { useQuery, gql, useSubscription } from '@apollo/client';

 const GET_CUSTOMERS = gql`
 query GetAll{
  customers{
    id
    name
    age
    city
  }
}
`;

 const { data } = useQuery(GET_CUSTOMERS);

Mutation: This operation is used to perform all the post/delete/put operations on the APIs.

Java Snippet:

To perform any of the updates we first add the mutation type to our schema and add the respective operations we want to perform. To provide parameters of custom classes we use type input.

We add the end-point with the same name we use Mutation Mapping in place of POST/ PUT/DELETE.

Add the respective data layer to perform the operation, once you start the application you should be able to access the mutation

React Snippet:

We call from react with the following syntax

const ADD_CUSTOMER = gql`
  mutation AddCustomer($name: String!, $age: Int!, $city: String!) {
    addCustomer(name: $name, age: $age, city: $city) {
      id
      name
      age
      city
    }
  }
`;

Subscription: We use this when we want to open a web socket between the backend and front end to enable two-way communication between server and client.

Java Snippet:

We use subscription mapping which opens a web socket connection on the backend server. We use web flux to post the events to the UI when an operation is performed on the server (create, update, and delete).

Add type subscription to the query schema and set type on what type of details the users want to subscribe on

Let's add the end-point, we use SubscriptionMapping for exposing the subscribe API.

Let’s perform any operation on the back end and see how updates are pushed to subscribers. We use flux and sink for this we publish with sink as we used multi-cast it will be published to all clients as a broadcast message, if we want messages specific to subscribers we can go with unicast. Our controller calls the subscribe function which returns flux(list of messages to publish).

Let’s discuss how will flux publish the events, for that, we exposed one more method emit event, which will be called by the data layer to push the changes. The below data layer pushes the event by calling emit function which pushes the event to flux, which is returned to our controller that publishes to our client via a web socket that gets opened when our subscription end-point is called.

web-socket connection that looks like

React Snippet:

We use react graphql ws dependency to connect to our back end below code discusses how to subscribe to our end-point from react to get the live updates.

const GET_EVENTS = gql`
 subscription{
  customerEvents{
    id
    action
  }
}
`;

  useSubscription<subscriptionData>(GET_EVENTS, {
    onSubscriptionData: ({ subscriptionData }) => {
      if(subscriptionData?.data) {
       // setDataReceived(true);
        console.log("Subscription Data"+JSON.stringify(subscriptionData?.data));
        let  data = subscriptionData.data;
        alert(JSON.stringify(subscriptionData?.data));
      }
    },
  });
// web socket connection
const wsLink = new GraphQLWsLink(
  createClient({
    url: `ws://localhost:8080/graphql`,
  })
);

Pitfalls:

Little complex queries compared to the rest, caching is a little complex.