GraphQL

Gonna Talk About..​

• What is GraphQL ?
• GraphQL VS REST
• How are we gonna use it in our projects
• Dev tools (GraphiQL)

What is GraphQL?

• A Query language 
• A common interface between the Client and the Server for data fetching and manipulations
• It's designed to build client applications
•  An Alternative for REST (Query VS resource URL) 

(HTTP)

Some Background

• Developed By Facebook in 2012
• Publicly released in 2015
• Powers hundreds of billions of API calls a day
• Facebook wanted to think about their data in terms of a graph of object and not as resource URL's

{
  user(id: 1) {
    name
    age
    friends {
      name,
      age
    }
  }
}

{
  "user": {
    "name": John,
    "age": 25,
    "friends": [
    {
      "name": "Jina",
      "age": 23
    }
  ] 
 }
}

Response

Query

 GraphQL Principles

• Hierarchical - the query is shaped just like the data it returns
• Product Centric - we build the query exactly like our views
• Strongly Typed - given a query, a tool can ensure that the query is valid (GraphiQL)
• Client Specified Queries - the queries are stored in the client rather than the server

GraphQL VS REST

{
  user(id: 1) {
    name
    age
    friends {
      name
    }
  }
}

GET /users/1 
GET /users/1/friends  
.
.
.

GraphQL

REST

So why not REST?

• Require multiple round trips between the client and the server for each request
• With every change of the system requirements, we need to change the server as well 

So Why Yes GraphQL?

• Only one call to the server
• The query is shaped in a more natural way, exactly like the data it returns
• Client side developers can change their requirments without any change on the backend
• Client knows all the data permutations rather than the server

GraphQL

+

WIXSTORES

Introducing the GraphqlQueryBuilder

• bower component  (Wix GitHub)
• A service that builds our queries 
• Generate the query as a string

GraphqlQueryBuilder

"{
  user(id: 1) {
    name
    age
  }
}"

A Factory in the SF-SM

class Product {
    constructor(private GraphQlQueryBuilder: gql.GraphQlQueryFactory) {
    }
}

1. Injecting the factory

let productQuery = new this.GraphQlQueryBuilder('product', {productId: 1});
productQuery.select('pageUrl');
console.log(productQuery.toString());

// 'product (productId:1) { pageUrl}'
                

function name

arguments

fields

2. building the query

class ProductApi {
    ...

    this.HttpFacade.doHTTPQl(url, productQuery, operationName);
}

3. send Http request with the query

GraphQL Dev Tools

GraphiQL

• Playground for GraphQL queries

GraphiQl is an interactive in-browser GraphQL IDE

• We can use in our projects any API that works in the playground

• NOTE: queries that will work in the playground, might not work in the store front. For example, a call for inventory. 

DEMO

1. playground
2. Concat multiple queries

Summary (yay!)

• what is GraphQL?
• How it differs from REST
• How we use it in our projects
• GraphiQL as a development tool