How to Use GraphQL- Advanced Tutorial: Server

How to Use GraphQL- Advanced Tutorial: Client – continue the tutorial on How to GraphQL.

Learn the main concepts of the GraphQL server, how to execute GraphQL queries with parser capabilities, and batch multiple requests.

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 often interpreted as API technology for the front end, because it enables clients to fetch data in a much better way than before. However, the API itself is of course implemented on the server side. There are also many benefits to the server side, as GraphQL allows server-side developers to focus on describing available data rather than implementing and optimizing specific endpoints.

GraphQL perform

GraphQL specifies not only a way to describe the schema and a query language to retrieve data from the schema, but also the actual execution algorithms used to translate those queries into results. The core of the algorithm is simple: walk through the query field by field, performing “resolvers” for each field. As follows, suppose we have the following schema:

type Query { author(id: ID!) : Author } type Author { posts: [Post] } type Post { title: String content: String }Copy the code

Here is the query we sent to the server with the schema:

query {
  author(id: "abc") {
    posts {
      title
      content
    }
  }
}
Copy the code

The first thing to look at is that each field in the query can be associated with a type:

query: Query {
  author(id: "abc"): Author {
    posts: [Post] {
      title: String
      content: String
    }
  }
}
Copy the code

Now we can easily find the parser to run on each field on the server side. Execution starts with the query type and is breadth-first. This means we run the query.author parser first. The results of that parser are then taken and passed to its child, the parser for author.posts. The result at the next level is a list, so in this case, the execution algorithm can only run on one item at a time. As follows:

Query.author(root, { id: 'abc' }, context) -> author
Author.posts(author, null, context) -> posts
for each post in posts
  Post.title(post, null, context) -> title
  Post.content(post, null, context) -> content
Copy the code

Finally, the algorithm executes to put everything into the correct format, and returns the result.

Note that most GraphQL server implementations provide a “default parser,” so you don’t have to specify the parser functionality for every field. For example, in graphqL.js, you don’t need to specify a parser when the parser’s parent object contains a field with the correct name.

Read the Apollo blog’s “GraphQL Explained” post to learn more about GraphQL execution.

The batch analytical

You may notice that the above execution strategy is naive. For example, if you have a parser fetched from a backend API or database, that backend may be called multiple times during the execution of a query. For example, an author who wants to get several articles would look like this:

query {
  posts {
    title
    author {
      name
      avatar
    }
  }
}
Copy the code

If these are blog posts, many of them may have the same author. Therefore, if we need to make API calls to request each author object, we might accidentally make multiple requests to the same object. Such as:

fetch('/authors/1');
fetch('/authors/2');
fetch('/authors/1');
fetch('/authors/2');
fetch('/authors/1');
fetch('/authors/2');
Copy the code

The solution to this problem is to make requests smarter. We can wrap the request function in a utility function that will wait for all parsers to run and then ensure that each item is requested only once:

authorLoader = new AuthorLoader(); Authorloader.load (1); authorLoader.load(2); authorLoader.load(1); authorLoader.load(2); // The loader then simplifies the fetch('/authors/1'); fetch('/authors/2');Copy the code

Can you do better? Yes, if the API supports batch requests, then only one request is made to the back end, as shown below:

fetch('/authors? Ids = 1, 2 ');Copy the code

This can also be wrapped in the loader above.

In JavaScript, you can implement this strategy using a utility function called DataLoader, and similar utilities exist for other languages.

---

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

---