BackEndSP - GraphQL

Transcript

1. APIs NodeJS com
   GraphQL
   

   View Slide

2. Olar!
   Meu nome é Ana Bastos
   Sou engenheira de
   software e cientista da
   computação.
   2
   anabastos
   @naluhh
   @anapbastos
   

   View Slide

3. View Slide

4. Client Server
   HTTP
   

   View Slide

5. HTTP
   REQUISIÇÃO
   Cabeçalho
   Corpo
   RESPOSTA
   Cabeçalho
   Corpo
   

   View Slide

6. GET
   POST
   PUT
   DELETE
   PATCH
   HEAD
   TRACE
   OPTIONS
   

   View Slide

7. Songs
   Followers
   1.239
   Jovelli
   How I Feel
   Ana Luiza
   Lorem Ipsum
   

   View Slide

8. HTTP GET
   Songs
   Followers
   Ana Luiza
   Lorem Ipsum
   users/123
   RESPONSE
   a
   {
   name: ..,
   accountName: ..,
   nickname: Ana Luiza,
   email: {..},
   bio: Lorem Ipsum
   avatar: {..},
   birthday: ..,
   city: ..,
   location: {..}
   ...
   }
   

   View Slide

9. HTTP GET
   Songs
   Followers
   Ana Luiza
   Lorem Ipsum
   users/123/posts
   RESPONSE
   posts {
   {
   id: ..
   music: {..},
   replies: {..},
   likes: {..},
   shares: {..},
   …
   },
   ...
   }
   Jovelli
   How I Feel
   

   View Slide

10. HTTP GET
    Songs
    Followers
    Ana Luiza
    Lorem Ipsum
    users/123/followers
    RESPONSE
    followers {
    {
    name: ..,
    accountName: ..,
    Nickname: Vilmar,
    email: {..},
    avantar: ..
    …
    },
    ...
    Jovelli
    How I Feel
    

    View Slide

11. Followers
    1.239
    Britnet Spears
    Toxic
    Pablo
    Estou indo
    embora
    Musical Taste: Pop / Sofrência
    Most popular posts
    

    View Slide

12. - Underfetching gerando a
    necessidade de fazer muitas
    requisições ou de criar
    endpoints muito específicos
    - Overfetching e com isso
    problemas em performance
    

    View Slide

13. FACEBOOK
    

    View Slide

14. “Ficamos frustrados com as
    diferenças entre os dados que
    queríamos e as requisições que
    eram necessárias para obtê-los”
    Lee Byron
    

    View Slide

15. GRAPHQL
    

    View Slide

16. Novo standard de
    APIs
    

    View Slide

17. View Slide

18. Nele todas as requisições são
    POST e os dados requisitados são
    explicitamente declarados
    

    View Slide

19. SOAP?
    

    View Slide

20. Desenvolvedores do Facebook
    -Mano vamo ter que usar SOAP.
    - Puts mas SOAP usa XML. Pra JS é tudo
    JSON. Seria loco se a gente usasse SOAP
    com JSON.
    - Hold my beer
    

    View Slide

21. SOAP 2.0 / GraphQL
    Auto-documentação
    Tipos / Schemas
    Usa JSON ao invés de XML e
    chama de uma linguagem nova
    

    View Slide

22. CORE CONCEPT
    

    View Slide

23. TYPE
    SYSTEM
    QUERY
    LANGUAGE
    SCHEMA
    

    View Slide

24. SCHEMA BASED
    

    View Slide

25. ID
    BOOLEAN
    FLOAT
    STRING
    INT
    

    View Slide

26. users
    folowers
    posts
    

    View Slide

27. posts
    

    View Slide

28. type Post {
    id: ID
    artist: String
    album: String
    music: String
    genre: String
    likes: Int
    }
    

    View Slide

29. user
    

    View Slide

30. type User {
    id: ID
    name: String
    avatarUrl: String
    description: String
    age: Integer
    status: Status
    musicalTaste: [String]
    posts: [Post]
    followers: [Follower]
    }
    enum Status {
    Active
    Blocked
    Inactive
    }
    

    View Slide

31. folowers
    

    View Slide

32. type Follower {
    id: ID
    user: User
    sinceWhen: Date
    }
    

    View Slide

33. Schemas descrevem o contrato
    entre o front e o back e o
    relacionamento entre os dados
    

    View Slide

34. ROOT
    TYPE
    FOLLO
    WERS
    POST
    USER
    [USER]
    

    View Slide

35. “EDGE”
    

    View Slide

36. QUERY
    MUTATION
    SUBSCRIPTION
    

    View Slide

37. QUERY
    

    View Slide

38. HTTP POST
    graphql/
    RESPONSE
    data {
    userName: ..,
    avatar: ..,
    bio,
    followers [
    {avatar: ..}, ..
    ]
    posts [
    {artist: …,
    name:}
    BODY
    query profile{
    user {
    name
    description
    }
    followers{
    avatar
    }
    posts {
    artist
    name
    }
    }
    

    View Slide

39. ARGUMENTS
    

    View Slide

40. HTTP POST
    graphql/
    RESPONSE
    data {
    userName: ..,
    avatar: ..,
    bio,
    followers [
    {avatar: ..}, ..
    ]
    posts [
    {artist: …,
    name:}
    BODY
    query profile {
    user {
    name
    description
    }
    followers{
    avatar
    }
    posts(first: 5,
    orderBy: “date”) {
    artist
    name
    }
    }
    

    View Slide

41. HTTP POST
    graphql/
    RESPONSE
    data {
    userName: ..,
    avatar: ..,
    bio,
    followers [
    {avatar: ..}, ..
    ]
    posts [
    {artist: …,
    name:}
    BODY
    query profile {
    user {
    musicalTaste
    }
    followers(first: 4){
    avatar
    }
    popularPosts(first: 5,
    orderBy: “popularity”) {
    artist
    name
    }
    }
    

    View Slide

42. MUTATION
    

    View Slide

43. HTTP POST
    graphql/
    RESPONSE
    data {
    status: “ok”
    }
    BODY
    mutation addPost {
    artist: “...”
    name: “...”
    album: “...”
    }
    }
    

    View Slide

44. addPost
    deletePost
    blockPosts
    promotePost
    

    View Slide

45. FORTEMENTE
    TIPADO
    

    View Slide

46. HTTP POST
    graphql/
    RESPONSE
    Get graphql error
    BODY
    mutation addPost {
    artist: “...”
    name: 1
    album: {
    name: “aa”
    }
    }
    }
    

    View Slide

47. HTTP POST
    graphql/
    RESPONSE
    Get graphql error
    BODY
    query profile {
    qualquerCoisa
    }
    

    View Slide

48. BACK-END FRONT-END
    

    View Slide

49. REQUEST
    subscription {
    subscribeToComment (filter
    : {
    mutation_in :
    [CREATED]
    }){
    comment {
    content
    author { username
    }
    }
    }
    }
    RESPONSE
    {
    “data”: {
    comment {
    content: “Nossa”,
    author {
    username: “Ana”
    }
    }
    }
    }
    RESPONSE
    {
    “data”: {
    comment {
    content: “Eita”,
    author {
    username:
    “Joao”
    }
    }
    }
    }
    

    View Slide

50. CLIENT SERVER
    GRAPHQL
    DATA
    RESOLVE
    BODY
    JSON
    {
    query: {..}
    variables:{..}
    }
    {
    data: {..}
    errors:{..}
    }
    G
    R
    A
    P
    H
    Q
    L
    

    View Slide

51. INDEPENDE DE BD
    

    View Slide

52. SERVER
    GRAPHQL
    RESTfull
    Api
    AWS
    Lambda
    SOAP
    Service
    MONGODB
    HTTP
    HTTP
    SOAP
    TCP/IP
    

    View Slide

53. Como o graphql vai me
    ajudar(backend) a pegar estes
    dados?
    Não vai :(
    

    View Slide

54. Já que GraphQL é agnostico de dados cada query
    ou mutation tem uma função resolver e nela é
    nossa responsabilidade buscar e estruturar os
    dados de acordo com o Schemas da forma mais
    perfomática pois o muitas vezes o client pode
    solicitar diversos dados com alta complexidade
    por de baixo dos panos
    

    View Slide

55. 1 requisição
    10 queries no banco
    

    View Slide

56. Query em JS
    

    View Slide

57. View Slide

58. View Slide

59. RELAÇÕES
    

    View Slide

60. ROOT
    TYPE
    FOLLO
    WERS
    POST
    USER
    [USER]
    

    View Slide

61. BODY
    query profile {
    user {
    folowers: [
    user: {
    folowers: {
    user:...
    }
    }
    ]
    }
    Maximum depth: 3
    

    View Slide

62. SUBSCRIPTIONS
    

    View Slide

63. Mutations definem uma série
    de ações que mudam seus
    dados.
    Subscriptions definem uma
    série de eventos que você
    pode se inscrever(subscribe)
    pra quando os dados mudam.
    

    View Slide

64. Notificações
    Mensagens
    Live Feed
    

    View Slide

65. Independente de meio de
    transporte
    ● WebSockets
    ● ZeroMQ ou MQTT
    

    View Slide

66. RESPONSE
    {
    getPosts {
    ‘content’: {
    ...
    }
    }
    }
    REQUEST
    subscription getPosts($post: Post)
    {
    getPosts(content: $post){
    content
    }
    }
    

    View Slide

67. GraphiQL
    

    View Slide

68. SYNTAX HIGHLIGHT
    AUTO COMPLETE
    AUTO DOCUMENTAÇÃO
    

    View Slide

69. SYNTAX HIGHLIGHT
    AUTO COMPLETE
    AUTO DOCUMENTAÇÃO
    

    View Slide

70. View Slide

71. Altair
    

    View Slide

72. Insomnia
    

    View Slide

73. COMO FAÇO NO
    NODE
    

    View Slide

74. yarn add -g
    -graphql
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. graphiql/
    graphql/
    

    View Slide

80. MONTAR SCHEMA
    EM GRAPHQL
    

    View Slide

81. View Slide

82. MONTAR SCHEMA
    EM JS
    

    View Slide

83. type Post {
    id: ID
    artist: String
    album: String
    music: String
    genre: String
    likes: Int
    }
    

    View Slide

84. View Slide

85. View Slide

86. View Slide

87. O rest morreu?
    Não
    

    View Slide

88. MOTIVOS PARA USAR
    GRAPHQL
    

    View Slide

89. DIFERENTES CLIENTES: Há a necessidade de
    criar várias versões de dados diferentes para
    múltiplos clientes.
    LINKAR DADOS: Quando os dados mudam com
    muita frequência e precisam estar linkados
    sempre.
    NECESSIDADE DE ENDPOINTS MUITO
    ESPECIFICOS
    

    View Slide

90. MOTIVOS PARA NÃO
    USAR GRAPHQL
    

    View Slide

91. MINHA EXPERIÊNCIA
    

    View Slide

92. HYPE: Minha empresa gosta do stack do facebook
    e todo mundo acha mo hype.
    O FRONTEND SUGERIU
    REST É ANTIGO kk
    TOO NORMALIZED: Tenho muitas relações.
    

    View Slide

93. GraphQL Rest API
    HTTP METHODS POST GET POST PUT ETC
    Status Code Precisa lidar com todos os errors Default
    Cache do proprio
    navegador
    Precisa usar DataLoader. Default
    Peso da request Mais leve pois é só o necessário Overfetching /
    Underfetching
    Complexidade Escondida embaixo do tapete Explicita
    Documentação Default Precisa implementar
    

    View Slide

94. TIPS
    Deixar models extremamente dinâmicas(limits,
    orders, filters, pegar apenas os campos requisitados na
    query GraphQL).
    Usar context do graphQL para guardar estado
    Crie seu proprio status code
    

    View Slide

95. COMO ORGANIZAR O
    PROJ
    

    View Slide

96. View Slide

97. DEMO?
    97
    

    View Slide

98. GraphQL JS
    graphql.org/graphql-js
    How to graphql
    howtographql.com/basics
    RobinWieruch Graphql Series
    robinwieruch.de/graphql-tutorial
    FunFunFunction Graphql Series
    

    View Slide

99. Telegram
    t.me/GraphQLBrasil
    Conf
    graphqlconf.com.br
    Github
    github.com/graphql-brasil
    Slack
    graphql-slack.now.sh
    react-brasil-slack.herokuapp.com
    

    View Slide

100. Obrigada!
     anabastos
     @naluhh
     @anapbastos
     100
     

     View Slide