Apollo config for subscriptions (using Sapper)

[albertms10]

Description

Having the following file with the ApolloClient configuration:

ApolloClient file (TypeScript)

```ts import { ApolloClient, HttpLink, InMemoryCache, split, } from "@apollo/client/core"; import { WebSocketLink } from "@apollo/client/link/ws"; import { getMainDefinition } from "@apollo/client/utilities"; import fetch from "cross-fetch"; import ws from "ws"; export const HASURA_GRAPHQL_ENGINE_HOSTNAME = "HOST_NAME.hasura.app"; const scheme = (proto: string) => process.env.BACKEND_SSL ? `${proto}s` : proto; const wsurl = `${scheme("ws")}://${HASURA_GRAPHQL_ENGINE_HOSTNAME}/v1/graphql`; const httpurl = `${scheme( "http" )}://${HASURA_GRAPHQL_ENGINE_HOSTNAME}/v1/graphql`; const wsLink = new WebSocketLink({ uri: wsurl, options: { reconnect: true, }, webSocketImpl: ws, }); const httpLink = new HttpLink({ uri: httpurl, credentials: "include", fetch, }); const link = split( ({ query }) => { const definition = getMainDefinition(query); return ( definition.kind === "OperationDefinition" && definition.operation === "subscription" ); }, wsLink, httpLink ); const createApolloClient = () => new ApolloClient({ link, cache: new InMemoryCache(), }); const client = createApolloClient(); export default client; ```

Gives the following list of errors in the console:

Console log errors

``` 'events' is imported by node_modules/ws/lib/websocket.js, but could not be resolved – treating it as an external dependency 'events' is imported by node_modules/ws/lib/websocket-server.js, but could not be resolved – treating it as an external dependency 'crypto' is imported by node_modules/ws/lib/websocket.js, but could not be resolved – treating it as an external dependency 'crypto' is imported by node_modules/ws/lib/websocket-server.js, but could not be resolved – treating it as an external dependency 'crypto' is imported by node_modules/ws/lib/sender.js, but could not be resolved – treating it as an external dependency 'url' is imported by node_modules/ws/lib/websocket-server.js, but could not be resolved – treating it as an external dependency 'url' is imported by node_modules/ws/lib/websocket.js, but could not be resolved – treating it as an external dependency 'http' is imported by node_modules/ws/lib/websocket-server.js, but could not be resolved – treating it as an external dependency 'net' is imported by node_modules/ws/lib/websocket.js, but could not be resolved – treating it as an external dependency 'http' is imported by node_modules/ws/lib/websocket.js, but could not be resolved – treating it as an external dependency 'tls' is imported by node_modules/ws/lib/websocket.js, but could not be resolved – treating it as an external dependency 'https' is imported by node_modules/ws/lib/websocket.js, but could not be resolved – treating it as an external dependency 'stream' is imported by node_modules/ws/lib/receiver.js, but could not be resolved – treating it as an external dependency 'url' is imported by url?commonjs-external, but could not be resolved – treating it as an external dependency 'events' is imported by events?commonjs-external, but could not be resolved – treating it as an external dependency 'http' is imported by http?commonjs-external, but could not be resolved – treating it as an external dependency 'crypto' is imported by crypto?commonjs-external, but could not be resolved – treating it as an external dependency 'net' is imported by net?commonjs-external, but could not be resolved – treating it as an external dependency 'https' is imported by https?commonjs-external, but could not be resolved – treating it as an external dependency 'tls' is imported by tls?commonjs-external, but could not be resolved – treating it as an external dependency 'stream' is imported by stream?commonjs-external, but could not be resolved – treating it as an external dependency 'zlib' is imported by node_modules/ws/lib/permessage-deflate.js, but could not be resolved – treating it as an external dependency 'zlib' is imported by zlib?commonjs-external, but could not be resolved – treating it as an external dependency 'fs' is imported by node_modules/node-gyp-build/index.js, but could not be resolved – treating it as an external dependency 'path' is imported by node_modules/node-gyp-build/index.js, but could not be resolved – treating it as an external dependency 'os' is imported by node_modules/node-gyp-build/index.js, but could not be resolved – treating it as an external dependency 'fs' is imported by fs?commonjs-external, but could not be resolved – treating it as an external dependency 'path' is imported by path?commonjs-external, but could not be resolved – treating it as an external dependency 'os' is imported by os?commonjs-external, but could not be resolved – treating it as an external dependency ```

Maybe, due to the inclusion of certain dependencies of @apollo/client/... that are not being included nor compatible with Svelte.

Question

What is the desired way to config the ApolloClient with the new svelte-apollo@0.4.0 enabling WebSockets for subscriptions?

[imCorfitz]

I don't think your question here has anything to do with svelte-apollo, but I can recommend moving your resolve() function further up in the plugins[] array in your Rollup config, in order to resolve these dependencies and avoid getting the error.. I experienced same when adding node-fetch to a sapper app and moving the resolver further up removed the warnings.

[albertms10]

Moving the resolve() function further up, in my case, gives me a 500 error with the following message, which makes the app useless:

Error: <Header> is not a valid SSR component. You may need to review your build config
to ensure that dependencies are compiled, rather than imported as pre-compiled modules

I also ensured all my related dependencies were devDependencies.

Well, I see the point that this is not related to svelte-apollo, but as it switched from using apollo-boost to @apollo/client, I thought there would be some proper way to set it up if you wanted to use subscriptions—and, therefore, configuring a WebSocket client.

[timhall]

Sorry, haven't used subscriptions / sapper in a while, might be able to take a look in the future.