React & GraphQL – From zero to production

Transcript

1. @glnnrys · glennreyes.com React & GraphQL From zero to production

2. @glnnrys · glennreyes.com > whoami

3. @glnnrys · glennreyes.com Glenn Reyes Independent Software Engineer

4. @glnnrys · glennreyes.com Goals for today

5. @glnnrys · glennreyes.com Learn

6. @glnnrys · glennreyes.com Fun

7. @glnnrys · glennreyes.com Ship

8. @glnnrys · glennreyes.com What is GraphQL?

9. @glnnrys · glennreyes.com Query Language for APIs

10. @glnnrys · glennreyes.com Ask for
 what you want And get


    predictable results

11. @glnnrys · glennreyes.com

12. @glnnrys · glennreyes.com www.graphql.org

13. @glnnrys · glennreyes.com Describe your data

14. Describe your data

15. None

16. User

17. Tweet Tweet

18. User Tweet

19. Describe your data User Tweet

20. Describe your data User Tweet name email username bio age

    tweets message from

21. @glnnrys · glennreyes.com Describe your Schema in a Type System

22. @glnnrys · glennreyes.com type Tweet { id: ID! message: String!

    from: User } type User { name: String! email: String! bio: String age: Int tweets: [Tweet!]! username: String! }

23. @glnnrys · glennreyes.com Int Float String Boolean ID

24. @glnnrys · glennreyes.com type Query { getUser(email: String!): User! getTweets(username:

    String!): [Tweet!]! } type Mutation { createTweet: Tweet deleteTweet(id: ID!): Tweet updateTweet(id: ID!): Tweet }

25. @glnnrys · glennreyes.com # GET something type Query { getUser(email:

    String!): User! getTweets(username: String!): [Tweet!]! } # DO something type Mutation { createTweet: Tweet deleteTweet(id: ID!): Tweet updateTweet(id: ID!): Tweet }

26. @glnnrys · glennreyes.com # GET something type Query { #

    Get a user by the email adress getUser(email: String!): User! # Get tweets getTweets(username: String!): [Tweet!]! } # DO something type Mutation { createTweet: Tweet deleteTweet(id: ID!): Tweet updateTweet(id: ID!): Tweet }

27. @glnnrys · glennreyes.com type Tweet { id: ID! message: String!

    from: User } type User { name: String! email: String! bio: String age: Int tweets: [Tweet!]! username: String! } type Query { getUser(email: String!): User! getTweets(username: String!): [Tweet!]! } type Mutation { createTweet: Tweet deleteTweet(id: ID!): Tweet updateTweet(id: ID!): Tweet }

28. @glnnrys · glennreyes.com www.graphql.org

29. @glnnrys · glennreyes.com Ask for what you want

30. @glnnrys · glennreyes.com Ask for what you want And get

    predictable results

31. @glnnrys · glennreyes.com Ask for
 what you want And get


    predictable results

32. { name twitter job expertise oss(type: "most-popular") elseIDo } {

    "name": "Glenn Reyes", "twitter": "@glnnrys", "job": "Independent Software Engineer", "expertise": ["React", "GraphQL"], "oss": ["graphpack", "react-countup"], "elseIDo": [ "Co-organize React Vienna", "Speak at conferences", "Give workshops" ] }

33. { name twitter job expertise oss(type: "most-popular") elseIDo } {

    "name": "Glenn Reyes", "twitter": "@glnnrys", "job": "Independent Software Engineer", "expertise": ["React", "GraphQL"], "oss": ["graphpack", "react-countup"], "elseIDo": [ "Co-organize React Vienna", "Speak at conferences", "Give workshops" ] } GraphQL Query JSON

34. { name twitter job expertise oss(type: "most-popular") elseIDo } {

    "name": "Glenn Reyes", "twitter": "@glnnrys", "job": "Independent Software Engineer", "expertise": ["React", "GraphQL"], "oss": ["graphpack", "react-countup"], "elseIDo": [ "Co-organize React Vienna", "Speak at conferences", "Give workshops" ] } GraphQL Query JSON

35. { name twitter job } { "name": "Glenn Reyes", "twitter":

    "@glnnrys", "job": "Independent Software Engineer" } GraphQL Query JSON

36. @glnnrys · glennreyes.com What is GraphQL?

37. @glnnrys · glennreyes.com Query Language for APIs

38. @glnnrys · glennreyes.com Ask for
 what you want And get


    predictable results

39. @glnnrys · glennreyes.com It's Language Agnostic

40. @glnnrys · glennreyes.com

41. @glnnrys · glennreyes.com Why GraphQL?

42. @glnnrys · glennreyes.com GraphQL Architecture

43. @glnnrys · glennreyes.com Servers Clients

44. @glnnrys · glennreyes.com Makes managing data difficult
 in the frontend

    Servers Clients

45. @glnnrys · glennreyes.com Servers Clients GraphQL

46. @glnnrys · glennreyes.com Servers Clients GraphQL GraphQL
 handles data management

    for us

47. @glnnrys · glennreyes.com Servers Clients GraphQL GraphQL
 handles data management

    for us delivers us data exactly as needed

48. @glnnrys · glennreyes.com Servers Clients GraphQL GraphQL
 handles data management

    for us delivers us data exactly as needed let's us focus on the frontend

49. @glnnrys · glennreyes.com What else?

50. @glnnrys · glennreyes.com Tooling

51. @glnnrys · glennreyes.com Query IDEs

52. @glnnrys · glennreyes.com github.com/graphql/graphiql

53. @glnnrys · glennreyes.com github.com/prisma/graphql-playground

54. @glnnrys · glennreyes.com Automatic Documentation

55. @glnnrys · glennreyes.com

56. @glnnrys · glennreyes.com

57. @glnnrys · glennreyes.com

58. @glnnrys · glennreyes.com const MyProfile = () => { const

    { data, loading } = useQuery(gql` { name email bio } `); if (loading) { return 'Loading ...'; } return <ProfilePage data={data} />; };

59. @glnnrys · glennreyes.com Questions?

60. @glnnrys · glennreyes.com Let's get started!

61. @glnnrys · glennreyes.com github.com/glennreyes/react-graphql-workshop