test: add test case to ensure it works with msw graphql link

packages/example/src/App.tsx

@@ -8,10 +8,11 @@ import { UsersList } from './components/users-list';
 import { SettingsForm } from './components/settings-form';
 import { Documents } from './components/documents';
 import { Search } from './components/search';
+import { ENDPOINT1 } from './mocks/handlers/settings';
 
 const queryClient = new QueryClient();
 const apolloClient = new ApolloClient({
-  uri: '/graphql',
+  uri: ENDPOINT1,
   cache: new InMemoryCache(),
 });
 

packages/example/src/components/settings-form.tsx

@@ -1,9 +1,16 @@
-import { FC, useCallback, FormEvent } from 'react';
-import { useQuery, useMutation, gql } from '@apollo/client';
+import { FC, useCallback, FormEvent, useState } from 'react';
+import {
+  useQuery,
+  useMutation,
+  gql,
+  ApolloClient,
+  InMemoryCache,
+} from '@apollo/client';
 import {
   SettingsQueryData,
   SettingsMutationVariables,
 } from '../types/settings';
+import { ENDPOINT2 } from '../mocks/handlers/settings';
 
 const GET_SETTINGS = gql`
   query GetSettings {
@@ -29,13 +36,30 @@ const MUTATE_SETTINGS = gql`
   }
 `;
 
+const client2 = new ApolloClient({
+  uri: ENDPOINT2,
+  cache: new InMemoryCache(),
+});
+
 export const SettingsForm: FC = () => {
   const settingsQuery = useQuery<SettingsQueryData>(GET_SETTINGS);
+  const settingsQueryFromEndpoint2 = useQuery<SettingsQueryData>(GET_SETTINGS, {
+    client: client2,
+  });
   const [settingsMutation, settingsMutationMeta] = useMutation<
     null,
     SettingsMutationVariables
   >(MUTATE_SETTINGS);
 
+  const [usingEndpoint2, setUsingEndpoint2] = useState(false);
+
+  const settingsQueryResult = usingEndpoint2
+    ? settingsQueryFromEndpoint2
+    : settingsQuery;
+
+  // For creating a new instance with the newest defaultValue
+  const formKey = usingEndpoint2 ? 'endpoint2' : 'endpoint1';
+
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   const handleFormSubmit = useCallback((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -49,27 +73,41 @@ export const SettingsForm: FC = () => {
   return (
     <div>
       <h1>Settings</h1>
-      {settingsQuery.loading ? (
+      <div style={{ marginBottom: 20 }}>
+        <label htmlFor="useEndpoint2">Use Endpoint 2</label>
+        <input
+          type="checkbox"
+          id="useEndpoint2"
+          name="useEndpoint2"
+          checked={usingEndpoint2}
+          onChange={() => setUsingEndpoint2(!usingEndpoint2)}
+        />
+      </div>
+      {settingsQueryResult.loading ? (
         'Loading...'
-      ) : settingsQuery.error ? (
+      ) : settingsQueryResult.error ? (
         <div>Failed to load settings</div>
       ) : (
-        <form onSubmit={handleFormSubmit}>
+        <form key={formKey} onSubmit={handleFormSubmit}>
           <div>
             <label htmlFor="enableNotifications">Notifications</label>
             <input
               type="checkbox"
               id="enableNotifications"
               name="enableNotifications"
-              defaultChecked={settingsQuery.data?.settings.enableNotifications}
+              defaultChecked={
+                settingsQueryResult.data?.settings.enableNotifications
+              }
             />
           </div>
           <div>
             <label htmlFor="profileVisibility">Profile visibility</label>
             <select
               id="profileVisibility"
               name="profileVisibility"
-              defaultValue={settingsQuery.data?.settings.profileVisibility}
+              defaultValue={
+                settingsQueryResult.data?.settings.profileVisibility
+              }
             >
               <option value="public">Public</option>
               <option value="private">Private</option>

packages/example/src/mocks/handlers/settings.ts

@@ -6,21 +6,26 @@ import {
   SettingsQueryData,
 } from '../../types/settings';
 
+export const ENDPOINT1 = 'https://first.endpoint/graphql';
+export const ENDPOINT2 = 'https://second.endpoint/graphql';
+export const graphql1 = graphql.link(ENDPOINT1);
+export const graphql2 = graphql.link(ENDPOINT2);
+
 const DEFAULT_SETTINGS: Settings = {
   enableNotifications: true,
   profileVisibility: 'private',
 };
 
 export default [
-  graphql.query<SettingsQueryData>('GetSettings', (_, response, context) =>
+  graphql1.query<SettingsQueryData>('GetSettings', (_, response, context) =>
     response(
       context.status(200),
       context.data({
         settings: DEFAULT_SETTINGS,
       })
     )
   ),
-  graphql.mutation<SettingsMutationData, SettingsMutationVariables>(
+  graphql1.mutation<SettingsMutationData, SettingsMutationVariables>(
     'MutateSettings',
     (request, response, context) =>
       response(
@@ -30,4 +35,12 @@ export default [
         })
       )
   ),
+  graphql2.query<SettingsQueryData>('GetSettings', (_, response, context) => {
+    return response(
+      context.status(200),
+      context.data({
+        settings: { enableNotifications: false, profileVisibility: 'public' },
+      })
+    );
+  }),
 ];

packages/example/tests/playwright/models/settings-form.ts

@@ -18,6 +18,10 @@ export class SettingsForm {
     await this.page.getByRole('button', { name: 'Update' }).click();
   }
 
+  async setUseEndpoint2(checked: boolean) {
+    await this.page.getByLabel('Use Endpoint 2').setChecked(checked);
+  }
+
   async setNotificationsEnabled(enabled: boolean) {
     await this.page.getByLabel('Notifications').setChecked(enabled);
   }

packages/example/tests/playwright/specs/graphql.spec.ts

@@ -55,4 +55,19 @@ test.describe.parallel('GraphQL example: user settings', () => {
     await settingsForm.submit();
     await settingsForm.assertError(SettingsForm.Error.MutationFailed);
   });
+
+  test('should render different data based on endpoint switching', async ({
+    page,
+  }) => {
+    await page.goto('/settings');
+
+    const settingsForm = new SettingsForm(page);
+    await settingsForm.setUseEndpoint2(true);
+    await settingsForm.assertNotificationsEnabled(false);
+    await settingsForm.assertProfileVisibility('public');
+
+    await settingsForm.setUseEndpoint2(false);
+    await settingsForm.assertNotificationsEnabled(true);
+    await settingsForm.assertProfileVisibility('private');
+  });
 });