Apollo Client Best Practices (and gotchas): Video Walkthrough

Get Help and Help Others Solutions
1

This is a quick screen recording riff on Apollo best practices / gotchas for folks.

It’s not very clear from the docs but there are a few great posts worth reading that consolidated leveraging Apollo for us at Leftlane:

TL;DR takeaways from Jace

  1. Apollo is not just a client for making GraphQL queries; it also functions as a data store. It organizes the entire front end and interacts with React. It utilizes a cache that can be viewed and accessed using the Apollo extension in the development tools.
  2. It is crucial to ensure that all queries for a specific type return an ID. This allows the data to be normalized and stored in the cache effectively. If the ID is not returned, the cache won’t be properly updated, and components relying on that data may not re-render correctly.
  3. When dealing with nested relations or lists in queries, Apollo may face challenges in updating the cache. In such cases, manual intervention is required to update the cache for those specific relations. It may involve refetching or writing custom queries to handle insertions or deletions to the related data.

Good posts worth reading

Might be other FE areas of interest such as testing strategies, code organization and so on if folks are interested.

6 Likes
2

I watched this video it’s really great stuff. I took some notes. Thank you, Michael!

  1. Apollo is not just a client for making GraphQL queries; it also functions as a data store. It organizes the entire front end and interacts with React. It utilizes a cache that can be viewed and accessed using the Apollo extension in the development tools.
  2. It is crucial to ensure that all queries for a specific type return an ID. This allows the data to be normalized and stored in the cache effectively. If the ID is not returned, the cache won’t be properly updated, and components relying on that data may not re-render correctly.
  3. When dealing with nested relations or lists in queries, Apollo may face challenges in updating the cache. In such cases, manual intervention is required to update the cache for those specific relations. It may involve refetching or writing custom queries to handle insertions or deletions to the related data.
1 Like
3

Glad it was helpful Jace!

That’s a great recap of key take aways. Mind if I copy into the description?

4

Feel free!

1 Like