https://github.com/tnyo43/urql_msw/tree/600fc18b48e52ab1fe376884ed320a224c6f30ae

起こっていること

• localhost:3000
  • GraphQL client に urql を使用
  • MSW が intercept していない
• localhost:3000/apollo
  • GraphQL client に apollo/client を使用
  • MSW が intercept している

再現方法

$ pnpm install
$ pnpm dev

urql と apollo、それぞれの通信の request headers を確認すると accept が違うらしい

urql

accept: application/graphql-response+json, application/graphql+json, application/json, text/event-stream, multipart/mixed

apollo

accept: */*

試しに、 urql client の fetchOption で request header の accept を変更してみると MSW で intercept されるようになった。

const client = new Client({
  url: 'https://beta.pokeapi.co/graphql/v1beta',
  exchanges: [cacheExchange, fetchExchange],
+  fetchOptions: {
+    headers: {
+      Accept: '*/*'
+    }
+  }
});

MSW が SourceEvent を回避しているのは、 Service Worker 自体が技術的な難しさから SourceEvent を回避しているかららしい。
https://github.com/w3c/ServiceWorker/issues/885

EventSource is designed with the idea that the connection will be held open and lines will be flushed across the connection to trigger events. This is quite difficult to do today with synthetic responses.

EventSource は接続を保持してイベントを流すように設計されていて、これに intercept するのは難しい（ということらしい）