⚡ Add a GraphQL Server to a RESTful Express.js API in 2 Minutes
You can get a lot done in 2 minutes, like microwaving popcorn, sending a text message, eating a cupcake, and hooking up a GraphQL server.
Yup. If you have an old Express.js RESTful API lying around or you're interested in incrementally adopting GraphQL, we only need 2 minutes to hook it up with a fresh new GraphQL Server.
Ready? Set. Go!
Let's say that your server looked something like the following.
import express from 'express';
import { apiRouter } from './router';
const app = express();
const port = process.env.PORT || 5000;
// Existing routes for our Express.js app
app.use('/api/v1', apiRouter);
app.listen(port, () => console.log(`[App]: Listening on port ${port}`))
At the root of your project, npm install
apollo-server-express as a dependency.
npm install apollo-server-express --save
Go to where your Express app is defined and import ApolloServer
and gql
from apollo-server-express
.
import { ApolloServer, gql } from 'apollo-server-express'
Next, create an instance of an ApolloServer
with the simplest possible GraphQL type definitions and resolvers.
const server = new ApolloServer({
typeDefs: gql`
type Query {
hello: String
}
`,
resolvers: {
Query: {
hello: () => 'Hello world!',
},
}
})
Lastly, use ApolloServer
's applyMiddleware method to pass in our Express.js server.
server.applyMiddleware({ app })
Boom. That's it!
Your code should look something like this.
import express from 'express';
import { v1Router } from './api/v1';
import { ApolloServer, gql } from 'apollo-server-express'
const app = express();
const port = process.env.PORT || 5000;
const server = new ApolloServer({
typeDefs: gql`
type Query {
hello: String
}
`,
resolvers: {
Query: {
hello: () => 'Hello world!',
},
}
})
server.applyMiddleware({ app })
app.use('/api/v1', v1Router);
app.listen(port, () => {
console.log(`[App]: Listening on port ${port}`)
})
If you navigate to localhost:5000/graphql
, you should be able to see your GraphQL schema in the GraphQL playground.
Note: If you want to change the URL that the GraphQL endpoint sits at from
/graphql
to something else, you can pass in apath
option toserver.applyMiddleware()
with the URL you want, likepath: '/specialUrl'
. Check out the docs for full API usage.
How simple was that? Is your popcorn finished? 😉
Summary
Here's what we did.
- Install
apollo-server-express
- Create a
new ApolloServer
- Connect your GraphQL Server with
server.applyMiddleware
I personally really love the fact that Apollo Server is non-intrusive and can be tacked on any project as an alternative way to communicate between services and applications.
Where to go from here
If you're new to Apollo and GraphQL, a great way to learn is to actually build something in real life. For that reason, I highly recommend checking out the Apollo Fullstack Tutorial (you can also learn in TypeScript now 🔥).
I'm Khalil Stemmler, a Developer Advocate at Apollo GraphQL. I teach advanced TypeScript, GraphQL, and Node.js best practices for large-scale applications. Feel free to ping me on Twitter if you need help with anything Apollo, TypeScript, or architecture-related. Cheers 🤠
Top comments (3)
But what's in the
./router
, my man?Scary, secret things... Just kidding.
Usually, my router is where I delegate chunks of the API off to appropriate sub-routers to then get more detailed with how things get done :)
I also usually version my REST APIs (like
v1Router
).You can see this code in the project it's from here, btw.
Appreciated ❤️