https://www.prisma.io/ logo
Join SlackCommunities
Powered by
Hey, i'm using GraphQLServer and just trying to ha...
# orm-help
j
Hey, i'm using GraphQLServer and just trying to have socket-io listen on the same port. You can see my server/index.js and server.js here https://gist.github.com/baconcheese113/edbc738379a53792dd3cce0f4c8ad5ba#file-server-index-js According to this post it seems like it's very easy with express + socket-io https://stackoverflow.com/questions/12235406/how-to-use-expressjs-and-socket-io-on-a-same-port Any idea how i can do this with GraphQLServer or do I need to switch to ApolloServer? This question is here as well now https://stackoverflow.com/questions/56159532/graphqlserver-socket-io-on-same-port
snippet.js
h
You will need to use apollo-server-express. https://github.com/apollographql/apollo-server/tree/master/packages/apollo-server-express Using this you can get access to the express object and you can add that IO middleware youself
j
Thanks for the response! How would I "add the IO middleware"? And in a way that cors doesn't block?
h
I think ws calls are separate so I don't think CORS will have an issue with that
I haven't used socket.io in years now 😅 . I am using graphql subscriptions for the most part
j
Ah yea, socket-io is for my webrtc and messaging functionality 🙂 Since GraphQLServer exposes express as 
GraphQLServer.express
I was figuring there'd be a way to use it (assuming it's possible to use socket with middleware)?
h
you are using apollo server or graphql yoga? In apollo server there is no way to access the express object so you will need to use apollo-server-express
j
graphql-yoga I'm currently getting a 404 from the request by swapping out the 
http.listen()
for
Copy code
const http = require('http').Server(server.express);
const io = require('<http://socket.io|socket.io>')(http);
require('./socket')(io);

server.express.use(
  cors({
    credentials: true,
    origin: '<http://localhost:3000>'
  })
);
server.express.use((req, res, next) => {
  <http://res.io|res.io> = io;
  console.log(io);
  next();
});
....
server.start(/*cors and port specification*/)
h
Well I will recommend you to use apollo-server-express in this case now. You can get access to raw express object using that
j
Does apollo-server-express support these if I'm not using graphql-yoga?
Copy code
import { GraphQLServer, PubSub } from 'graphql-yoga';
import {resolvers, fragmentReplacements} from './resolvers/index'
import prisma from './prisma'
 
const pubsub = new PubSub()

export default new GraphQLServer({
  typeDefs: './src/schema.graphql',
  resolvers,
  context(request) {
    return {
      pubsub,
      prisma,
      request, //fragmentReplacements[], request, response
    }
  },
  fragmentReplacements,
  debug: true,
});
h
yes
j
Thanks, i'll give it a shot and let you know!
h
just use graphql-import
it doesnt support raw graphql files
j
Okay, i've read through, do I need apollo-server or apollo-server-express? Also it looks like i need graphql-import and can uninstall graphql-yoga. Would I use 
pubsub
implementation from apollo-server or apollo-server-express?
h
Apollo-server-express
No need to install apollo-server
🙏 1
j
Okay, i noticed some differences with the way he generated schema. Does this before/after look correct, and does most of the apollo-server documentation apply to -express as well?
Before
Copy code
import { GraphQLServer, PubSub } from 'graphql-yoga';
import { resolvers, fragmentReplacements } from './resolvers/index';
import prisma from './prisma';

const pubsub = new PubSub();

export default new GraphQLServer({
  typeDefs: './src/schema.graphql',
  resolvers,
  context(request) {
    return {
      pubsub,
      prisma,
      request //fragmentReplacements[], request, response
    };
  },
  fragmentReplacements,
  debug: true
});
After
Copy code
import { ApolloServer, PubSub } from 'apollo-server-express';
import { resolvers, fragmentReplacements } from './resolvers/index';
import { importSchema } from 'graphql-import'
import prisma from './prisma';

const pubsub = new PubSub();

export default new ApolloServer({
  typeDefs: importSchema('./src/schema.graphql'),
  resolvers,
  context: (request) => ({
    pubsub,
    prisma,
    request,
  }),
  fragmentReplacements,
  debug: true,
})
Hmm, can't get graphql to serve responses correctly now 🤔 404 on my POST req's
Copy code
import server from './server'; // ApolloServer
import express from 'express';

const app = express();
server.applyMiddleware({ app });
const http = require('http').createServer(app);
const io = require('<http://socket.io|socket.io>')(http);
io.listen(http);

app.use(
  cors({
    credentials: true,
    origin: '<http://localhost:3000>'
  })
);

app.listen({ port: 4000 }, () => console.log('Server up on port 4000'));
h
That's weird, you configuration looks correct to me
j
OKAY, got it working in dev all on the same port 😄! Configuration turned out to be correct, but the request passed through was changed to 
{req, res}
instead of 
{request, response}
7 Views
Open in Slack
PreviousNext
Powered by