GraphQL Mock not working

[saqibakajack]

I'm trying to mock graphQL with playwright in my react app. I have following projects:

1. Frontend running on port 3000
2. Backend running on port 8080

My frontend app communicates to the graphQL backend via apollo.

As per the documentation, I have provided graphQL URL:

const test = base.extend<{
  worker: MockServiceWorker
  http: typeof http
}>({
  worker: createWorkerFixture(handlers, {
    graphqlUrl: 'http://localhost:8080/graphql'
  }),
  http
})

Here are my handlers:

import { faker } from '@faker-js/faker'
import { graphql, HttpResponse } from 'msw'

export const handlers = [
  graphql.mutation('login', () => {
    console.log('mocked login mutation called')

    return HttpResponse.json({
      data: {
        login: {
          id: faker.number.int(),
          name: faker.person.fullName(),
          email: faker.internet.email(),
          active: true,
          token: faker.string.alpha(32)
        }
      }
    })
  })
]

Here is my test suite:

test.describe('Login page', () => {
  test('given an email and password: should submit the form', async ({
    page
  }) => {
    await page.goto('/login')

    const email = faker.internet.email()
    const password = faker.internet.password()

    await page.getByLabel(/email address/i).fill(email)
    await page.getByLabel(/password/i).fill(password)

    await page.getByRole('button', { name: /login/i }).click()

    await page.waitForNavigation()

    expect(page.url()).toEqual('http://localhost:3000/projects')

    await page.close()
  })
})

But the mocking is not working. Is there anything wrong with the setup?