[pull] main from apollographql:main

docs/source/caching/advanced-topics.mdx

@@ -46,13 +46,18 @@ For advanced usage and additional configuration options, see the [README of `apo
 Sometimes, you might want to reset the cache entirely, such as [when a user logs out](../networking/authentication/#reset-store-on-logout). To accomplish this, call `client.resetStore`. This method is asynchronous, because it also refetches any of your active queries.
 
 ```js
-export default withApollo(graphql(PROFILE_QUERY, {
-  props: ({ data: { loading, currentUser }, ownProps: { client }}) => ({
-    loading,
-    currentUser,
-    resetOnLogout: async () => client.resetStore(),
-  }),
-})(Profile));
+import { useQuery } from '@apollo/client';
+function Profile() {
+    const { data, client } = useQuery(PROFILE_QUERY);
+    return (
+      <Fragment>
+        <p>Current user: {data?.currentUser}</p>
+        <button onClick={async ()=>client.resetStore()}>
+            Log out
+        </button>
+      </Fragment>
+    );
+}
 ```
 
 > To reset the cache _without_ refetching active queries, use `client.clearStore()` instead of `client.resetStore()`.
@@ -84,26 +89,27 @@ You can also call `client.onResetStore` from your React components. This can be
 
 The `client.onResetStore` method's return value is a function you can call to unregister your callback:
 
-```js {6-8,12}
-import { withApollo } from "@apollo/react-hoc";
+```js {8-10,13}
+import { useApolloClient } from '@apollo/client';
 
-export class Foo extends Component {
-  constructor(props) {
-    super(props);
-    this.unsubscribe = props.client.onResetStore(
-      () => this.setState({ reset: false })
+function Foo (){
+  const [reset, setReset] = useState(0);
+  const client = useApolloClient();
+
+  useEffect(() => {
+    const unsubscribe = client.onResetStore(() => 
+      new Promise(()=>setReset(reset + 1))
     );
-    this.state = { reset: false };
-  }
-  componentDidUnmount() {
-    this.unsubscribe();
-  }
-  render() {
-    return this.state.reset ? <div /> : <span />
-  }
+
+    return () => {
+      unsubscribe();
+    };
+  });
+
+  return reset ? <div /> : <span />
 }
 
-export default withApollo(Foo);
+export default Foo;
 ```
 
 ## TypePolicy inheritence