Apollo Link. We configure the GraphQL client "for ourselves"

Original author: Evans Hauser
  • Transfer
  • Tutorial

Network layer in Apollo Client and its separate use


You may have come across a library that meets your needs, but does not solve a couple of specific tasks. And although these tasks are not related to the main functions, they are an important part of the application. Something similar happens in modern GraphQL clients at the network level. In response to such challenges, we created the Apollo Link library. It provides a framework for managing the progress of GraphQL queries and for processing results.


To speed up development, standard Apollo Link modules implement the basic functions of GraphQL network stacks from ordinary HTTP requests to subscribing for changes via web sockets and controlling the flow of requests, including repeated and batch sending, filtering of duplicate requests, synchronous periodic polling of resources.


Translator's Note - In the original article, network modules are called Link. This reflects the essence of Apollo Link as a linker linking modules. However, the literal translation of Link distorts the meaning, therefore, later in the article modules are called connectors.


To create a GraphQL client with specified properties, Apollo Link connectors are connected to user connectors in the desired sequence. A connector added to the chain affects the progress of the request, for example, provides resending. The resulting connector can return ExecutionResult(data + errors). This can be, for example, spoofing data for testing, the local state of the application, or, most often, the result of a query to the GraphQL server.


image
Fig. HTTP connector.


To support different application requirements, each GraphQL response is represented by an object Observable. Observer can subscribe to events next, error, completeand run event handlers using the corresponding methods. The method nextcan be called any number of times before kelbek erroror complete. Such a kelbek structure is perfect for working with current and planned GraphQL results, including queries, mutations, subscriptions, and even live queries.



In this article, we will create a GraphQL client with Apollo Link step by step. Results will be shown in Graph i QL.


The main task of all GraphQL clients is to get GraphQL results. So let's start by creating a connector that makes HTTP requests. It will be a useful example for other transport layer connectors, such as using Firebase, XHR, REST, and other GraphQL endpoints. All connectors inherit from the base class, which contains methods for connecting connectors and is needed to implement the method request.


Check out the sandbox implementation on CodeSandbox



The next task after creating the transport connector is to combine the connectors into a request processing flow. To do this, create another connector that intercepts errors and presents them as resulting GraphQL data, and another connector for logging operations and results. The logging connector will be used first, then it will catch errors, and finally the HTTP connector will execute the request.


image
Fig. The sequence of application of the connectors.


For the chain to work, the logging and intercepting connectors must have access to the connector following them. The method requesthas an argument for this forward. This is a function that, when called, passes the operation object to the next connector and returns its observer. At the end of the example, the connectors are chained using the static method fromfrom Apollo Link.


Check out an example of this thread in the sandbox on CodeSandbox


Modifying Individual GraphQL Queries


Wow! Now, the created GraphQL client controls the flow of requests and responses. But what if queries and mutations require different behaviors? In the following example, other endpoints are used for mutations, errors are also caught only when requesting data, and all network activity is logged.


In addition to this, you can selectively change the operation without changing the transport, for example, add query variables if the operation has a specific name. Using the splitApollo Link method , you can perform certain parts of the chain depending on the parameters of the operation.


Check out the example in the sandbox on CodeSandbox


Create Your GraphQL Client


Excellent! Now you can create a fully customizable GraphQL client, whose execution logic and data retrieval depend on a specific query. Apollo Link offers many ready-made connectors that you can combine and extend with your own connectors to achieve the desired behavior. Ready-made connectors can be found in the Apollo Link repository .


The Apollo Link ecosystem is constantly evolving thanks to a community of developers. If you want to participate in the development or discuss the GraphQL client configuration mechanism, please create the appropriate request - issue or pull request. If you have any suggestions for cooperation, connect to Apollo Slack and send me (evans) a private message!


Soon, wait for articles on the interaction between the connectors using the field contextin the GraphQL operation, on connectors with and without state, on the distribution of the connector configuration, on safe type addition, and more!


Thanks to Sashko Stubailo, James Baxley III and Jonas Helfer for the comprehensive explanations of the Apollo Link development process and for the ongoing support of the author.


Apollo Link: Creating your custom GraphQL client article translation .
Original by Evans Hauser


Also popular now: