The GET graphql request from the proxy is just lost

[mickey8121]

I use a proxy to query the graphql API (kinda https://my_api.com/graphql), it works fine until I use the vite-plugin-pwa plugin. When the PWA plugin is plugged in, POST requests work as before, but GET (https://my_client.com/graphql) which opens the Apollo sandbox/documentation stops working. Just redirect to root. GET /graphql request does not shown in any logs (but it is there when PWA plugin is not used) as if it is limited somewhere under the hood.

import { cpus } from 'os';
import { sentryVitePlugin } from '@sentry/vite-plugin';
import { VitePWA } from 'vite-plugin-pwa';
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react-swc';
import tsconfigPaths from 'vite-tsconfig-paths';
import svgr from 'vite-plugin-svgr';

export default defineConfig(() => {
  const env = loadEnv('all', process.cwd());
  return {
    plugins: [
      react(),
      svgr(),
      tsconfigPaths(),
      differMuiSourcemapsPlugins(),
      sentryVitePlugin({
        org: 'name-of-project',
        project: 'client',
        telemetry: false,
      }),
      VitePWA({
        registerType: 'prompt',
        workbox: {
          maximumFileSizeToCacheInBytes: 5242880,

          runtimeCaching: [
            // any GET request
            {
              urlPattern: ({ url }) => {
                console.log('__url GET here__', url.pathname, url);

                return true;
              },
              handler: 'NetworkOnly',
              method: 'GET',
            },

            {
              urlPattern: ({ url }) => {
                console.log('__url POST here__', url.pathname, url);

                return true;
              },
              handler: 'NetworkOnly',
              method: 'POST',
            },

            {
              urlPattern: ({ url }) => {
                console.log('__url HEAD here__', url.pathname, url);

                return true;
              },
              handler: 'NetworkOnly',
              method: 'HEAD',
            },

            {
              urlPattern: ({ url }) => {
                console.log('__url PATCH here__', url.pathname, url);

                return true;
              },
              handler: 'NetworkOnly',
              method: 'PATCH',
            },

            {
              urlPattern: ({ url }) => {
                console.log('__url PUT here__', url.pathname, url);

                return true;
              },
              handler: 'NetworkOnly',
              method: 'PUT',
            },

            // skip caching translations
            // {
            //   urlPattern: ({ url }) => url.pathname.startsWith('/locales'),
            //   handler: 'NetworkFirst',
            // },

            // {
            //   urlPattern: ({ event, request, sameOrigin, url }) => {
            //     console.log('__URL', url.pathname, request.method, url, {
            //       "url.pathname.startsWith('/graphql')": url.pathname.startsWith('/graphql'),
            //       sameOrigin,
            //     });

            //     return url.pathname.startsWith('/graphql');
            //   },
            //   method: 'PUT',
            //   handler: 'NetworkFirst',
            // },
          ],
        },
      }),
    ],
    server: {
      host: 'localhost',
      open: true,
      port: 3000,
      proxy: {
        '/graphql': {
          target: env.VITE_APP_PROXY_URI ?? 'http://localhost:5000',
          changeOrigin: true,
          secure: false,
          ws: true,

          configure: (proxy, _options) => {
            proxy.on('start', (res) => {
              console.log('__START', res.method, res.url);
            });
            proxy.on('error', (err, _req, _res) => {
              console.log('proxy error', err);
            });
            proxy.on('proxyReq', (proxyReq, req, _res) => {
              console.log('Sending Request to the Target:', req.method, req.url);
            });
            proxy.on('proxyRes', (proxyRes, req, _res) => {
              console.log('Received Response from the Target:', proxyRes.statusCode, req.url);
            });
          },
        },
        '/auth/callback': {
          target: env.VITE_APP_PROXY_URI ?? 'http://localhost:5000',
          changeOrigin: true,
          ws: true,
        },
      },
    },
    build: {
      outDir: 'build',
      sourcemap: false,
      rollupOptions: {
        maxParallelFileOps: cpus().length - 1,
        output: {
          manualChunks: (id) => {
            if (id.includes('node_modules/@sentry')) {
              return 'sentry';
            }
            if (id.includes('node_modules/@mui')) {
              return 'mui';
            }
            if (id.includes('node_modules/lodash')) {
              return 'lodash';
            }
            if (id.includes('node_modules/@apollo')) {
              return 'apollo';
            }
            if (id.includes('node_modules')) {
              return 'vendor';
            }
          },
        },
        cache: false,
      },
    },
  };
});

function differMuiSourcemapsPlugins() {
  const excludedPackages = ['@mui/material', '@emotion/styled', '@emotion/react', '@mui/icons-material', '@sentry'];

  return {
    name: 'differ-mui-sourcemap',
    transform(code: string, id: string) {
      if (excludedPackages.some((pkg) => id.includes(pkg))) {
        return {
          code: code,
          map: null,
        };
      }
    },
  };
}