Introduction to GraphQL (Reactathon)

Transcript

1. 1.

   An Introduction To GraphQL Reactathon, March 20, 2018

2. 2.

   Jon Wong Frontend Infrastructure, Coursera @jnwng 2

3. 3.

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

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

   What is GraphQL? Taken straight from GraphQL.org

5. 5.

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

   contributors: [User] } 5
6. 6.

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

   tagline } } 6
7. 7.

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

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

   Schemas Describing possible data

9. 9.

   Describe everything that is possible ▪ All possible data results

   are described by the server. 9
10. 10.

    Validation ▪ Every query is validated against the GraphQL schema

    ▪ No runtime errors for query documents 10
11. 11.

    The GraphQL Schema gives us the basis of everything that

    is possible when communicating to the server from the client. 11
12. 12.

    Queries Reading your data

13. 13.

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

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

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

    author } } { "project": { "tagline": "A query language for APIs", “author”: “jnwng” } }
15. 15.

    Fragments fragment MyFancyFragment on MyResource { someField } 15 These

    are required!
16. 16.

    Spreading a fragment in a query query { someResource {

    ...MyFancyFragment } } 16 These two types should match
17. 17.

    17 A typical React application

18. 18.

    18 … broken down into components ...

19. 19.

    19 A complex query

20. 20.

    20 A complex query

21. 21.

    21 A complex query query CoursePage { course(slug: “Machine Learning”)

    { title description ...University ...Instructor } }
22. 22.

    22 ▪ Components can be more portable ▪ Components are

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

    GraphQL queries allow the client to declare exactly what it

    needs, in the form that it needs it in. 23
24. 24.

    Clients Managing your data

25. 25.

    Clients make it easier to manage data Relay Apollo 25

26. 26.

    Caching ▪ Clients provide advanced caching for GraphQL queries. 26

27. 27.

    Caching query ListView { allBooks { id name } }

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

    Clients make adopting GraphQL in your application a breeze. 28

29. 29.

    Servers Serving your data

30. 30.

    Mapping types to resolvers 30 const schemaDefinition = ` type

    Query { books: [Book] } type Book { title: String author: String } `; const resolvers = { Query: { books: () => fetch('https://api.com/books') }, };
31. 31.

    Every field can be resolved separately. 31 const resolvers =

    { Query: { books: () => fetch('https://api.com/books') }, Book: { title: () => return ‘The book title’, author: () => fetch(‘https://api.com/authors’) } };
32. 32.

    A single endpoint for data from anywhere { books {

    title author } } 32
33. 33.

    GraphQL servers are flexible 33 ▪ They can act as

    proxies to existing data ▪ They can also act as the business logic layer itself
34. 34.

    Tools Supercharging your data

35. 35.

    GraphiQL 35

36. 36.

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

37. 37.

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

38. 38.

    GraphQL enables an entire ecosystem of tools to make developers

    more effective. 38
39. 39.

    ▪ GraphQL makes it really simple to query lots of

    data, no matter where it is. 39 In Summary
40. 40.

    ▪ Just like React, GraphQL can break down complexity into

    composable, reusable pieces 40 In Summary
41. 41.

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

    Get Started
42. 42.

    THANKS! 42 @jnwng Presentation template by SlidesCarnival