DEV Community

Cover image for GQL
daniel knowles
daniel knowles

Posted on • Updated on


What is GraphQL?

"GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQl provides a complete understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time and enables powerful developer tools"

GraphQL vs SQL

GraphQL often gets mistaken as SQL. GraphQL is not SQL and is in fact data-agnostic. It is not a replacement for SQL, but rather it works with SQL. GraphQL is mainly for your client to query the information they want to access inside your server. The server then will use resolvers to convert the query into SQL. That will then query your database.
So what is a Query Language? Query languages are used to request and retrieve data from databases. They do this by sending queries.

GraphQL vs REST

Rest works with endpoints or urls. You have specific url endpoint that you are hitting and that url determines what data you get back. You can pass in options to that url to try to change the shape of the data, but for the most part the API will decide more or less what you get back. So you fetch that url and that url returns data, typically in the form of JSON. Or an object full of data.
GQL allows you to ask for specific kinds of data. You can define the way your data looks.

Describe your data

type Cat {
    id: ID
    name: String
    age: Int
    tagline: String
Enter fullscreen mode Exit fullscreen mode

Ask for exactly what you want

cat(name: "charlie") {
Enter fullscreen mode Exit fullscreen mode

Get exactly what you asked for

  "cat": {
    "tagline": "A super loveable cat"
Enter fullscreen mode Exit fullscreen mode

Instead of getting back a bunch of information that you did not ask for you get exactly what you wanted. This means that there is no need to filter out all of the data that you did not care about.
GraphQl allows for excellent relational queries. Instead of requesting info from the API and then using that info to access more deeply nested info, you can just ask for the data you wanted right off the bat. This means you only have to make one trip to the API!

"GraphQL queries access not just the properties of one resource but also smoothly follow references between them. While typical REST APIs require loading from multiple URLs, GraphQL APIs get all the data your app needs in a single request".

GraphQL supports multiple languages

GraphQL is a communication pattern, there are many tools that you can work with. It also supports all sorts of languages. So you can use the one that is more comfortable for you to work in. Here is a list of just a few languages supported by GraphQL

Java / kotlin
c# / .NET
.. and the list goes on.

Where GQL comes from and implementations

GQL was created by fb. This does not mean that you have to use facebooks code. In fact one of the great things about GQL is that you can use your own code. This is because GQL is just a specification and not an implementation. You don't have to install GQL. Because it is just a spec you will need to use an implementation. Another great thing is that there are a lot of these available. GQL is two parts there is a server component and the client component. Lets look at some of the server component options for Javascript...

Relay: Facebooks framework for building react applications that talk to a grapQL backend.

Apollo Client (easier to get started):
A powerful javascript graph ql client, designed to work well with react, react native, angular 2, or just plain javascript.

Graphql-request: A simple and flexible javascript graphql client that works in all javascript environments.

Lokka: A simple javascript graphql client that works in a all javascript environments.

Nanogpi: Tiny graphql client library using template strings.

What the server does

the graphql server takes in your api, you write your api as a series of type definitions (designing the shape of your data).
const typeDef = [`
type Query {
  goodbye: String

schema {
  query: Query
Enter fullscreen mode Exit fullscreen mode

Then you have your resolvers. Basically your query.

const resolvers = {
  Query: {
    goodbye(root) {
       return 'world';
Enter fullscreen mode Exit fullscreen mode

The server then takes all of your info in and shows your Api via an endpoint.

If you would like to get some practice with GPL i recommend trying Apollo to get you started.

resources for this blog:

Top comments (0)