GraphQL can be used with any backend framework or programming language. Lets first understand certain GraphQL concepts, before we learn how to implement it.
● Schema: GraphQL schema is a description of the data that clients can request from a GraphQL Application Programming Interface (API). A client could use this schema, and construct a request, to fetch/update the relevant data on the server.
● Queries and mutations: Two different types of GraphQL requests can be sent from client to server: query to read data from the server and mutation to modify the data on the server.
● Arguments: Each GraphQL query/mutation can take arguments, which can be built-in scalar types (like String, Int) or complex objects (the fields of which are either other objects or scalar types). Arguments are used by the server, to either identify a resource or filter the response.
● Variables: In a real application, the arguments to a request will be dynamic; GraphQL has a way to factor dynamic values out of the query, and pass them as a separate dictionary. These values are called variables, which are passed alongside the request.
● Endpoint: GraphQL server operates on a single URL/endpoint, usually /graphql, and the GraphQL request is sent through a Hypertext Transfer Protocol (HTTP)POST request.
● Introspection: It is useful to ask a GraphQL schema for information about what queries it supports. GraphQL allows us to do so using the introspection system, where one can access the documentation about the type system in the schema which could be used for rich Integrated development environment (IDE) experiences. GraphQL Playground is a good example of one of many applications that makes use of introspection to provide better development workflows while using GraphQL.
Let us focus on implementation.
GraphQL is a specification and there are numerous implementations. Depending on your language/framework you should choose the relevant server library and GraphQL client.
Let us try to build the to-do list application using GraphQL. The requirements for this application are
● A user using this application can CRUD lists.
● A list can contain a set of Items.
● User can add/delete items to a list.
● User can move an item from one list to another list.
The final front-end of the application would look something like below
Let us choose Java Spring Boot to implement back-end and Angular to implement front-end for this app. The workflow will be somewhat the same across all frameworks. We will choose the Java GraphQL server library and Apollo Angular Client for integrating GraphQL. Depending on your application’s back-end and front-end frameworks, you will similarly choose the corresponding GraphQL server library and GraphQL client.
This is our first step, here the schema describes two object types List and Item. The List object is composed of simple scalar types ( id, name, position) and also object types ( items). We have exposed one query to the client lists(positions:[Int]):[List] . This query accepts an optional parameter position, which is an array of Int, and returns an array of List objects in the response.
Along with this, we have exposed six mutation requests. The client can use these to perform CUD operations, which will modify the data on the server. For some of these mutation requests, we have defined an input type, which is an object type that is used to bundle required fields and passed as an argument to the requests being sent.
Implement GraphQLProvider, to initialize GraphQL. This is done by parsing the above schema file. Then, for each query in the schema, methods required to fetch the data are mapped. It could look as below.
We map the queries in our GraphQL schema with methods in GraphQLDataFetcher in buildWiring, which will get the relevant data by communicating with the service layer.
Connect GraphQL with your service layer. It will contain methods, each of which returns a DataFetcher interface that will be wired into GraphQL in the buildWiring method mentioned above. For each request, GraphQL implementation will call a few of these methods to fulfill the query from the client. Here, it will look as follows.
The POST /graphql endpoint is the default endpoint, which the server uses to listen for GraphQL requests. At this point, you could use a tool like GraphQL playground to test the back-end API.
If we implemented all our components in the Angular application, we will use GraphQL to fetch the data from the back-end. The following steps are required to integrate GraphQL into our Angular services
This NgModule contains all the configurations related to Angular Apollo GraphQL client. For our case, the implementation could look as follows -
Here, we import the essential Angular Apollo modules and initialize the Apollo client. The Apollo client takes in arguments that contain uri. The value of uri should point to the GraphQL endpoint of our server. The arguments also contain cache which is used for caching requests/response being sent through GraphQL on the client-side. We could disable this, which we did by passing the optional defaultOptions argument. We configured all the fetch requests to use network-only and not rely on the local cache.
Disabling cache is optional and not required. For our simple application, it doesn’t affect the performance. Caching in GraphQL is tricky and may not always work as we expect it to work. To get desired results with cache in a complex application, some fine-tuned configuration set-up effort might be necessary.
For our implementation, the AppModule will look as follows.
Here GraphQLModule being imported is the only relevant detail with respect to GraphQL. All other details are application-specific.
Our Angular services will now use this Apollo client to send GraphQL requests to the server and process the response and forward the relevant details to components, for updating the app view. Below are a couple of Angular services from our to-do list app showing the relevant implementation details.
We now have an app that will communicate with our server through GraphQL.
High-Level data flow and architecture view
Summarizing, the architecture of the app we have implemented and data flow from client to server in this app.
On front-end the Angular components which are responsible for rendering the view will call the Angular services whenever they require any data. The Angular services will then prepare a GraphQL request as per the required data and use Apollo GraphQL client to send this request to the server. At this point, an HTTP request containing the contents of the GraphQL query will be sent to the server from the client.
Once a GraphQL request is received at the server. The contents of the request are first validated against the schema. If the request sent is not conforming to the schema exposed by the server, a response containing the error message is immediately sent back. If the request is valid it will then trigger the various methods defined in GraphQLDataFetcher. Each method in the GraphQLDataFetcher will call the methods in the application service layer. These services will then make a database request and return the relevant data. After all the data required by a query has been aggregated. A response will be generated as per the request sent from the client. This response is then sent back to the client through HTTP.
Links
● The GitHub Repository containing the back-end implementation discussed in this article can be found here.
● The GitHub Repository containing the front-end implementation discussed in this article can be found here.
An earlier version of this blog was published on Medium by the author.
.png)
.png)
.svg)
.svg)
.svg)
.png)
.png)
.png)
%20(2).svg)
.svg)
.jpg)
.svg)
GraphQL can be used with any backend framework or programming language. Lets first understand certain GraphQL concepts, before we learn how to implement it.
● Schema: GraphQL schema is a description of the data that clients can request from a GraphQL Application Programming Interface (API). A client could use this schema, and construct a request, to fetch/update the relevant data on the server.
● Queries and mutations: Two different types of GraphQL requests can be sent from client to server: query to read data from the server and mutation to modify the data on the server.
● Arguments: Each GraphQL query/mutation can take arguments, which can be built-in scalar types (like String, Int) or complex objects (the fields of which are either other objects or scalar types). Arguments are used by the server, to either identify a resource or filter the response.
● Variables: In a real application, the arguments to a request will be dynamic; GraphQL has a way to factor dynamic values out of the query, and pass them as a separate dictionary. These values are called variables, which are passed alongside the request.
● Endpoint: GraphQL server operates on a single URL/endpoint, usually /graphql, and the GraphQL request is sent through a Hypertext Transfer Protocol (HTTP)POST request.
● Introspection: It is useful to ask a GraphQL schema for information about what queries it supports. GraphQL allows us to do so using the introspection system, where one can access the documentation about the type system in the schema which could be used for rich Integrated development environment (IDE) experiences. GraphQL Playground is a good example of one of many applications that makes use of introspection to provide better development workflows while using GraphQL.
Let us focus on implementation.
GraphQL is a specification and there are numerous implementations. Depending on your language/framework you should choose the relevant server library and GraphQL client.
Let us try to build the to-do list application using GraphQL. The requirements for this application are
● A user using this application can CRUD lists.
● A list can contain a set of Items.
● User can add/delete items to a list.
● User can move an item from one list to another list.
The final front-end of the application would look something like below
Let us choose Java Spring Boot to implement back-end and Angular to implement front-end for this app. The workflow will be somewhat the same across all frameworks. We will choose the Java GraphQL server library and Apollo Angular Client for integrating GraphQL. Depending on your application’s back-end and front-end frameworks, you will similarly choose the corresponding GraphQL server library and GraphQL client.
This is our first step, here the schema describes two object types List and Item. The List object is composed of simple scalar types ( id, name, position) and also object types ( items). We have exposed one query to the client lists(positions:[Int]):[List] . This query accepts an optional parameter position, which is an array of Int, and returns an array of List objects in the response.
Along with this, we have exposed six mutation requests. The client can use these to perform CUD operations, which will modify the data on the server. For some of these mutation requests, we have defined an input type, which is an object type that is used to bundle required fields and passed as an argument to the requests being sent.
Implement GraphQLProvider, to initialize GraphQL. This is done by parsing the above schema file. Then, for each query in the schema, methods required to fetch the data are mapped. It could look as below.
We map the queries in our GraphQL schema with methods in GraphQLDataFetcher in buildWiring, which will get the relevant data by communicating with the service layer.
Connect GraphQL with your service layer. It will contain methods, each of which returns a DataFetcher interface that will be wired into GraphQL in the buildWiring method mentioned above. For each request, GraphQL implementation will call a few of these methods to fulfill the query from the client. Here, it will look as follows.
The POST /graphql endpoint is the default endpoint, which the server uses to listen for GraphQL requests. At this point, you could use a tool like GraphQL playground to test the back-end API.
If we implemented all our components in the Angular application, we will use GraphQL to fetch the data from the back-end. The following steps are required to integrate GraphQL into our Angular services
This NgModule contains all the configurations related to Angular Apollo GraphQL client. For our case, the implementation could look as follows -
Here, we import the essential Angular Apollo modules and initialize the Apollo client. The Apollo client takes in arguments that contain uri. The value of uri should point to the GraphQL endpoint of our server. The arguments also contain cache which is used for caching requests/response being sent through GraphQL on the client-side. We could disable this, which we did by passing the optional defaultOptions argument. We configured all the fetch requests to use network-only and not rely on the local cache.
Disabling cache is optional and not required. For our simple application, it doesn’t affect the performance. Caching in GraphQL is tricky and may not always work as we expect it to work. To get desired results with cache in a complex application, some fine-tuned configuration set-up effort might be necessary.
For our implementation, the AppModule will look as follows.
Here GraphQLModule being imported is the only relevant detail with respect to GraphQL. All other details are application-specific.
Our Angular services will now use this Apollo client to send GraphQL requests to the server and process the response and forward the relevant details to components, for updating the app view. Below are a couple of Angular services from our to-do list app showing the relevant implementation details.
We now have an app that will communicate with our server through GraphQL.
High-Level data flow and architecture view
Summarizing, the architecture of the app we have implemented and data flow from client to server in this app.
On front-end the Angular components which are responsible for rendering the view will call the Angular services whenever they require any data. The Angular services will then prepare a GraphQL request as per the required data and use Apollo GraphQL client to send this request to the server. At this point, an HTTP request containing the contents of the GraphQL query will be sent to the server from the client.
Once a GraphQL request is received at the server. The contents of the request are first validated against the schema. If the request sent is not conforming to the schema exposed by the server, a response containing the error message is immediately sent back. If the request is valid it will then trigger the various methods defined in GraphQLDataFetcher. Each method in the GraphQLDataFetcher will call the methods in the application service layer. These services will then make a database request and return the relevant data. After all the data required by a query has been aggregated. A response will be generated as per the request sent from the client. This response is then sent back to the client through HTTP.
Links
● The GitHub Repository containing the back-end implementation discussed in this article can be found here.
● The GitHub Repository containing the front-end implementation discussed in this article can be found here.
An earlier version of this blog was published on Medium by the author.
GraphQL can be used with any backend framework or programming language. Lets first understand certain GraphQL concepts, before we learn how to implement it.
● Schema: GraphQL schema is a description of the data that clients can request from a GraphQL Application Programming Interface (API). A client could use this schema, and construct a request, to fetch/update the relevant data on the server.
● Queries and mutations: Two different types of GraphQL requests can be sent from client to server: query to read data from the server and mutation to modify the data on the server.
● Arguments: Each GraphQL query/mutation can take arguments, which can be built-in scalar types (like String, Int) or complex objects (the fields of which are either other objects or scalar types). Arguments are used by the server, to either identify a resource or filter the response.
● Variables: In a real application, the arguments to a request will be dynamic; GraphQL has a way to factor dynamic values out of the query, and pass them as a separate dictionary. These values are called variables, which are passed alongside the request.
● Endpoint: GraphQL server operates on a single URL/endpoint, usually /graphql, and the GraphQL request is sent through a Hypertext Transfer Protocol (HTTP)POST request.
● Introspection: It is useful to ask a GraphQL schema for information about what queries it supports. GraphQL allows us to do so using the introspection system, where one can access the documentation about the type system in the schema which could be used for rich Integrated development environment (IDE) experiences. GraphQL Playground is a good example of one of many applications that makes use of introspection to provide better development workflows while using GraphQL.
Let us focus on implementation.
GraphQL is a specification and there are numerous implementations. Depending on your language/framework you should choose the relevant server library and GraphQL client.
Let us try to build the to-do list application using GraphQL. The requirements for this application are
● A user using this application can CRUD lists.
● A list can contain a set of Items.
● User can add/delete items to a list.
● User can move an item from one list to another list.
The final front-end of the application would look something like below
Let us choose Java Spring Boot to implement back-end and Angular to implement front-end for this app. The workflow will be somewhat the same across all frameworks. We will choose the Java GraphQL server library and Apollo Angular Client for integrating GraphQL. Depending on your application’s back-end and front-end frameworks, you will similarly choose the corresponding GraphQL server library and GraphQL client.
This is our first step, here the schema describes two object types List and Item. The List object is composed of simple scalar types ( id, name, position) and also object types ( items). We have exposed one query to the client lists(positions:[Int]):[List] . This query accepts an optional parameter position, which is an array of Int, and returns an array of List objects in the response.
Along with this, we have exposed six mutation requests. The client can use these to perform CUD operations, which will modify the data on the server. For some of these mutation requests, we have defined an input type, which is an object type that is used to bundle required fields and passed as an argument to the requests being sent.
Implement GraphQLProvider, to initialize GraphQL. This is done by parsing the above schema file. Then, for each query in the schema, methods required to fetch the data are mapped. It could look as below.
We map the queries in our GraphQL schema with methods in GraphQLDataFetcher in buildWiring, which will get the relevant data by communicating with the service layer.
Connect GraphQL with your service layer. It will contain methods, each of which returns a DataFetcher interface that will be wired into GraphQL in the buildWiring method mentioned above. For each request, GraphQL implementation will call a few of these methods to fulfill the query from the client. Here, it will look as follows.
The POST /graphql endpoint is the default endpoint, which the server uses to listen for GraphQL requests. At this point, you could use a tool like GraphQL playground to test the back-end API.
If we implemented all our components in the Angular application, we will use GraphQL to fetch the data from the back-end. The following steps are required to integrate GraphQL into our Angular services
This NgModule contains all the configurations related to Angular Apollo GraphQL client. For our case, the implementation could look as follows -
Here, we import the essential Angular Apollo modules and initialize the Apollo client. The Apollo client takes in arguments that contain uri. The value of uri should point to the GraphQL endpoint of our server. The arguments also contain cache which is used for caching requests/response being sent through GraphQL on the client-side. We could disable this, which we did by passing the optional defaultOptions argument. We configured all the fetch requests to use network-only and not rely on the local cache.
Disabling cache is optional and not required. For our simple application, it doesn’t affect the performance. Caching in GraphQL is tricky and may not always work as we expect it to work. To get desired results with cache in a complex application, some fine-tuned configuration set-up effort might be necessary.
For our implementation, the AppModule will look as follows.
Here GraphQLModule being imported is the only relevant detail with respect to GraphQL. All other details are application-specific.
Our Angular services will now use this Apollo client to send GraphQL requests to the server and process the response and forward the relevant details to components, for updating the app view. Below are a couple of Angular services from our to-do list app showing the relevant implementation details.
We now have an app that will communicate with our server through GraphQL.
High-Level data flow and architecture view
Summarizing, the architecture of the app we have implemented and data flow from client to server in this app.
On front-end the Angular components which are responsible for rendering the view will call the Angular services whenever they require any data. The Angular services will then prepare a GraphQL request as per the required data and use Apollo GraphQL client to send this request to the server. At this point, an HTTP request containing the contents of the GraphQL query will be sent to the server from the client.
Once a GraphQL request is received at the server. The contents of the request are first validated against the schema. If the request sent is not conforming to the schema exposed by the server, a response containing the error message is immediately sent back. If the request is valid it will then trigger the various methods defined in GraphQLDataFetcher. Each method in the GraphQLDataFetcher will call the methods in the application service layer. These services will then make a database request and return the relevant data. After all the data required by a query has been aggregated. A response will be generated as per the request sent from the client. This response is then sent back to the client through HTTP.
Links
● The GitHub Repository containing the back-end implementation discussed in this article can be found here.
● The GitHub Repository containing the front-end implementation discussed in this article can be found here.
An earlier version of this blog was published on Medium by the author.
.svg)
.svg){kind=small}
.png){kind=small}
