An Introduction to GraphQL (ReactJS SF Bay Area)

8685df8e9094c97cfbd47c48b6c741c6?s=47 jnwng
April 12, 2018

An Introduction to GraphQL (ReactJS SF Bay Area)

A beginner-level introduction to GraphQL

8685df8e9094c97cfbd47c48b6c741c6?s=128

jnwng

April 12, 2018
Tweet

Transcript

  1. 3.

    Who is this talk for? ▪ Folks who deal with

    complex React applications ▪ Folks who use APIs (like REST) on a day-to-day basis ▪ Folks who want to know more about GraphQL! 3
  2. 4.

    Runtime ▪ Clients ▪ Servers ▪ Tools What We’re Covering

    in GraphQL Language ▪ Schemas ▪ Queries ▪ Operations 4
  3. 8.

    Get Predictable Results 8 query { project(name: "GraphQL") { tagline

    } } { "project": { "tagline": "A query language for APIs" } } GraphQL JSON
  4. 11.

    Describe everything that is possible 11 type Project { name:

    String tagline: String contributors: [User] }
  5. 14.

    Validation ▪ Every query is validated against the GraphQL schema

    ▪ No runtime errors for making API calls 14
  6. 15.

    The GraphQL schema gives us the basis of everything that

    is possible when communicating to the server from the client. 15
  7. 17.

    17 A simple query query { project(name: "GraphQL") { tagline

    } } { "project": { "tagline": "A query language for APIs" } }
  8. 18.

    18 A simple query with a name query AQueryWithAName {

    project(name: "GraphQL") { tagline } }
  9. 20.

    20 … which requires variables query ($projectName: String!){ project(name: $projectName)

    { tagline } } { “projectName”: “react” } query variables
  10. 22.

    22 … which returns what you expect { “react”: {

    “tagline”: “A JavaScript library for building user interfaces” }, “graphql”: { “tagline”: “A query language for APIs” } }
  11. 24.

    Spreading a fragment in a query 24 query { project(name:

    "GraphQL") { tagline ...Contributors } } query { project(name: "GraphQL") { tagline name contributors } } These turn out the same!
  12. 25.

    GraphQL queries allow the client to declare exactly what it

    needs, in the form that it needs it in. 25
  13. 29.

    29 This is how we normally get the data fetch(‘/courses/machine-learning’)

    fetch(‘/partners/?course=machine-learning’) fetch(‘/instructors/?course=machine-learning’)
  14. 30.

    30 A complex GraphQL query query CoursePage { course(slug: “machine-learning”)

    { title description partner { name logo } instructor { name title photoUrl } } }
  15. 31.
  16. 32.

    32 A complex GraphQL query fragment Partner on Course {

    partner { name logo } } fragment Instructor on Course { instructor { name title photoUrl } }
  17. 33.

    33 ▪ Components can be more portable ▪ Components are

    more self-sufficient. Every component can declare its own data requirements
  18. 37.

    Caching 37 query ListView { allBooks { id name }

    } query DetailView ($id: ID) { bookById(id: $id) { name } }
  19. 38.

    The GraphQL HoC 38 const ProjectTitle = ({ data: {

    project: { tagline } } }) => <h1>{tagline}</h1>; export default graphql(gql` query { project(name: “graphql”) { tagline } } `)(ProjectTitle);
  20. 41.

    Mapping types to resolvers 41 const typeDefs = ` type

    Query { projects: [Project] } type Project { name: String tagline: String contributors: [User] } `; const resolvers = { Query: { projects: () => fetch('https://api.com/project’) }, };
  21. 42.

    Every field can be resolved separately. 42 const resolvers =

    { Project: { name: () => return ‘graphql’, tagline: () => 'A query language for APIs’, contributors: () => fetch(‘/users/?projectName=graphql’) } };
  22. 43.

    GraphQL servers are flexible 43 ▪ They can act as

    proxies to existing data ▪ They can also become the business logic layer itself
  23. 49.

    ▪ GraphQL makes it really simple to query lots of

    data, no matter where it is. 49 In Summary
  24. 50.

    ▪ Just like React, GraphQL can break down complexity into

    composable, reusable pieces 50 In Summary