The GitHub GraphQL API is used in this article to talk about GraphQL from the perspective of front-end users. If you don’t have a GraphQL project, you can practice with the GitHub GraphQL API. For the specific code, please refer to my GitHub Blog.

Why GraphQL?

Taking my blog as an example, the data structure required for each article in the list page is as follows:

{
    "title": "What the front-end should know about GraphQL"."updatedAt": "2018-04-22T03:46:34Z"."bodyText": "This paper mainly combines...",}Copy the code

The data structure of the detail page of the article is:

{
    "title": "What the front-end should know about GraphQL"."updatedAt": "2018-04-22T03:46:34Z"."bodyHTML": "< P > This paper mainly combines...",}Copy the code

And want to record the page views of the article, become a big V in the future, and then show it

{
    "title": "What the front-end should know about GraphQL"."updatedAt": "2018-04-22T03:46:34Z"."bodyHTML": "< P > This paper mainly combines..."."view": "29898",}Copy the code

Here’s the problem: the data structures for title and updateAt are identical, the body is different, and there’s a view field that you want to design now to use later. If, for convenience, you write only one interface and return bodyText and bodyHTML at the same time, there will always be redundant data, which is not reasonable. However, if it is divided into two interfaces, it is a bit troublesome and wasteful.

This is just a simple example. During normal development, requirements change frequently and problems become more complex, and the current mainstream RESTful apis are exposing more and more problems.

If you can start from the source and the data returned by the interface is not determined by the producer (back end), but by the user (front end), you can achieve wySIWYG effect, and that’s where GraphQL comes in.

What is GraphQL?

First post website: English | Chinese.

GraphQL is both a query language for the API and a runtime for your data queries. GraphQL provides an easy-to-understand set of complete descriptions of the data in your API, enabling a client to get exactly what it needs without any redundancy, making it easier for the API to evolve over time, and for building powerful developer tools.

In other words, GraphQL is able to determine the data structure returned by the API when you call it, so as to get the data you need accurately and without redundancy. How does GraphQL do this? Let’s start with my blog post details page interface to reveal what GraphQL really looks like:

let data = {
  query: `query {
      repository(owner:"simbawus", name: "blog") {
        issue(number: ${articleId}) {
          title
          updatedAt
          bodyHTML
        }
      }
    }`
};

Actions.getIssues(data).then((res) = > {
  let issue = res.data.data.repository.issue;

  this.setState({
      title: issue.title,
      updatedAt: new Date(issue.updatedAt).format('yyyy-MM-dd'),
      bodyHTML: issue.bodyHTML
  })
})
Copy the code

The request parameter data is not a JSON object, but a string. This string describes the specific structure of the data that the client expects the server to return, as shown in JSON:

{
    "data": {
        "repository": {
            "issue": {
                "bodyHTML": "< P > This paper mainly combines..."."title": "What the front-end should know about GraphQL"."updatedAt": "2018-04-22T03:46:34Z",}}}}Copy the code

With this example in mind, LET me introduce some of the core concepts of GraphQL:

query & mutation

Query is a Chinese word for GET, and mutation is a word for POST, delete, patch, and PUT.

connection

Connection allows you to query associated objects in the same request. With Connection, you only need one GraphQL request to do what multiple requests in RESTful apis can do.

For example, in the GitHub GraphQL API document, we can query the Labels object as well as the issue object.

let data = {
  query: `query {
      repository(owner:"simbawus", name: "blog") {
        issue(number: ${articleId}) {
          title
          updatedAt
          bodyHTML
        }
        labels(first: 100){
          nodes{
            name
          }
        }
      }
    }`
};
Copy the code

field

A field is a unit of data that you can retrieve from an object. As the official GraphQL documentation states, “The GraphQL query language is essentially selecting fields from objects.” All GraphQL operations must be specified to the lowest level field and return scalar values to ensure that the structure of the response results is unambiguous.

argument

Argument: ${articleId} argument: ${articleId} argument: ${articleId}

The GitHub GraphQL API is used to create a personal blog. The GitHub GraphQL API is used to create a personal blog. . See my Github: Simbawus /blog for the code details. Welcome to Star and fork.

The future of GraphQL

We all know the advantages of GraphQL, but why has such a good technology not been widely used and promoted?

  1. To make GraphQL usable on the front end, you have to build a GraphQL spec interface on the server side, basically rewriting the entire way the server exposes data. Pain point is the front end, but to the back end to transform, who will do?
  2. Changing to GraphQL does not improve the user experience, and has high requirements on the back-end level. It is not easy to change, and it takes a lot of time. The boss doesn’t need to pay you, does it?
  3. GraphQL means a centralized API gateway, and centralized traffic requires a huge centralized cluster, which is a technical challenge for operation and maintenance.

Based on the above, GraphQL is currently basically used by some startups and first-tier factories with relatively strong technical pursuit and strength. I hope Facebook can go further and provide a cloud-based solution to liberate the front end.

Welcome to discuss, give a “like” before you go

The article synchronizes in the following community, can choose one to follow me oh. ◕ ‿ ◕.

Simbawu | making | segmentfault | zhihu | | Jane books the Denver nuggets