graphql-ws and Vite proxy

[v-vitenko]

Did anyone try to use Apollo's subscriptions via graphql-ws as per their documentation but leveraging Vite's proxy?

Proxying the common graphql query with httpLink works like charm. But creating a wsClient always fails with an error:
Uncaught DOMException: Failed to construct 'WebSocket': The URL '/ws' is invalid.

My vite.config:

proxy: {
        '/graph': {
          target: env.BASE_URL,
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path.replace(/^\/graph/, ''),
        },
        '/ws': {
          target: env.WS_URL,
          changeOrigin: true,
          secure: false,
          ws: true,
          rewrite: (path) => path.replace(/^\/ws/, ''),
        },
      },

My apollo client setup:

const httpLink = new HttpLink({
  uri: '/graph', // works like charm
});

const wsLink = new GraphQLWsLink(
  createClient({
    url: '/ws', // fails with error 'not valid URL'
  })
);

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink
);
const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache(),
});

[enisdenjo]

WebSockets URL must specify the scheme (ws://) and must be absolute (see MDN here).

If your Vite is at port 5173, the URL should then be ws://localhost:5173/ws.