How to Use GraphQL- Basic Tutorial: Core Concepts – continue the series of tutorials on How to GraphQL.

Learn about GraphQL’s different architectures, uses, and major components of the back end and front end, such as parser functions and client libraries.

Basic and advanced series translations have been completed:

  1. introduce
  2. GraphQL has advantages over REST
  3. The core concept
  4. architecture
  5. The client
  6. The service side
  7. More concepts
  8. Tools and Ecology
  9. security
  10. Q&A

GraphQL is published only as a specification. This means that GraphQL is really nothing more than a detailed document that describes in detail the behavior of the GraphQL server.

Use cases

In this section, we introduce three different GraphQL server architectures:

  1. GraphQL serverThere is a connected database
  2. The GraphQL server is manyThird party or existing systemIn front ofA layer ofYou can integrate them through a single GraphQL API
  3. You can use the same GraphQL APIA hybrid approach to accessing connected databases and third parties or existing systems

All three architectures represent the main uses of GraphQL and demonstrate the flexibility of the usage environment.

1. GraphQL server with connected database

This architecture is the most common for undeveloped (Greenfield) projects. There is a single (Web) server in the setup that implements the GraphQL specification. When the query arrives at the GraphQL server, the server reads the payload of the query and retrieves the required information from the database. This is called a resolving query. The response object is then constructed and returned to the client as described in the official specification.

It’s important to note that GraphQL is actually transport-layer agnostic. This means it can be used with any available network protocol. Therefore, GraphQL server based on TCP, WebSockets and so on can be realized.

GraphQL also doesn’t care about databases or the format used to store data. You can use SQL databases like AWS Aurora or NoSQL databases like MongoDB.

There is a standard Greenfield architecture on the GraphQL server that is connected to the database.

2. Integrate GraphQL layer of existing system

Another major use of GraphQL is to integrate multiple existing systems behind a consistent GraphQL API. This is especially compelling for companies with an existing infrastructure and many different apis that have evolved over the years and now have a high maintenance burden. A major problem with these existing systems is the inability to build new products that require access to multiple systems.

In this case, you can use GraphQL to unify these existing systems and hide their complexity behind a nice GraphQL API. In this way, new client applications can be developed that simply talk to the GraphQL server to get the data they need. The GraphQL server is then responsible for fetching the data from the existing system and packaging it into the GraphQL response format.

Just as the GraphQL server did not care about the type of database it used in the previous schema, this time it does not care about the data source it needs to query the required data.

GraphQL allows you to hide the complexity of existing systems, such as microservices, with legacy infrastructure or third-party apis, behind a single GraphQL interface.

3. A mix of access to connected databases and third parties or existing systems

Finally, you can combine these two approaches to build a GraphQL server that has a connected database but can still communicate with existing or third-party systems.

When the server receives the query, it parses the query and retrieves the required data from the connected database or some integrated API.

The two methods can also be combined, and the GraphQL server can fetch data from both the database and the existing system – very flexible and transfers all the complexity of data management to the server.

Resolver Functions Resolver Functions

But how do we achieve this flexibility with GraphQL? How to accommodate these radically different uses?

As you learned in the previous chapter, the payload of a GraphQL query (or change) consists of a set of fields. In the GraphQL server-side implementation, each field actually corresponds to a function called a resolver. The only purpose of the parser function is to get the data for the corresponding field.

When a server receives a query, it invokes all functions for the fields specified in the query’s payload. The query can therefore be parsed and the correct data can be retrieved for each field. Once all the parsers return, the server packages the data in the format described by the query and sends it back to the client.

The screenshot above contains some resolved field names. There is one for each field in the queryParser function. When a query comes in to fetch the specified data, GraphQL calls all the required parsers.

GraphQL client library

GraphQL is particularly suitable for front-end developers because it completely solves many of the inconveniences and drawbacks of REST apis, such as over-fetching and under-fetching. The complexity points are moved to the server side, where powerful machines can handle the heavy computing. Clients don’t have to know where the data they’re getting is actually coming from, and they can use a consistent and flexible API.

Consider the major change GraphQL has brought, from an imperative method of getting data to a purely declarative method of getting data. When extracting data from REST apis, most applications must perform the following steps:

  1. Construct and send HTTP requests (for example, using Javascriptfetch)
  2. Receive and parse the server response
  3. Store data locally (only in memory or persistent storage)
  4. Present the data in the UI

Using the ideal declarative data fetching method, the client needs to perform only two steps:

  1. Description Data Requirements
  2. Present the data in the UI

All the underlying network tasks and data stores are abstracted and the main part becomes the declaration of data dependencies.

This is exactly what the GraphQL client libraries, such as Relay or Apollo, can do. They provide an abstraction that allows developers to focus on the important parts of the application without having to rehash the infrastructure.

Front-end notepad, not regularly updated, welcome to pay attention to!

  • Wechat official account: Lin Jingyi’s notepad
  • Blog: Lin Jingyi’s notebook
  • Nuggets column: Lin Jingyi’s notebook
  • Zhihu column: Lin Jingyi’s notebook
  • Github: MageeLin