An Introduction to GraphQL (ReactJS SF Bay Area)

Transcript

1. 1.

   An Introduction To GraphQL ReactJS SF Bay Area, 4/12/2018

2. 2.

   Jon Wong Frontend Infrastructure, Coursera @jnwng 2

3. 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
4. 4.

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

   in GraphQL Language ▪ Schemas ▪ Queries ▪ Operations 4
5. 5.

   What is GraphQL? Taken straight from GraphQL.org

6. 6.

   Describe your Data 6 type Project { name: String tagline:

   String contributors: [User] }
7. 7.

   Ask for What You Want 7 query { project(name: "GraphQL")

   { tagline } }
8. 8.

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

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

   Schemas Describing possible data

10. 10.

    Describe everything that is possible ▪ All possible data results

    are described by the server. 10
11. 11.

    Describe everything that is possible 11 type Project { name:

    String tagline: String contributors: [User] }
12. 12.

    Discoverability ▪ Exploring an API is no longer a burden

    12
13. 13.

    GraphiQL 13

14. 14.

    Validation ▪ Every query is validated against the GraphQL schema

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

    The GraphQL schema gives us the basis of everything that

    is possible when communicating to the server from the client. 15
16. 16.

    Queries Reading your data

17. 17.

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

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

    18 A simple query with a name query AQueryWithAName {

    project(name: "GraphQL") { tagline } }
19. 19.

    19 A simple query with arguments query ($projectName: String!){ project(name:

    $projectName) { tagline } }
20. 20.

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

    { tagline } } { “projectName”: “react” } query variables
21. 21.

    query { react: project(name: “react”){ tagline } graphql: project(name: “graphql”)

    { tagline } } 21 A simple query with aliases
22. 22.

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

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

    Fragments 23 fragment Contributors on Project { name contributors }

24. 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!
25. 25.

    GraphQL queries allow the client to declare exactly what it

    needs, in the form that it needs it in. 25
26. 26.

    React && Queries Declarative + Composable

27. 27.

    27 A typical React application

28. 28.

    28 … broken down into components.

29. 29.

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

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

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

    { title description partner { name logo } instructor { name title photoUrl } } }
31. 31.

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

    { title description ...Partner ...Instructor } }
32. 32.

    32 A complex GraphQL query fragment Partner on Course {

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

    33 ▪ Components can be more portable ▪ Components are

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

    Clients Managing your data

35. 35.

    Clients make it easier to manage data Relay Apollo 35

36. 36.

    Caching ▪ Clients provide advanced caching for GraphQL queries. 36

37. 37.

    Caching 37 query ListView { allBooks { id name }

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

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

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

    Clients make adopting GraphQL in your application a breeze. 39

40. 40.

    Servers Serving your data

41. 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’) }, };
42. 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’) } };
43. 43.

    GraphQL servers are flexible 43 ▪ They can act as

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

    Tools Supercharging your data

45. 45.

    GraphiQL 45

46. 46.

    `eslint-plugin-graphql` 46 Catch invalid API calls at compile-time

47. 47.

    `apollo-codegen` 47 Catch runtime errors at compile-time

48. 48.

    GraphQL enables an entire ecosystem of tools to make developers

    more effective. 48
49. 49.

    ▪ GraphQL makes it really simple to query lots of

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

    ▪ Just like React, GraphQL can break down complexity into

    composable, reusable pieces 50 In Summary
51. 51.

    ▪ GraphQL.org ▪ GraphQL.com ▪ https://launchpad.graphql.com/ new 51 How to

    Get Started
52. 52.

    THANKS! 52 @jnwng Presentation template by SlidesCarnival