Inspiration, Challenges and Lessons
Redux to GraphQL
Slide 6
Slide 6 text
“Spread love, not hype”
- Dan Abramov
“
Slide 7
Slide 7 text
Outline
State of GraphQL @ PayPal
Redux 101 and GraphQL 101
Transitioning from Redux -> GraphQL
Slide 8
Slide 8 text
Outline
State of GraphQL @ PayPal
Redux 101 and GraphQL 101
Transitioning from Redux -> GraphQL
Slide 9
Slide 9 text
Objects that send data from
application to store
Actions
An object that stores state
tree of application
Store
Functions that define how
state changes in response to
action
Reducers
Redux features
https://redux.js.org/basics/
Slide 10
Slide 10 text
Store
How Redux works
Slide 11
Slide 11 text
Store
How Redux works
State updated = UI re-rendered
XYZ
Slide 12
Slide 12 text
Store
How Redux works
store.dispatch(action)
State updated = UI re-rendered
XYZ
Slide 13
Slide 13 text
Store
How Redux works
State updated = UI re-rendered
XYZ
calls reducer
Slide 14
Slide 14 text
Store
How Redux works
State updated = UI re-rendered
XYZ
calls API
Middleware
Slide 15
Slide 15 text
Store
How Redux works
State updated = UI re-rendered
XYZ
Normalized
data
data
Slide 16
Slide 16 text
Store
How Redux works
State updated = UI re-rendered
XYZ
store.dispatch(“DONE FETCHING”)
Slide 17
Slide 17 text
Store
How Redux works
Slide 18
Slide 18 text
700ms
Minimum cost of every round trip in Checkout
https://medium.com/paypal-engineering/graphql-a-success-story-for-paypal-checkout-3482f724fb53
Slide 19
Slide 19 text
API Developer
UI Developer
Slide 20
Slide 20 text
API Developer
UI Developer
Slide 21
Slide 21 text
API Developer
UI Developer
Slide 22
Slide 22 text
• Redux cares about storing data and immutability.
• It doesn’t care so much about the structure of data you need.
• If we don’t normalize data, we could end up with a huge and
unmaintainable store.
• Developers spend a lot of time learning tribal API knowledge
Slide 23
Slide 23 text
We think in
terms of data
fields.
Not resources
Not endpoints
Not joins
Slide 24
Slide 24 text
That’s where
GraphQL
comes in.
Slide 25
Slide 25 text
Outline
State of GraphQL @ PayPal
Redux 101 and GraphQL 101
Transitioning from Redux -> GraphQL
Slide 26
Slide 26 text
Outline
State of GraphQL @ PayPal
Redux 101 and GraphQL 101
Transitioning from Redux -> GraphQL
Slide 27
Slide 27 text
As clients integrated, we looked
closely at how they were using data
to render and manage state
Slide 28
Slide 28 text
What do
you need
to do?
API Developer
UI Developer
Slide 29
Slide 29 text
API Developer
UI Developer
Get users
Slide 30
Slide 30 text
API Developer
UI Developer
Filter
users for
user_id
Slide 31
Slide 31 text
API Developer
UI Developer
Get name of
user with
user_id
Slide 32
Slide 32 text
API Developer
UI Developer
Get account
balance for
user_id
Slide 33
Slide 33 text
API Developer
UI Developer
Slide 34
Slide 34 text
Let us try
GraphQL
Slide 35
Slide 35 text
GraphQL features
Slide 36
Slide 36 text
A request to receive or modify
information from the server
Query, Mutations
Describes the functionality
available to the clients
Schema
A function that returns value
for a field
Resolvers
GraphQL features
https://www.apollographql.com/docs/
Slide 37
Slide 37 text
GraphQL features
https://www.apollographql.com/docs/
Schema Query, Mutations Resolvers
Slide 38
Slide 38 text
What if we need filtered values?
Slide 39
Slide 39 text
Filtered values
What if we need filtered values?
Slide 40
Slide 40 text
Filtered values
Resolvers
What if we need filtered values?
Slide 41
Slide 41 text
Resolvers
Slide 42
Slide 42 text
Resolvers
Slide 43
Slide 43 text
Resolvers
Slide 44
Slide 44 text
State management
Slide 45
Slide 45 text
No need for additional lib
X
Slide 46
Slide 46 text
Don’t be afraid of the
network
Slide 47
Slide 47 text
• When using GraphQL, you may not need a state management
library.
• Usually react state or context is enough for passing data.
• For example, apollo-link-state can be used for state management.
Lessons Learnt
Slide 48
Slide 48 text
GraphQL is a
paradigm shift
Slide 49
Slide 49 text
Refactor!
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Refactor stats!
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
Should you move?
Slide 57
Slide 57 text
I don’t know
Slide 58
Slide 58 text
Do you
have control over
APIs ?
Ask yourself
Slide 59
Slide 59 text
How
important is
offline usage?
Ask yourself
Slide 60
Slide 60 text
How
complex is your
state?
Ask yourself
Slide 61
Slide 61 text
How
expensive are
the network
calls?
Ask yourself
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Outline
State of GraphQL @ PayPal
Redux 101 and GraphQL 101
Transitioning from Redux -> GraphQL
Slide 64
Slide 64 text
Outline
State of GraphQL @ PayPal
Redux 101 and GraphQL 101
Transitioning from Redux -> GraphQL
Slide 65
Slide 65 text
Transition @
PayPal
Slide 66
Slide 66 text
/…/API(s)
Server
DB/API(S) Response
/graphql DB/.. Res..
Schema
Before
After
Slide 67
Slide 67 text
store
Client
actions/
reducers
connected
Apollo
Query
Mutation
Schema
resolver
Before
After
Slide 68
Slide 68 text
♥
Slide 69
Slide 69 text
By The Numbers
Slide 70
Slide 70 text
At PayPal, 33 teams are building
and consuming GraphQL APIs
As of a month ago, probably more now…
Slide 71
Slide 71 text
Eg: PayPal Checkout,
Onboarding, PayPal.me, iOS
and Android Apps
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
Community of ~200 developers
interested (and using) GraphQL
Slide 74
Slide 74 text
Challenges of GraphQL
Caching
Schema sharing
Difficult in implementing - file uploading