Add type/field policy code splitting docs section #6766
Conversation
Demonstrate how to use `cache.policies.addTypePolicies()` to lazily load cache type/field policies.
| export function Stats() { | ||
| const client = useApolloClient(); | ||
| client.cache.policies.addTypePolicies(newPolicy); |
There was a problem hiding this comment.
I'd like to avoid re-adding the policies every time the component is rendered. I realize the component function gives us access to the client/cache, but maybe we can come up with a better pattern here? Maybe keep a Set of cache instances that we've seen, and only add the policies when we haven't seen this cache before?
There was a problem hiding this comment.
Sure thing @benjamn, I'l adjust. Thanks!
There was a problem hiding this comment.
Would be great to clarify the best practice here. We could use useEffect with no dependencies too.
There was a problem hiding this comment.
I wonder how that relates to this comment (that the query gets fired before to policies are loaded, unless you use a lazy query).
There was a problem hiding this comment.
Thanks for the link @coler-j, the effect may be the reason why I was seeing the failure in the issue I opened (as you linked). This is our hook that adds type policies: https://github.com/magento/pwa-studio/blob/develop/packages/peregrine/lib/hooks/useTypePolicies.js#L29.
| const client = useApolloClient(); | ||
| client.cache.policies.addTypePolicies(newPolicy); | ||
|
|
||
| const { loading, data: { messageCount } } = useQuery(GET_MESSAGE_COUNT); |
There was a problem hiding this comment.
Since data can be undefined, we either need to avoid destructuring it, or provide a default = {} expression.
There was a problem hiding this comment.
I'll fix @benjamn - thanks!
Co-authored-by: Ben Newman <[email protected]>
Co-authored-by: Ben Newman <[email protected]>
|
|
||
| ## Code splitting | ||
|
|
||
| Depending on the complexity and size of your cache type/field policies, you might not always want to define them up front, when you create your initial `InMemoryCache` instance. If you have type/field policies that are only needed in a specific part of your application, you can leverage `InMemoryCache`'s `.policies.addTypePolicies()` method to adjust your cache policy map at any point. This can be really useful when leveraging techniques like route based code-splitting, using a tool like [`react-loadable`](https://www.npmjs.com/package/react-loadable). |
There was a problem hiding this comment.
I would recommend documenting "Loadable Components" instead since react-loadable is more or less unmaintained and the official React docs have moved on with their suggestion: https://reactjs.org/docs/code-splitting.html#reactlazy
There was a problem hiding this comment.
Great point @bwhitty! These docs were carried over / modified from the AC 2.x docs, so they definitely need to be updated further. Thanks!
|
I'm documenting this for apollo-elements at https://apolloelements.dev/pages/cool%20tricks/code-splitting, FYI. Thanks for working on this :D |
|
I noticed that while Otherwise, one would have to |
|
Hi @hwillson, any plan to include this in the docs soon? |
|
@hwillson did you want to come back to this documentation PR so we can merge it in? |
|
Thanks for the discussion, everyone! We may want to revisit this in the future, but the existing draft would need significant reworking given the changes to the React landscape in the time that's passed, so I'm going to close this out for now. Thanks 🙇♀️ |
Demonstrate how to use
cache.policies.addTypePolicies()to lazily load cache type/field policies.Reference: #6711