Application Components of GraphQL
2020-10-31 09:07:00

Application Components of GraphQL

GraphQL Application Components: For communicating between GraphQL server and client-side, the components of GraphQL are very important. The components of GraphQL are significant parts of communication. In this topic, we will see all the essential components, and how they communicate with each other.

Types of application components of GraphQL

Following are the application components of GraphQL:

1. Application components of GraphQL from the server-side.

2. Application components of GraphQL from the client-side.

We will look at each type of application component of GraphQL one by one and see how they are implemented, their roles, and what kind of specific tasks they perform.

1. Application component of GraphQL from server-side:

On the server-side, GraphQL uses three essential application components for its server implementation. The three application components that GraphQL uses at its server-side are the following: -

  • Query
  • Schema
  • Resolve

The server-side application components of GraphQL will process and execute the queries coming from the client application of GraphQL. Many GraphQL servers are available nowadays, but the most popular one is the Apollo server, a spec-compliant and open-source server. The Apollo server for GraphQL is compatible with different kinds of GraphQL clients, but we will only talk about Apollo-client in this tutorial. Later in this tutorial, we will also discuss how to set up the Apollo server and Apollo client to implement GraphQL in our projects.

Let's look at all three application components of GraphQL from the server-side one by one: -

Query: A client application request used for retrieving data from the GraphQL server is called a query. When a client requests a query from the client-side, the query is executed on the server-side, and the GraphQL server returns the requested data to the client. The most beautiful thing about GraphQL queries is that you will get the exact data that you wanted from the GraphQL server, nothing more, nothing less. The field of a GraphQL query can point to arrays and support the arguments inside the query. In GraphQL query, there are two main parts of query: Field and Arguments.

Let us see an example of GraphQL queries; all the GraphQL queries are going to end in the following type:

 type Query
{
      user: [You!]!
 } 

In the above-written query, we have defined the type as a query. This query is straightforward: in the above-written user query, it will return an array to us, which is also an array of one or more users. This query will not return null. This is because we put ‘!’ in the query, which means this query is non-nullable. This query is always going to return something.

  • Field: In the above written GraphQL query, a field is a part that specifies what kind of information we are asking or requesting from the server and then the GraphQL server returns the data which we have specified in the field.
  • Argument: In the GraphQL object type, every field can have multiple, single or zero arguments.

Schema: The schema in the GraphQL is the core of the implementation of the GraphQL server. Schema of GraphQL describes the functionality which is available for the connected clients with the GraphQL server. A type is the core building block of the GraphQL schemas.

Resolver: The functions used to provide directions/instructions for converting the operations of GraphQL into data are known as the Resolver function of GraphQL. The resolver function gives a specific set of instructions for converting the operations of GraphQL into data. The resolvers of GraphQL defines the functions inside the GraphQL to resolve the query of clients.

One more advantage of the resolver function is that it also separates schemas of database where the GraphQL server is connected to APIs schemas. And it makes it very easy to modify the content or data which is obtained from the database.

The server of GraphQL

As we have mentioned many times, GraphQL is just a specification, so when we talk about the GraphQL server, it means we have to use some implementations to create a communication between GraphQL server and GraphQL client-side. Now, we will look at the type of implementations that are used with the GraphQL servers.

Types of Implementations for the GraphQL server:

  • GraphQL-JavaScript: We can also call this type of implementation as GraphQL-JS. This type of implementation is used with the express app. This implementation is the original reference GraphQL server implementation.
  • GraphQL-server: This is used for all implementation of the GraphQL server with the help of the apollo server. This kind of implementation of the GraphQL server with the apollo can be accessed from any of the GraphQL client implementations.
  • Yoga-GraphQL: GraphQL-Yoga implementation is a combination of the above two kinds of implementation. This type of implementation is built using both express and apollo server implementation, also known as Prisma's server implementation.
  • Serverless-GraphQL: This type of implementation is the instant GraphQL APIs of Back4App, fully integrated with the database like MongoDB and the cloud functions.

2. Application components from the client-side of GraphQL:

The application components from the client-side of GraphQL are components that reside on the GraphQL clients. The client of GraphQL is a code or a library of JavaScript, which can request the server-side of GraphQL with POST. The client-side application components of GraphQL can be a single-page application, a CMS like Drupal or a mobile application, etc. Now, we will look at each of the application components of the client-side of GraphQL.

Client-side application components of GraphQL:

Following are the applications components of GraphQL which we use to implement GraphQL on the client-side of our projects: -

  • Apollo Client: Apollo client is one of the best tools that help to build client applications of GraphQL. The Apollo client can be integrated very quickly with all formats of JavaScript front-ends. Apollo clients will be beneficial in dealing with network traffic by normalizing the data and caching the client requests. Apollo client supports many useful client-side features like prefetching data pagination and supporting a layer of connection between the data layer and the view layer.
  • GraphiQL:  GraphiQL is nothing but a browser-based interface used for testing and editing our queries in GraphQL and used for mutations. We have already done one example of GraphQL with this GraphiQL in our previous sections of this tutorial.

GraphQL clients: We can use GraphQL APIs directly into our projects, but this is not a good practice. We should always use a dedicated client library for our GraphQL APIs. This is a good practice while working on projects with GraphQL APIs. This practice also makes things significantly more straightforward.

Relay library: Relay library is a JavaScript library of Facebook, which is used for utilizing or implementing GraphQL while working with react build applications.

Gateways of GraphQL: The most popular Gateway for GraphQL implementation is none other than the Apollo engine. Apollo engine provide various features like executed query traction, tracking query execution, caching of the query, and error tracking on field-level. Apollo engine also keeps data on the performance trend analysis of APIs.

Client-Server Architecture of GrpahQL

Client-Server Architecture of GrpahQL

The above diagram illustrates a full application component of GraphQL. This image shows the architecture of GraphQL from the client-side. In this image, we can see how communication is happening between the client-side of GraphQL with the server of GraphQL, which is connected with the application's database.

The web server where we implement GraphQL is built on the framework of node.js and express. When we launch a query, a request is made to the GraphQL server, Apollo server, in this image by the ReactJS application (built using a specific client library, i.e., Apollo client library) or with the web browser application of GraphQL such as GraphiQL.

The query which is launched from the client-side is being executed in the Apollo server implemented by GraphQL. Now, the query will pass, and this query will have to be validated against the schemas of GraphQL, which is defined by the browser. If the requested query gets the validation from the schemas of GraphQL, then the resolver function, which is associated with GraphQL, can execute the query.

This resolver function of GraphQL contains the codes used for fetching data from a database where GraphQL is implemented or from APIs of the server-side. The communication is done between the client-side and the server-side of applications when we implement GraphQL in our projects.