ZERO TO GRAPHQL

👋

Hey, I am Siddhant

@siddhant6969

Why GraphQL?

A SIMPLE UI COMPONENT

/carts/1

/products/1

/products/2

/products/3

/carts/1

/products/1

/products/2

/products/3

/product_image/3

/product_image/2

/product_image/1

TOO MANY ROUND TRIPS!

CUSTOM ENDPOINTS

/cart_will_all_the_stuff

/cart_will_all_the_stuff without taxes

/cart_will_all_the_stuff_version2

/cart_will_all_the_stuff without taxes_with_images_and_price

GraphQL

What GraphQL is not

Database

Library

Language Specific

What GraphQL is

A Query Language For API

Allows to fetch deeply nested associations

Spec for server to execute graphql queries

query {
  users{
    id
    name
  }
}

{
  "data": {
    "users": [
      {
        "id": "1",
        "name": "Siddhant"
      }
    ]
  }
}

query {
  users{
    id
    name
    posts{
      id
      comments{
        id
        text
      }
    }
  }
}

{
  "data": {
    "users": [
      {
        "id": "410e057b-7581-4501-a009-f676ddc41c85",
        "name": "Sarah",
        "posts": [
          {
            "id": "c6c0bc44-486b-4931-9b49-2787eb4f97e1",
            "comments": [
              {
                "id": "7969fdd2-2a20-4e20-8c25-ab3900bceee1",
                "text": "Could not agree more!"
              }
            ]
          }
       ]
    ]
  }
}

DEMO?

https://graphql-demo.mead.io

ADVANTAGES !

AUTO DOCUMENTATION

CODE GENERATION

STATIC VALIDATION

IDE INTEGRATION

How Do I Get Started With it?

Resources

https://facebook.github.io/graphql/June2018/

https://www.howtographql.com/

https://letslearngraphql.com/

https://www.prisma.io/

/GET

Query

/POST,/PUT,/DELETE

Mutations

TOOLS

GraphQL-YOGA

PRISMA

GraphQL-YOGA

import { GraphQLServer } from 'graphql-yoga'

const server = new GraphQLServer({ typeDefs, resolvers })
server.start(() => console.log('Server is running on localhost:4000'))

Alternatives for GraphQL-Yoga

Express-GraphQL

Graphcool

Koa-GraphQL

Hapi-GraphQL

https://github.com/siddhant1/DevC-GraphQL-Starter.git

Lets do some live coding!

PRISMA EXPOSES GRAPHQL API TO INTERACT WITH OUT DATABASE

INCLUDE TRANSACTIONS

SUPPORTS PAGINATION

https://www.prisma.io/client/client-javascript/

PRISMA

Edit datamodel.prisma

prisma init

npm i -g prisma

Deploy

Use

PRISMA SUPPORTS

BACKEND COMPLETE!

Things you should read about later

Fragements

Subscriptions

Authentication and Authorization

Frontend!

TOOLS

STEPS

WRITE A QUERY

EXECUTE QUERY

UPDATE UI

const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`;

const Dogs = ({ onDogSelected }) => (
  <Query query={GET_DOGS}>
    {({ loading, error, data }) => {
      if (loading) return "Loading...";
      if (error) return `Error! ${error.message}`;

      return (
        <select name="dog" onChange={onDogSelected}>
          {data.dogs.map(dog => (
            <option key={dog.id} value={dog.breed}>
              {dog.breed}
            </option>
          ))}
        </select>
      );
    }}
  </Query>
);

@Component({ ... })
class ProfileComponent implements OnInit, OnDestroy {
  loading: boolean;
  currentUser: any;

  private querySubscription: Subscription;

  constructor(private apollo: Apollo) {}

  ngOnInit() {
    this.querySubscription = this.apollo.watchQuery<any>({
      query: CurrentUserForProfile
    })
      .valueChanges
      .subscribe(({ data, loading }) => {
        this.loading = loading;
        this.currentUser = data.currentUser;
      });
  }

  ngOnDestroy() {
    this.querySubscription.unsubscribe();
  }
}

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "https://w5xlvm3vzz.lp.gql.zone/graphql"
});

npm install apollo-boost react-apollo graphql

import React from "react";
import { render } from "react-dom";

import { ApolloProvider } from "react-apollo";

const App = () => (
  <ApolloProvider client={client}>
    <div>
      <h2>My first Apollo app 🚀</h2>
    </div>
  </ApolloProvider>
);

render(<App />, document.getElementById("root"));

RENDER PROPS?

<Query query={DEMO_QUERY}>
    {({ loading, error, data }) => {
      return (
        <div>Render Prop</div>
      )
    }}
  </Query>

<Mutation mutation={ADD_TODO}>
      {(addTodo, { data }) => (
        <div>
          <form
            onSubmit={e => {
              e.preventDefault();
              addTodo({ variables: { type: input.value } });
              input.value = "";
            }}
          >
            <input
              ref={node => {
                input = node;
              }}
            />
            <button type="submit">Add Todo</button>
          </form>
        </div>
      )}
    </Mutation>

THAT'S ALL ABOUT GRAPHQL?

NOPE

RESOURCES

https://www.apollographql.com/

https://howtographql.com

http://letslearngraphql.com

https://www.udemy.com/graphql-bootcamp/

THANK YOU!

deck

By sidhant manchanda