From 55e9fb3f53b6986df02aef46799a40d7b3a4b451 Mon Sep 17 00:00:00 2001
From: Alessia Bellisario <github@bellisar.io>
Date: Thu, 2 May 2024 15:12:26 -0400
Subject: [PATCH 1/2] Update faq.mdx

---
 src/content/docs/faq.mdx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/content/docs/faq.mdx b/src/content/docs/faq.mdx
index 785ce061..45ed166c 100644
--- a/src/content/docs/faq.mdx
+++ b/src/content/docs/faq.mdx
@@ -120,12 +120,26 @@ beforeEach(() => {
 
 ### Apollo Client
 
+The Apollo Client team recommends creating a new client instance for each test. From the [Apollo Client documentation](https://www.apollographql.com/docs/react/development-testing/schema-driven-testing/#should-i-share-a-single-apolloclient-instance-between-tests):
+
+> Even if the cache is reset in between tests, the client maintains some internal state that is not reset. This could have some unintended consequences. For example, the `ApolloClient` instance could have pending queries that could cause the following test's queries to be deduplicated by default.
+> Instead, create a `makeClient` function or equivalent so that every test uses the same client configuration as your production client, but no two tests share the same client instance.
+
 ```js
-import { client } from './apolloClient'
+import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
 
-beforeEach(() => {
-  return client.cache.reset()
-})
+const httpLink = new HttpLink({
+  uri: "https://example.com/graphql",
+});
+
+export const makeClient = () => {
+  return new ApolloClient({
+    cache: new InMemoryCache(),
+    link: httpLink,
+  });
+};
+
+export const client = makeClient();
 ```
 
 ## Light theme when?

From b1217ef76cfdba7d59a443ac63a2f373946d7a3f Mon Sep 17 00:00:00 2001
From: Artem Zakharchenko <kettanaito@gmail.com>
Date: Fri, 3 May 2024 18:53:06 +0200
Subject: [PATCH 2/2] docs: polish apollo client suggestions

---
 src/content/docs/faq.mdx | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/content/docs/faq.mdx b/src/content/docs/faq.mdx
index 45ed166c..0185ecb6 100644
--- a/src/content/docs/faq.mdx
+++ b/src/content/docs/faq.mdx
@@ -14,7 +14,7 @@ import { Info } from '../../components/react/info'
 
 {/* prettier-ignore */}
 <Info>
-  Have a question not present in the list? Open a [Discussion](https://github.com/mswjs/msw/discussions/new) on GitHub and get help from our community.
+Have a question not present in the list? Open a [Discussion](https://github.com/mswjs/msw/discussions/new) on GitHub and get help from our community.
 </Info>
 
 ## How is it different than library XYZ?
@@ -120,28 +120,36 @@ beforeEach(() => {
 
 ### Apollo Client
 
-The Apollo Client team recommends creating a new client instance for each test. From the [Apollo Client documentation](https://www.apollographql.com/docs/react/development-testing/schema-driven-testing/#should-i-share-a-single-apolloclient-instance-between-tests):
+The Apollo Client team recommends creating a new client instance for each test.
 
-> Even if the cache is reset in between tests, the client maintains some internal state that is not reset. This could have some unintended consequences. For example, the `ApolloClient` instance could have pending queries that could cause the following test's queries to be deduplicated by default.
-> Instead, create a `makeClient` function or equivalent so that every test uses the same client configuration as your production client, but no two tests share the same client instance.
-
-```js
-import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
+```js {8-13}
+// src/apollo-client.js
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
 
 const httpLink = new HttpLink({
-  uri: "https://example.com/graphql",
-});
+  uri: 'https://example.com/graphql',
+})
 
-export const makeClient = () => {
+export function makeClient() {
   return new ApolloClient({
     cache: new InMemoryCache(),
     link: httpLink,
-  });
-};
+  })
+}
+```
+
+```js /makeClient/
+// test/Component.test.jsx
+import { makeClient } from '../src/apollo-client'
 
-export const client = makeClient();
+it('renders the component', async () => {
+  const client = makeClient()
+  // ...use your client in test.
+})
 ```
 
+> Learn more in the [Apollo Client documentation](https://www.apollographql.com/docs/react/development-testing/schema-driven-testing/#should-i-share-a-single-apolloclient-instance-between-tests).
+
 ## Light theme when?
 
 Whenever you have time to [open a pull request](https://github.com/mswjs/mswjs.io).