Mutating Meetup with GraphQL

Over the past three years, Meetup has undergone a transformation from relying on REST APIs to fully embracing GraphQL. Despite the many benefits, it hasn't been without its challenges.

In this talk, I'll cover the benefits of using GraphQL in production, such as how it can streamline API development and improve data retrieval. I'll also discuss common challenges that arise when implementing GraphQL in production and share best practices for addressing them. Specifically, I'll touch on:

* Schema design considerations
* Caching strategies
* Monitoring and performance optimization
* Tools and frameworks for implementing GraphQL in production

Look forward to gaining valuable insights and practical advice for implementing GraphQL in production!

Transcript

1. @brwngrldev
   Mutating
   with GraphQL
   @brwngrldev
   

   View Slide

2. @brwngrldev
   

   View Slide

3. @brwngrldev
   How old is Meetup?
   A
   21 years old
   B
   12 years old
   C
   17 years old
   

   View Slide

4. @brwngrldev
   A
   21 years old
   

   View Slide

5. @brwngrldev
   

   View Slide

6. @brwngrldev
   

   View Slide

7. @brwngrldev
   01
   Key challenges
   we’ve faced
   03
   02
   Poor architecture setup
   Insufficient to no
   caching
   Steep learning curve
   

   View Slide

8. @brwngrldev
   01
   Poor architecture setup
   

   View Slide

9. @brwngrldev
   What is the primary issue here?
   

   View Slide

10. @brwngrldev
    01
    02
    03
    04
    05
    

    View Slide

11. @brwngrldev
    01
    02
    03
    04
    05
    All of the above
    

    View Slide

12. @brwngrldev
    How we’re fixing this
    simplifying our architecture
    

    View Slide

13. @brwngrldev
    

    View Slide

14. @brwngrldev
    

    View Slide

15. @brwngrldev
    

    View Slide

16. @brwngrldev
    The primary GraphQL API
    

    View Slide

17. @brwngrldev
    

    View Slide

18. @brwngrldev
    

    View Slide

19. @brwngrldev
    What
    SHOULD
    we do?
    

    View Slide

20. @brwngrldev
    $29k
    savings each month
    on AWS bill
    Get rid of the middle-man
    We’ve seen increased performance and lower costs
    

    View Slide

21. @brwngrldev
    

    View Slide

22. @brwngrldev
    W.W.L.
    what we’ve learned
    

    View Slide

23. @brwngrldev
    “There are only two hard things in
    Computer Science: _____ _____ and
    naming things”
    

    View Slide

24. @brwngrldev
    “There are only two hard things in
    Computer Science: cache invalidation
    and naming things”
    

    View Slide

25. @brwngrldev
    02
    Insufficient to no caching
    

    View Slide

26. @brwngrldev
    Adding appropriate caching at each layer
    Hitting the database for each request is not ideal. Caching helps to reduce the database I/O
    from: aws.amazon.com/aws-cost-management/aws-cost-explorer/features
    

    View Slide

27. @brwngrldev
    

    View Slide

28. @brwngrldev
    // Loaders.java
    
    
    register(
    
    
    IS_FEATURED_EVENT,
    
    
    newMappedDataLoader(
    
    
    isFeaturedEventLoader(),
    
    
    this.cacheOptions(
    
    
    IS_FEATURED_EVENT, Duration.ofHours(1), Boolean.class
    
    
    )
    
    
    )
    
    
    )
    

    View Slide

29. @brwngrldev
    // Loaders.java
    
    
    register(
    
    
    IS_FEATURED_EVENT,
    
    
    newMappedDataLoader(
    
    
    isFeaturedEventLoader(),
    
    
    this.cacheOptions(
    
    
    IS_FEATURED_EVENT, Duration.ofHours(1), Boolean.class
    
    
    )
    
    
    )
    
    
    )
    

    View Slide

30. @brwngrldev
    request
    member data loader
    group data loader
    

    View Slide

31. @brwngrldev
    request
    promise #1 promise #2 promise #n
    member data loader
    group data loader
    

    View Slide

32. @brwngrldev
    request
    promise #1 promise #2 promise #n
    member data loader
    group data loader
    

    View Slide

33. @brwngrldev
    request
    promise #1 promise #2 promise #n
    data data data
    member data loader
    group data loader
    

    View Slide

34. @brwngrldev
    Steady decrease in read operations as a result
    

    View Slide

35. @brwngrldev
    

    View Slide

36. @brwngrldev
    Caching at each appropriate layer
    Apollo client caching, cache-control headers, CDN caching, etc.
    

    View Slide

37. @brwngrldev
    

    View Slide

38. @brwngrldev
    Is it
    CACHED?
    

    View Slide

39. @brwngrldev
    query member($id: ID!) {
    
    
    member(id: $id) {
    
    
    __typename
    
    
    id
    
    
    name
    
    
    email
    
    
    }
    
    
    }
    01
    

    View Slide

40. @brwngrldev
    query member($id: ID!) {
    
    
    member(id: $id) {
    
    
    __typename
    
    
    id
    
    
    name
    
    
    email
    
    
    }
    
    
    }
    01 02
    query member($id: ID!) {
    
    
    member(id: $id) {
    
    
    __typename
    
    
    id
    
    
    name
    
    
    }
    
    
    }
    

    View Slide

41. @brwngrldev
    query member($id: ID!) {
    
    
    member(id: $id) {
    
    
    __typename
    
    
    id
    
    
    name
    
    
    email
    
    
    city
    
    
    }
    
    
    }
    03
    

    View Slide

42. @brwngrldev
    

    View Slide

43. @brwngrldev
    W.W.L.
    what we’ve learned
    

    View Slide

44. @brwngrldev
    03
    Steep learning curve
    

    View Slide

45. @brwngrldev
    Caching won’t work
    if the queries and mutations
    aren’t set up right
    Wait, shouldn’t I
    know about this?!
    

    View Slide

46. @brwngrldev
    

    View Slide

47. @brwngrldev
    Reducing duplicate data in the cache
    // Apollo Kotlin
    extend type Query @
    fi
    eldPolicy(forField: "group", keyArgs: "id")
    // Apollo React
    group: {
    read(_, { args, toReference }) {
    return toReference({ __typename: 'Group', id: args.id });
    }
    }
    

    View Slide

48. @brwngrldev
    

    View Slide

49. @brwngrldev
    What DID
    they KNOW?
    

    View Slide

50. @brwngrldev
    What
    WOULD
    you do?
    

    View Slide

51. @brwngrldev
    

    View Slide

52. @brwngrldev
    Help others to be self-sufficient
    Engineers have access to the schema on Hive
    

    View Slide

53. @brwngrldev
    “Each one, teach one”
    

    View Slide

54. @brwngrldev
    Automate what you can
    add_tags:
    needs:
    fi
    lterChanges
    steps:
    - name: Add GraphQL label to PR
    if: ${{ needs.
    fi
    lterChanges.outputs.graphql == 'true' }}
    run: |
    PAYLOAD='{"labels":["graphql"]}'
    LABEL_URL=${{github.event.pull_request.issue_url}}/labels
    curl …
    Use GitHub Actions to label a PR as including GraphQL changes
    

    View Slide

55. @brwngrldev
    

    View Slide