Sara describes moving from Redux, whose boilerplate frustrated her, to MobX and then Apollo. She introduces Apollo Client State as a way to manage local state using the GraphQL tools developers already know.
GQL all the Things!
Speaker
Sara Vieira, a developer advocate at Wilde, explains how to manage local state with Apollo at a Callstack talk.
Sara shows an Apollo Boost setup with client state defaults and resolvers. Her example stores whether a modal is open, with a type name for the cached object. A resolver reads or writes that data through Apollo’s cache.
Sara uses the @client directive to tell Apollo to read data from the cache instead of the server. She demonstrates querying the modal state and using Query and Mutation components to open or close it. For small changes, she also shows writing directly to the cache with Apollo Consumer.
Sara describes Apollo changes available or planned at the time, including custom cache support for server-side rendering and Apollo CLI generation of TypeScript types for queries and mutations. She also discusses opt-in schema validation as a development aid that avoids adding its bundle cost in production.
Takeaways
- Use Apollo’s cache for simple local state when it keeps data access consistent with the rest of an Apollo app.
- Give cached objects type names to help Apollo manage its cache.
- Use @client to mark fields that Apollo should resolve locally.
- Wrap repeated loading and error handling in a reusable query component.
- Reserve direct cache writes through Apollo Consumer for small updates such as toggling a value.
Mentioned in this talk
Search inside this talk
What was claimed 9
- role atSara Vieira is developer advocate at Wilde
“I'm a developer advocate at Wilde.”
YouTube Unverified1 source· Talk
- featureApollo Client State: Allows local state to be managed through Apollo
“it allows you to do exactly that”
YouTube Unverified1 source· Talk
- featureApollo Boost: Includes client-state setup by default
“If you're at the stage of using Apollo Boost, this already comes by default”
YouTube Unverified1 source· Talk
- featureApollo Client: Uses a cache for local state that client-side queries and resolvers can read and update
“the resolver just gets stuff from the cache and returns it to you”
YouTube Unverified1 source· Talk
- featureReact Apollo: Provides Query and Mutation components for connecting queries and mutations to React UI
“After Apollo 2.0—we have the query component”
YouTube Unverified1 source· Talk
- integrates withApollo Consumer integrates with Context Engine
“It uses React's Context API.”
YouTube Unverified1 source· Talk
- featureApollo CLI: Generates TypeScript types for queries and mutations
“this will create TypeScript types for your queries and mutations”
YouTube Unverified1 source· Talk
- featureApollo CLI: Supports opt-in schema validation for development
“In the new Apollo, there's something called opt-in schema validation.”
YouTube Unverified1 source· Talk
- featureApollo CLI: Watches for changes and regenerates TypeScript files
“when you change something, it will watch the changes and create new TypeScript files”
YouTube Unverified1 source· Talk
