- GraphQL Tutorial
- GraphQL - Home
- GraphQL - Introduction
- GraphQL - Environment Setup
- GraphQL - Architecture
- GraphQL - Application Components
- GraphQL - Example
- GraphQL - Type System
- GraphQL - Schema
- GraphQL - Resolver
- GraphQL - Query
- GraphQL - Mutation
- GraphQL - Validation
- GraphQL - JQuery Integration
- GraphQL - React Integration
- GraphQL - Apollo Client
- GraphQL - Authenticating Client
- GraphQL - Caching
- GraphQL Useful Resources
- GraphQL - Quick Guide
- GraphQL - Useful Resources
- GraphQL - Discussion
GraphQL - Application Components
This chapter discusses different GraphQL components and the way they communicate with each other. The entire application components can be distinguished as below −
- Server-side Components
- Client-side Components
Server-Side Components
GraphQL server forms the core component on the server side and allows to parse the queries coming from GraphQL client applications. Apollo Server is most commonly used implementation of GraphQL specification. Other server programming components include the following −
| Sr.No. | Server Essentials & Description |
|---|---|
| 1 | Schema A GraphQL schema is at the center of any GraphQL server implementation and describes the functionality available to the clients which connect to it. |
| 2 | Query A GraphQL query is the client application request to retrieve data from database or legacy API's. |
| 3 | Resolver Resolvers provide the instructions for turning a GraphQL operation into data. They resolve the query to data by defining resolver functions. |
Client-side Components
Given below are the client-side components −
| Sr.No. | Tool & Description |
|---|---|
| 1 | GraphiQL Browser based interface for editing and testing GraphQL queries and mutations. |
| 2 | ApolloClient Best tool to build GraphQL client applications. Integrates well with all javascript front-end. |
The below diagram shows a Client-Server architecture. The web server is built on NodeJs and Express framework. A request is made to the Apollo GraphQL Server by ReactJS application (built using Apollo Client library) or GraphiQL browser application. The query will be parsed and validated against a schema defined in the server. If the request schema passes the validation, then the associated resolver functions will be executed. The resolver will contain code to fetch data from an API or a database.
