diff --git a/README.md b/README.md
index e984e390..b87406bc 100644
--- a/README.md
+++ b/README.md
@@ -413,7 +413,32 @@ const client = createClient({
-🔗 Client usage with Apollo
+🔗 Client usage with Apollo Client Web v3.5.10+
+
+```typescript
+// Direct support for graphql-ws added in Apollo Client Web v3.5.10.
+// See the next section for older versions.
+import { GraphQLWsLink } from "@apollo/client/link/subscriptions";
+import { createClient } from 'graphql-ws';
+
+const link = new GraphQLWsLink(createClient({
+ url: 'ws://where.is:4000/graphql',
+ connectionParams: () => {
+ const session = getSession();
+ if (!session) {
+ return {};
+ }
+ return {
+ Authorization: `Bearer ${session.token}`,
+ };
+ },
+});
+```
+
+
+
+
+🔗 Client usage with Apollo Client Web prior to v3.5.10
```typescript
// for Apollo Client v3:
@@ -1106,35 +1131,54 @@ const server = app.listen(4000, () => {
-🔗 ws server usage with Apollo Server Express
+🔗 ws server usage with Apollo Server Express
```typescript
-import express from 'express';
import { ApolloServer } from 'apollo-server-express';
-import { WebSocketServer } from 'ws'; // yarn add ws
-// import ws from 'ws'; yarn add ws@7
-// const WebSocketServer = ws.Server;
+import { createServer } from 'http';
+import express from 'express';
+import { ApolloServerPluginDrainHttpServer } from 'apollo-server-core';
+import { WebSocketServer } from 'ws';
import { useServer } from 'graphql-ws/lib/use/ws';
import { schema } from './my-graphql-schema';
-// create express
+// create express and HTTP server
const app = express();
+const httpServer = createServer(app);
-// create apollo server
-const apolloServer = new ApolloServer({ schema });
+// create websocket server
+const wsServer = new WebSocketServer({
+ server: httpServer,
+ path: '/graphql',
+});
-// apply middleware
-apolloServer.applyMiddleware({ app });
+// Save the returned server's info so we can shut down this server later
+const serverCleanup = useServer({ schema }, wsServer);
-const server = app.listen(4000, () => {
- // create and use the websocket server
- const wsServer = new WebSocketServer({
- server,
- path: '/graphql',
- });
+// create apollo server
+const server = new ApolloServer({
+ schema,
+ plugins: [
+ // Proper shutdown for the HTTP server.
+ ApolloServerPluginDrainHttpServer({ httpServer }),
- useServer({ schema }, wsServer);
+ // Proper shutdown for the WebSocket server.
+ {
+ async serverWillStart() {
+ return {
+ async drainServer() {
+ await serverCleanup.dispose();
+ },
+ };
+ },
+ },
+ ],
});
+
+await apolloServer.start();
+apolloServer.applyMiddleware({ app });
+
+httpServer.listen(4000);
```
@@ -1681,6 +1725,13 @@ const client = createClient({
+## Web IDE support
+
+`graphql-ws` is supported by:
+
+- [Apollo Studio Explorer](https://www.apollographql.com/docs/studio/explorer/additional-features/#subscription-support); select `graphql-ws` in Connection Settings
+- [GraphiQL](https://github.com/graphql/graphiql); use [`createGraphiQLFetcher`](https://github.com/graphql/graphiql/blob/main/packages/graphiql-toolkit/docs/create-fetcher.md)
+
## [Documentation](docs/)
Check the [docs folder](docs/) out for [TypeDoc](https://typedoc.org) generated documentation.