graphql-tools-stiching v8 subscription

[Twathik]

I am new in the graphql area, i tried to implement scheme stiching using my existing apollo servers, queries and mutations, even merging worked well, the issue is the subscriptions, i tried the subscription example in the V8 documentation, but in addition to many types issues, i did not managed to compile it, is there any available example,

I gave a look to gmac handbook witch is great (with some types issues), but it uses the version 7

this technology is for me a high topic, any help will be great

[Urigo]

could you share what issues did you encounter?

[Twathik]

my subscription implementation seems not to be working

this is my executor

/* eslint-disable @typescript-eslint/ban-ts-comment */
import { SyncExecutor, ExecutionRequest } from '@graphql-tools/utils';
import { introspectSchema, wrapSchema } from '@graphql-tools/wrap';

import makeRemoteExecutor from '../lib/make_remote_executor';
import makeRemoteSubscriber from '../lib/make_remote_subscriber';

const AuthExecutor = async ({
  document,
  variables,
  context,
  operationType,
}: ExecutionRequest): Promise<SyncExecutor> => {
  const url = 'http://localhost:4001';
  const wsUrl = 'ws://localhost:4001/sub';
  let headers = {};

  if (context) {
    if (context.connection) {
      headers = context;
    } else {
      headers = context.req.headers;
    }
  }
  if (operationType === 'subscription') return makeRemoteSubscriber({ url: wsUrl, Headers: headers });
  return makeRemoteExecutor({ document, headers, url, variables });
};

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const AuthSchema = async (): Promise<ReturnType<typeof wrapSchema>> => {
  const schema = wrapSchema({
    // @ts-ignore
    schema: await introspectSchema(AuthExecutor),
    // @ts-ignore
    executor: AuthExecutor,
  });
  return schema;
};

export default AuthSchema;

make_remote_executor.ts

/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { SyncExecutor } from '@graphql-tools/utils';
import { fetch } from 'cross-fetch';
import { print } from 'graphql';

const makeRemoteExecutor = async ({ url, document, variables, headers }): Promise<SyncExecutor> => {
  const query = print(document);
  const fetchResult = await fetch(url, {
    method: 'POST',
    headers: {
      ...headers,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ query, variables }),
  });
  return fetchResult.json();
};

export default makeRemoteExecutor;

make_remote_subscriber.ts

/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { ASTNode, print } from 'graphql';
import { createClient } from 'graphql-ws';
import ws from 'ws';

// builds an AsyncIterator wrapper around a WS client
// see https://github.com/enisdenjo/graphql-ws#async-iterator
export default function makeRemoteSubscriber({ url, Headers }): any {
  console.log({ Headers });
  const client = createClient({ url, webSocketImpl: ws, connectionParams: { Headers } });

  return async ({ document, variables }: { document: ASTNode; variables?: Record<string, any> }) => {
    const pending: any = [];
    let deferred: any | null = null;
    let error: any | null = null;
    let done = false;

    const query = print(document);
    const dispose = client.subscribe(
      {
        query,
        variables,
      },
      {
        next: (data) => {
          pending.push(data);
          if (deferred) deferred.resolve(false);
        },
        error: (err) => {
          error = err;
          if (deferred) deferred.reject(error);
        },
        complete: () => {
          done = true;
          if (deferred) deferred.resolve(true);
        },
      },
    );

    return {
      [Symbol.asyncIterator]() {
        return this;
      },
      async next() {
        if (done) return { done: true, value: undefined };
        if (error) throw error;
        if (pending.length) return { value: pending.shift() };
        return (await new Promise((resolve, reject) => {
          deferred = { resolve, reject };
        }))
          ? { done: true, value: undefined }
          : { value: pending.shift() };
      },
      async return() {
        dispose();
        return { done: true, value: undefined };
      },
    };
  };
}

my server.ts

import { ApolloServer } from 'apollo-server';
import waitOn from 'wait-on';
import makeGatewaySchema from './Schema';
// import makeRemoteSubscriber from './lib/make_remote_subscriber';

waitOn({ resources: ['tcp:4001', 'tcp:4002'] }, async () => {
  const schema = await makeGatewaySchema();
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  const server = new ApolloServer({
    schema,
    context: (ctx) => ctx,
    subscriptions: {
      keepAlive: 0,
      onConnect: (
        _connectionParams,
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        webSocket: any,
      ) => {
        return webSocket.upgradeReq.headers;
      },
    },
  }); // uses Apollo Server for its subscription UI features
  server.listen(4000).then(() => console.log(`gateway running at http://localhost:4000/graphql`));
});
```

[alemor10]

did this get resolved i also cant get this to work

[acrogenesis]

@Twathik were you able to solve this. I've updated most of the code for my needs but I get this error when assigning the subscriber to the stitchSchema
line with error:

return stitchSchemas({
    subschemas: [
      {
        schema: await introspectSchema(authsExec),
        // executor handles query and mutation requests over HTTPs
        executor: authsExec,
        // subscriber returns an AsyncIterator that proxies remote sockets
        subscriber: makeRemoteSubscriber('wss://url.com/api') // **<<- error here**
      }
   ]
})

error:

error TS2322: Type '{ schema: GraphQLSchema; executor: ({ document, variables, context }: { document: any; variables: any; context: any; }) => Promise<any>; subscriber: ({ document, variables }: { document: any; variables: any; }) => Promise<{ ...; }>; }' is not assignable to type 'GraphQLSchema | SubschemaConfig<any, any, any, Record<string, any>> | SubschemaConfig<any, any, any, Record<string, any>>[]'.
  Object literal may only specify known properties, and 'subscriber' does not exist in type 'GraphQLSchema | SubschemaConfig<any, any, any, Record<string, any>> | SubschemaConfig<any, any, any, Record<string, any>>[]'.

[ardatan]

subscriber has been removed so you need to create an executor that handles subscription as well;
You can do;

function myNewExecutor(params) {
  if (params.operationType === 'subscription') {
     return myOldSubscriber(params);
  }
  return myOldExecutor(params);
}