Polka with Sapper and Apollo-server-express

[ansarizafar]

I am trying to use graphql apollo-server-express with Sapper-template but I am getting 404 page it seems sapper is not allowing to add a route. Here is my code.

  graphQLServer.applyMiddleware({app, path:'/graphql'}); // app is from polka

Rich said on disord that it could be related to the way Polka runs middleware in a different order. Try using Express

@lukeed do you have any idea how to solve this issue.

[lukeed]

I don't use GQL but it's probably expecting app to be the handler function. Try this

const server = polka();
graphQLServer.applyMiddleware({
  app: server.handler,
  path: '/graphql'
});

[ansarizafar]

Apollo-server-express with Poka is working fine with the above code but If used with Sapper, we get 404 page. If we even define a simple route before Sapper middleware, we still get 404 page

server.get('/hello', (req,res) => {
	res.end('Hello World!')
})

[lukeed]

Please post bare minimum reproduction or a larger snippet. I need more contacts to see what's going on. Thanks!

[ansarizafar]

Here is the complete code of app/server.js from Sapper template. Both routes (/hello, /graphql) showing 404 page and If I remove sapper middleware then both routes work fine. Same template code (Both routes with sapper middleware) is working fine with Expressjs. It seems its Polka specific issue.

import sirv from 'sirv';
import polka from 'polka';
import sapper from 'sapper';
import compression from 'compression';
import { manifest } from './manifest/server.js';

import { ApolloServer, gql } from 'apollo-server-express';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

const server = polka() // You can also use Express

 // The GraphQL schema
 const typeDefs = gql`
 type Query {
   "A simple type for getting started!"
   hello: String
 }
`;

// A map of functions which return data for the schema.
const resolvers = {
 Query: {
   hello: () => 'world'
 }
};

const graphQLServer = new ApolloServer({
   // These will be defined for both new or existing servers
   typeDefs,
   resolvers,
 });
 graphQLServer.applyMiddleware({app: server, path:'/graphql'}); // app is from an existing express app

server.get('/hello', (req,res) => {
	res.end('Hellow World!')
})
	server.use(
		compression({ threshold: 0 }),
		sirv('assets', { dev }),
		sapper({ manifest })
	)
	.listen(PORT)
	.catch(err => {
		console.log('error', err);
	})

[lukeed]

Thanks! That helps

Looks like you can add this in:

sapper({ ignore: '/graphql', manifest })

You can see this PR for more info :: sveltejs/sapper#326

[ansarizafar]

Its working now with ignore option. Thanks for the help.

[lukeed]

Awesome! 🙌