GraphQL Application Components
GraphQL components are very important to make communication happen. Let’s see what the important GraphQL key components and the way they communicate with each other are.
There are 2 types of GraphQL application components:
- GraphQL Server-side Components
- GraphQL Client-side Components
GraphQL Server-side Components
The GraphQL API uses three main components that reside on the GraphQL server. These components are query, resolver, and schema. Server-side components allow parsing the queries coming from GraphQL client applications.
The most popular GraphQL server is Apollo Server, which is an open-source, spec-compliant GraphQL server. It is compatible with any GraphQL client such as Apollo Client.
| Component | Description |
|---|---|
| Query | A query is a client application request made by the GraphQL client to make communication with the GraphQL server. It is used to read or retrieve values. A query field can support arguments and points to arrays. There are 2 important parts of a query: field and arguments. Field: In a GraphQL query, a field specifies that we are asking for particular information from the server. An example of a field in GraphQL query. query { student { id firstName } } "data": { "student":[ { "id": 101, "firstName": "Albert" } , … ] } } Here in the above query example, we ask the server for the field called the student, and its subfields like id and firstName and the GraphQL server sends the asked data. |
| Resolver | Resolvers are used to provide directions for converting GraphQL operation into data. They provide instructions for turning a GraphQL operation into data. They define resolver functions to resolve the query to data. The resolvers also separate database schema and API schema, which makes it easy to modify the content obtained from the database. |
| Schema | The GraphQL schema is the center of any GraphQL server implementation. It describes its available functionality to the connected clients. The core building block within schemas is called a type. |
GraphQL Servers
GraphQL is simply a specification. We have to use some GraphQL server implementations to make communication.
Types of GraphQL Servers Implementation
GraphQL-JS: GraphQL-JS is used with Express. It is the original reference implementation of GraphQL.
GraphQL-Server: GraphQL-Server is the all-in-one GraphQL server implementation of Apollo. It can be accessed from any GraphQL client.
GraphQL-Serverless: GraphQL-Serverless is the Back4App instant GraphQL API fully integrated with MongoDB database and Cloud Functions.
GraphQL Yoga: GraphQL Yoga is Prisma’s server implementation built on Express and Appolo servers.
GraphQL Client-side Components
The client-side components reside on GraphQL clients. The GraphQL client is a code or a JavaScript library that makes POST requests to the GraphQL server. It may be a CMS like Drupal, a single page application, a mobile application, etc.
See the below client-side components:
GraphiQL: It is a browser-based interface used for editing and testing GraphQL queries and mutations.
ApolloClient: It is one of the best tools to build GraphQL client applications. It can be easily integrated with all JavaScript front-end. It saves network traffic by caching requests and normalizing data. It supports pagination, prefetching data, and connection between the data layer to the view layer.
GraphQL Clients
We can query our GraphQL API directly, but it is always a good practice to use a dedicated client library. It also makes things easier.
Relay library: It is a Facebook JavaScript library that is used to utilize GraphQL to build React applications.
GraphQL Gateways
Apollo Engine is the most popular GraphQL gateway. It provides features like query caching, query execution tracing, and field-level error tracking, and API performance trend analysis.