What is GraphQL

By yuseferi, 3 October, 2016
What is GraphQL

GraphQL is an application layer query language that interprets a string by a server, which then returns the required data in a specified format. You may have heard that GraphQL was invented to assist or enable Relay. This is false. GraphQL was actually in play nearly three years before Relay. It's a Facebook and Instagram collaboration, with contributions from hundreds of brilliant technical minds, that was developed during the transition from Facebook's HTML5-powered mobile apps to native apps. Today it is the principle graph data query language powering the majority of interactions within iOS and Facebook Android applications. Anyone that has used native iOS or Android apps during the past two years has used GraphQL-powered apps.

The creators of GraphQL plan to open-source an instruction program on how to implement the server. The goal is to expand GraphQL capabilities to adapt to a wide range of backends. This will allow coders to use the technology in projects of any size to access their own data more efficiently. Product developers will be able to structure servers and provide powerful frameworks, abstractions and tools.

How to Use GraphQL

GraphQL is a different way of structuring the contract between client and server. The servers publish a set of rules specific to an application. GraphQL then supplies the language to query your data for the correct answer, within the constraints of those rules. This way product developers are able to impose data requirements in a natural form, such as a declarative one and a hierarchical one.

To understand how to use GraphQL, first look at what it's trying to achieve:

  • Give client-side developers an efficient way to query data they want to retrieve.
  • Give server-side developers an efficient way to get their data out to their users.
  • Give everyone an easy and efficient way of accessing data (it uses less resources than the REST API, especially with mobile applications).

Take Facebook, For Example

Millions of users from around the world use Facebook every day. Plus, there are many different ways to access Facebook. Each of its major platforms has an app, and each of these apps have hundreds of versions. Adding a new feature could easily destroy this network of applications in the backend or the client apps. GraphQL is seamlessly integrated without breaking the existing apps.

GraphQL lets a client-side developer add new queries to retrieve data, even if that information is in a different version of the app. You simply write a query and you get the data you want. You never need to create a custom data endpoint from the server side or ask a server-side developer to create one for you. Additionally, you can retrieve most of the data for a given view with just one request to the server.

What You Can Do With GraphQL

GraphQL is a very liberating platform. With GraphQL, product developers no longer need to contend with ad hoc endpoints or worry about accessing data with multiple roundtrip object retrievals. Instead, you can easily create an elegant, declarative-hierarchical query dispatched to one single endpoint. You no longer have to jump back and forth from client to server development environments to test new codes or to create views of data already entered. Now all your experimentation and newly created views are built exclusively in the client development environment. The hassle of moving unstructured data from ad hoc endpoints into business objects is eliminated. Instead, you get a powerful, intuitive type system you can use as a tool-building platform.

As a product developer, you have the freedom to put more focus on client software and requirements without having to leave your development environment. As your system evolves, you will be able to support shipped clients with confidence while staying well within the limits of mobile apps. You can query exactly what you want, in your own words, across your entire data model application.

How GraphQL Is Different

The GraphQL query language is positioned between client applications and the actual data sources. Think of it as a type of agreement between the client and the server with an efficient query and fetching system. It works independently from data sources and other platforms. A GraphQL server can be created in PHP, Node or any other platform of your choice. People should be able to connect to your GraphQL server with web apps, mobile apps or any other type of apps they may be using. They can then query and mutate the data they are looking for.

The main difference is that GraphQL doesn't come with a transport layer. That end of the operation is handled by a high-level framework, such as Relay. However, GraphQL does have an excellent type system. The system is basically constructed on top of a layer of graphs with a set of rules defined by you. You may not feel the need to display your data groups as a graph, but if you really think about it, most of the time you can structure your data schema in the form of graphs.

A Look at GraphQL Code

To visualize what we're talking about, let's have a look at some code. For this example, we'll pretend you are creating a query for Product Hunt and want to retrieve data for a typical page:

        { product (id: "react-native-for-android") { name, link, votes, comments { text } } }
        
      

The result would look like this:

        { "
          data":
          { "
            product":
            { "
              name":
              
                "React Native for Android"
              , "
              link":
              
                "https://facebook.github.io/react-native/"
              , "
              votes":
              
                "167"
              , "
              comments":
              [ { "
                text":
                
                  "Huuuuge for cross-platform progress."
                }, { "
                text":
                
                  "Exciting stuff."
                } ]
              }
            }
          }
        
      

Now say you are working with an upgraded version of Product Hunt and want to display the name of the author next to the comment. You simply change the query like this:

        { product (id: "react-native-for-android") { name, link, votes, comments { text, author { avatar } } } }
        
      

Notice how easy it is to add features or make changes to the app without messing around with the server code or any other part of your app. But this is just the tip of the iceberg -- get more information on how to use GraphQL from Apollo Project.

Other Resources :

(+)