Merge branch 'release-3.7' into named-fragment-registry

apollographql · Sep 21, 2022 · 4036a69 · 4036a69
2 parents a67eb81 + b091220
commit 4036a69
Show file tree

Hide file tree

Showing 14 changed files with 1,645 additions and 2,610 deletions.
diff --git a/config/jest.config.js b/config/jest.config.js
@@ -1,21 +1,14 @@
-const { compilerOptions } = require("../tsconfig.json");
-
 const defaults = {
   rootDir: "src",
-  preset: "ts-jest/presets/js-with-ts",
+  preset: "ts-jest",
   testEnvironment: "jsdom",
   setupFiles: ["<rootDir>/config/jest/setup.ts"],
   testEnvironmentOptions: {
     url: "http://localhost",
   },
-  globals: {
-    "ts-jest": {
-      diagnostics: true,
-      tsconfig: {
-        ...compilerOptions,
-        allowJs: true,
-      },
-    },
+  snapshotFormat: {
+    escapeString: true,
+    printBasicPrototype: true
   },
 };
 

diff --git a/docs/shared/query-options.mdx b/docs/shared/query-options.mdx
@@ -122,23 +122,6 @@ The default value is `false`.
 </td>
 </tr>
 
-<tr>
-<td>
-
-###### `displayName`
-
-`string`
-</td>
-
-<td>
-
-The name of your component to be displayed in the React Developer Tools.
-
-The default value is `Query`.
-
-</td>
-</tr>
-
 <tr>
 <td colspan="2">
 

diff --git a/docs/source/caching/advanced-topics.mdx b/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