Commite02079c

authored

feat: support graphql-ws client for GraphiQL IDE (#755)

1 parent7056e4b commite02079cCopy full SHA for e02079c

File tree

+409

-83

lines changed

+409

-83

lines changed

Lines changed: 2 additions & 0 deletions

Original file line number	Diff line number	Diff line change
@@ -138,6 +138,8 @@ The `graphqlHTTP` function accepts the following options:
`138`	`138`
`139`	`139`	-`subscriptionEndpoint`: An optional GraphQL string contains the WebSocket server url for subscription.
`140`	`140`
	`141`	+-`websocketClient`: An optional GraphQL string for websocket client used for subscription,`v0`: subscriptions-transport-ws,`v1`: graphql-ws. Defaults to`v0` if not provided
	`142`	`+`
`141`	`143`	-`rootValue`: A value to pass as the`rootValue` to the`execute()`
`142`	`144`	function from[`GraphQL.js/src/execute.js`](https://github.com/graphql/graphql-js/blob/main/src/execution/execute.js#L129).
`143`	`145`

Lines changed: 48 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,48 @@`
	`1`	`+import{createServer}from'http';`
	`2`	`+`
	`3`	`+importexpressfrom'express';`
	`4`	`+import{execute,subscribe}from'graphql';`
	`5`	`+importwsfrom'ws';`
	`6`	`+import{useServer}from'graphql-ws/lib/use/ws';`
	`7`	`+`
	`8`	`+import{graphqlHTTP}from'../src';`
	`9`	`+`
	`10`	`+import{schema,roots,rootValue}from'./schema';`
	`11`	`+`
	`12`	`+constPORT=4000;`
	`13`	+constsubscriptionEndpoint=`ws://localhost:${PORT}/subscriptions`;
	`14`	`+`
	`15`	`+constapp=express();`
	`16`	`+app.use(`
	`17`	`+'/graphql',`
	`18`	`+graphqlHTTP({`
	`19`	`+ schema,`
	`20`	`+ rootValue,`
	`21`	`+graphiql:{`
	`22`	`+ subscriptionEndpoint,`
	`23`	`+websocketClient:'v1',`
	`24`	`+},`
	`25`	`+}),`
	`26`	`+);`
	`27`	`+`
	`28`	`+constserver=createServer(app);`
	`29`	`+`
	`30`	`+constwsServer=newws.Server({`
	`31`	`+ server,`
	`32`	`+path:'/subscriptions',`
	`33`	`+});`
	`34`	`+`
	`35`	`+server.listen(PORT,()=>{`
	`36`	`+useServer(`
	`37`	`+{`
	`38`	`+ schema,`
	`39`	`+ roots,`
	`40`	`+ execute,`
	`41`	`+ subscribe,`
	`42`	`+},`
	`43`	`+wsServer,`
	`44`	`+);`
	`45`	`+console.info(`
	`46`	+`Running a GraphQL API server with subscriptions at http://localhost:${PORT}/graphql`,
	`47`	`+);`
	`48`	`+});`

Lines changed: 53 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,53 @@`
	`1`	`+import{createServer}from'http';`
	`2`	`+`
	`3`	`+importexpressfrom'express';`
	`4`	`+import{execute,subscribe}from'graphql';`
	`5`	`+import{SubscriptionServer}from'subscriptions-transport-ws';`
	`6`	`+`
	`7`	`+import{graphqlHTTP}from'../src';`
	`8`	`+`
	`9`	`+import{schema,rootValue}from'./schema';`
	`10`	`+`
	`11`	`+constPORT=4000;`
	`12`	+constsubscriptionEndpoint=`ws://localhost:${PORT}/subscriptions`;
	`13`	`+`
	`14`	`+constapp=express();`
	`15`	`+app.use(`
	`16`	`+'/graphql',`
	`17`	`+graphqlHTTP({`
	`18`	`+ schema,`
	`19`	`+ rootValue,`
	`20`	`+graphiql:{ subscriptionEndpoint},`
	`21`	`+}),`
	`22`	`+);`
	`23`	`+`
	`24`	`+constws=createServer(app);`
	`25`	`+`
	`26`	`+ws.listen(PORT,()=>{`
	`27`	`+console.log(`
	`28`	+`Running a GraphQL API server with subscriptions at http://localhost:${PORT}/graphql`,
	`29`	`+);`
	`30`	`+});`
	`31`	`+`
	`32`	`+constonConnect=(_:any,__:any)=>{`
	`33`	`+console.log('connecting ....');`
	`34`	`+};`
	`35`	`+`
	`36`	`+constonDisconnect=(_:any)=>{`
	`37`	`+console.log('disconnecting ...');`
	`38`	`+};`
	`39`	`+`
	`40`	`+SubscriptionServer.create(`
	`41`	`+{`
	`42`	`+ schema,`
	`43`	`+ rootValue,`
	`44`	`+ execute,`
	`45`	`+ subscribe,`
	`46`	`+ onConnect,`
	`47`	`+ onDisconnect,`
	`48`	`+},`
	`49`	`+{`
	`50`	`+server:ws,`
	`51`	`+path:'/subscriptions',`
	`52`	`+},`
	`53`	`+);`

Lines changed: 37 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,37 @@`
	`1`	`+import{buildSchema}from'graphql';`
	`2`	`+`
	`3`	`+functionsleep(ms:number){`
	`4`	`+returnnewPromise((resolve)=>{`
	`5`	`+setTimeout(resolve,ms);`
	`6`	`+});`
	`7`	`+}`
	`8`	`+`
	`9`	+exportconstschema=buildSchema(`
	`10`	`+type Query {`
	`11`	`+ hello: String`
	`12`	`+}`
	`13`	`+type Subscription {`
	`14`	`+ countDown: Int`
	`15`	`+}`
	`16`	+`);
	`17`	`+`
	`18`	`+exportconstroots={`
	`19`	`+Query:{`
	`20`	`+hello:()=>'Hello World!',`
	`21`	`+},`
	`22`	`+subscription:{`
	`23`	`+/* eslint no-await-in-loop: "off" */`
	`24`	`+`
	`25`	`+countDown:asyncfunction*fiveToOne(){`
	`26`	`+for(constnumberof[5,4,3,2,1]){`
	`27`	`+awaitsleep(1000);// slow down a bit so user can see the count down on GraphiQL`
	`28`	`+yield{countDown:number};`
	`29`	`+}`
	`30`	`+},`
	`31`	`+},`
	`32`	`+};`
	`33`	`+`
	`34`	`+exportconstrootValue={`
	`35`	`+hello:roots.Query.hello,`
	`36`	`+countDown:roots.subscription.countDown,`
	`37`	`+};`

Comments

(0)