Does this work with express-graphql or replace it?

Thanks @enisdenjo for this awesome package!

A question, does this work with express-graphql or replace it?

Before I had something like

import { graphqlHTTP } from 'express-graphql';

const graphQLMiddleware = graphqlHTTP({
  context: {
    dataLoaders: {
      user: userDataLoader,
    },
  },
  schema,
});

However, when I write code like this, it does not supports context:

import { createServer } from 'graphql-transport-ws';

createServer(
  {
    context: { // <- not support here
      dataLoaders: {
        user: userDataLoader,
      },
    },
    schema,
  },
  {
    server,
    path: '/graphql',
  }
);

[enisdenjo]

Hey @Hongbo-Miao, you’re very welcome!

Thank you for asking this question. In short - yes, this library supports express-graphql and it should fulfil all your requirements.

On the side note, 101 Switching Protocols is good. This indicates that the HTTP handshake went well and the browser is “switching” to the WebSocket Protocol.

Back to your problem - we don’t support specifying the context during the server creation (#13); however, you can still inject it in the execute and/or subscribe operations. Also, you can indeed perform all 3 operations through WebSocket.

Here is how:

// server.ts

import http from 'http';
import express from 'express';
import { graphqlHTTP } from 'express-graphql';
import { createServer } from 'graphql-transport-ws';
import { execute, subscribe } from 'graphql';

// your schema
const schema = { ... };

// your context
const context = {
  dataLoaders: {
    user: userDataLoader,
  },
};

// create express and middleware
const app = express();
app.use(
  '/graphql',
  graphqlHTTP({
    schema,
    context,
  }),
);

// create a http server using express
const server = http.createServer(app);

// listen on port 7070
server.listen(7070, () => {
  // and create a WebSocket server on the same port
  createServer(
    {
      schema,
      execute: (args) =>
        execute({
          ...args,
          context, // inject the context
        }),
      subscribe: (args) =>
        subscribe({
          ...args,
          context, // inject the context
        }),
    },
    {
      server,
      path: '/graphql', // you can even use the same path (just use the `ws` scheme)
    },
  );
});

// client.ts

import { createClient } from 'graphql-transport-ws';

const client = createClient({
  url: 'ws://localhost:7070/graphql',
});

// query
client.subscribe( 
  {
    query: `{ sayHi }`,
  },
  {
    next: (data) => {
      console.log(data);
    },
    error: (error) => {
      console.error(error);
    },
    complete: () => {
      console.log('said hi');
    },
  },
);

// subscription
client.subscribe( 
  {
    query: `subscriptions { planetsInOurSolarSystem }`,
  },
  {
    next: (data) => {
      // will be called 8 times
      console.log(data);
    },
    error: (error) => {
      console.error(error);
    },
    complete: () => {
      console.log('no more planets');
    },
  },
);

[Hongbo-Miao]

Thanks @enisdenjo for the explaining!

Oh now I get it, with graphql-transport-ws, it can provide query and mutation on ws or wss protocal. And thanks for the context method!

I succeed on the demo using Schema Definition Language with buildSchema, but my case actually failed on using GraphQLSchema object way, since it is different topic, I will ask in another ticket. Posted at https://github.com/enisdenjo/graphql-transport-ws/issues/15