import { ApolloServer } from 'apollo-server-express' ; import * as GraphiQL from 'apollo-server-module-graphiql' ; import * as cors from 'cors' ; import * as express from 'express' ; import schema from './schema' ; import { execute , subscribe } from 'graphql' ; import { createServer , Server } from 'http' ; import { SubscriptionServer } from 'subscriptions-transport-ws' ; import * as url from 'url' ; type ExpressGraphQLOptionsFunction = ( req ? : express . Request , res ? : express . Response ) => any | Promise < any > ; function graphiqlExpress ( options ) { const graphiqlHandler = ( req , res , next ) => { const query = req . url && url . parse ( req . url , true ) . query ; GraphiQL . resolveGraphiQLString ( query , options , req ) . then ( ( graphiqlString ) => { res . setHeader ( 'Content-Type' , 'text/html' ) ; res . write ( graphiqlString ) ; res . end ( ) ; } , ( error ) => next ( error ) ) ; } ; return graphiqlHandler ; } export default async ( port ) : Promise < Server > => { const app = express ( ) ; const server = createServer ( app ) ; app . use ( '*' , cors ( { origin : 'http://localhost:3000' } ) ) ; const apolloServer = new ApolloServer ( { playground : false , schema } ) ; apolloServer . applyMiddleware ( { app , path : '/graphql' } ) ; if ( module . hot ) { app . use ( '/graphiql' , graphiqlExpress ( { endpointURL : '/graphql' , query : '# Welcome to your own GraphQL server!\n#\n' + '# Press Play button above to execute GraphQL query\n#\n' + '# You can start editing source code and see results immediately\n\n' + 'query hello($subject:String) {\n  hello(subject: $subject)\n}' , subscriptionsEndpoint : `ws://localhost:${ port }/subscriptions` , variables : { subject : 'World' } } ) ) ; } return new Promise < Server > ( resolve => { server . listen ( port , ( ) => { new SubscriptionServer ( { execute , schema , subscribe } , { path : '/subscriptions' , server } ) ; resolve ( server ) ; } ) ; } ) ; } ;