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.