Subscriptions-transport-ws: Type Errors when using SubscriptionClient as NetworkInterface

[veeramarni]

I'm using apollo-client v1.7.0 and subscription-transport-ws v0.7.3. Based on the readme file, I was trying Full Websocket subscription and getting following error with Typescript 2.3.4.

Error

at-loader] ./servers/frontend-server/src/index.tsx:49:33
    TS2345: Argument of type '{ networkInterface: SubscriptionClient; }' is not assignable to parameter of type '{ networkInterface?: NetworkInterface | ObservableNetworkI
nterface; reduxRootSelector?: string | ...'.
  Types of property 'networkInterface' are incompatible.
    Type 'SubscriptionClient' is not assignable to type 'NetworkInterface | ObservableNetworkInterface'.
      Type 'SubscriptionClient' is not assignable to type 'ObservableNetworkInterface'.
        Property 'request' is missing in type 'SubscriptionClient'.

Code

const networkInterface = new SubscriptionClient((__EXTERNAL_BACKEND_URL__ || (window.location.origin + '/graphql'))
  .replace(/^http/, 'ws')
  .replace(':' + settings.webpackDevPort, ':' + settings.apiPort), {
    reconnect: true,
  });

const client = new ApolloClient({
  networkInterface,
});

[mistic]

@veeramarni can't u just do something like:

const networkInterface = new SubscriptionClient((__EXTERNAL_BACKEND_URL__ || (window.location.origin + '/graphql'))
  .replace(/^http/, 'ws')
  .replace(':' + settings.webpackDevPort, ':' + settings.apiPort), {
    reconnect: true,
  }) as NetworkInterface;

const client = new ApolloClient({
  networkInterface,
});

[Parziphal]

I tried casting but I get this error:

[ts]
Type 'SubscriptionClient' cannot be converted to type 'NetworkInterface'.
  Types of property 'query' are incompatible.
    Type '(options: OperationOptions) => Promise<ExecutionResult>' is not comparable to type '(request: Request) => Promise<ExecutionResult>'.
      Types of parameters 'options' and 'request' are incompatible.
        Type 'Request' is not comparable to type 'OperationOptions'.
          Types of property 'query' are incompatible.
            Type 'DocumentNode' is not comparable to type 'string'.

I'm using [email protected] and [email protected].

I've been all day trying to make the example code in the readme work, but I find errors on every step. It simply doesn't work.

[nowzig]

I have the same problem with the same error message

[veeramarni]

The workaround was to disable typescript for that line by changing to any.

const subscriptionClient = new SubscriptionClient(subscriptionUrl, {
  reconnect: true,
});

const client = new ApolloClient({
  networkInterface: subscriptionClient as any,
});

[DxCx]

Apollo Client has added new API it seems..
we will need to add support for

export interface ObservableNetworkInterface {
  request(request: Request): Observable<ExecutionResult>;
}

[mistic]

@veeramarni can u check if #242 closes your issue?

[veeramarni]

@mistic Thanks its fixes the issue.