A workshop from the marketing engineering team @auth0

What is it?

  • 🔍 A query language for your API
  • ⚙️ A framework?
  • 📚 A library?
  • ✨ A new standard

Why GraphQL?

  • 📉 Reduced HTTP traffic
  • 🤘 One endpoint to rule them all
  • 🌎 Back-end agnostic
  • ✨ Because we can

How does it work?
🤔

Describe what’s possible with a type system

To start developing with GraphQL and ensure predictable results you need an schema, we're going to dive into that later, but this being mandatory is documentation and validation all in one for your GraphQL server.

var schema = buildSchema(`
  type Query {
    hello: String
  }
`);

Ask for what you need, get exactly that

This is the part where you build your query, and we'll see it's super simple. If you only need the id and title of a post ask for that, no need to ask for the the entire 65k length body of a list of 10 posts every single time. All of that with the same endpoint, just giving some super easy instructions to your server.

{
  query {
    hello
  }
}

Get many resources in a

single request

We were talking about this, but no more. Resolvers will take care of this, if you need a list of 3 posts, 1 specific post and it's author, don't do 3 requests, ask for what you need, graphql handles everything else.

const rootResolver = {
  hello: () => {
    return 'Hello world!';
  },
};

Let's code 🚀

git clone git@github.com:auth0/mxp-graphql-workshop.git
git checkout start
npm install

Creating Schema and Resolver for a single post

You can skip it with the branch: single-post

This will define what can we query and the types that will define our responses. First we're going to create a small one and later we'll move into the final one:

const { buildSchema } = require("graphql");

// You can read more about types and schemas here: https://graphql.org/learn/schema/
const schema = buildSchema(`
  type Query {
    post(id: ID!): Post
  }

  type Post {
    id: ID!
    title: String!
    body: String!
    tags: [String]!
  }
`);

// Read more about resolvers: https://graphql.org/learn/execution/
const rootResolver = {
  post: ({ id }) => {
    return posts.find(post => post.id == id);
  }
};
// After defining our express and before declaring the handling of all routes

server.use(
  "/graphql",
  graphqlHTTP({
    schema: schema,
    rootValue: rootResolver,
    graphiql: true
  })
);

Trying GraphiQL: Asking for a post with GraphiQL

First run: `npm run dev` and then go to: http://localhost:3000/graphiql to see GraphiQL in action

query {
  post(id: 3) {
    title
  }
}

Adding posts resolver and schema, creating types from custom types

You can skip it with the branch: multiple-posts

Now it's time to add a little bit of complexity and have multiple queries and types in our app.

const schema = buildSchema(`
  type Query {
    post(id: ID!): Post
    posts(count: Int): FeedPost
  }

  type Post {
    id: ID!
    title: String!
    body: String!
    tags: [String]!
  }

  type FeedPost {
    total: Int!
    items: [Post]
  }
`);

const rootResolver = {
  post: ({ id }) => {
    return posts.find(post => post.id == id);
  },
  posts: ({ count = 10 }) => {
    const items = posts.slice(0, count);
    return {
      items: items,
      count: items.length
    };
  }
};

Trying GraphiQL once again, posts, and multiple queries

query {
  post(id: 3) {
    title
  }
  posts(count: 5) {
    items {
      title
      body
    }
  }
}

Try adding properties, asking for only one query or two, it's up to you!

Adding a page and fetching data with axios

You can skip it with the branch: axios

Real case scenario! We're going to use axios to fetch data and show it in our index.

import React from "react";
import axios from "axios";

const Index = ({ posts }) =>
  posts.items.map(post => (
    <div key={post.title}>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  ));

Index.getInitialProps = async () => {
  const response = await axios.post("http://localhost:3000/graphql", {
    query: `query {
      posts(count: 10) {
        items {
          id
          title
          body
          tags
        }
      }
    }`
  });
  return { posts: response.data.data.posts };
};

export default Index;

GRAPHQL ALL THE THINGS!

Questions? 🤔

Thank you all!
🙇‍♂️

GraphQL

By Gabriel Miranda

Made with Slides.com

GraphQL

  • 314

More from Gabriel Miranda