State Management with Apollo GraphQL

Manage your Application State with Apollo GraphQL without a hassle.

Transcript

1. State Management with Apollo GraphQL Adam Trzciński github.com/adamTrz medium.com/@adamtrzciski
2. What is State? •Data that comes from external APIs •Temporary data •User selections !2
3. Redux or Mobx?
4. • Declarative data fetching • Apollo’s Higher Order Components
5. apollo-link-state • what are links? • what is apollo-link-state?
6. ... import ApolloClient from 'apollo-boost'; ... const client = new ApolloClient({ uri, clientState, }); Set up
7. const clientState = { defaults: { cart: [], }, resolvers: { Mutation: { addItemToCart: (_, { id, value }, { cache }) => { const previous = cache.readQuery({ query: CART_QUERY }); const data = {...}; cache.writeData({ data }); return null; }, ... Set up
8. export const CART_QUERY = gql` query GetCart { cart @client { id value } } `; export const ADD_ITEM_TO_CART = gql` mutation addItemToCart($id: ID!, $value: number!) { addItemToCart(id: $id, value: $value) @client } `; Usage
9. Demo Time!
10. Take away • One source of truth • Reduced code boilerplate
11. Useful links • The Future of State Management by Peggy Razis
 http://bit.ly/apollo_medium • Apollo-link-state - Let’s manage state with queries
 http://bit.ly/apollo_yt • Docs! 
 http://bit.ly/apollo_docs
12. Thank you!