GraphQL: Migrating From Apollo-Server-Express 1.0 To 2.0

By Jeff Lewis

What Is Apollo-Server/Apollo-Server-Express?

If you’ve been diving into GraphQL, you probably have heard the name Apollo at some point. Apollo-Server-Express is a package to build a GraphQL Server. GraphQL is a server query language developed by Facebook and released in 2015. Other GraphQL Server frameworks include Graphql-Yoga, Prisma, and even the team over at Facebook’s GraphQL-Express. I actually started off using Facebook’s GraphQL-Express since the majority of tutorials I watched had used it. I then eventually migrated to Apollo-Server-Express 1 and now here I am with the big 2.0.

Both Apollo-Server and Apollo-Server-2 can be used as standalone a server, addon to a Node.js server, or integrated with a “serverless” environment such as AWS Lambda. Apollo-Server-Express also requires a frontend component to query the GraphQL server such as Apollo-Client or Apollo-Boost.

What’s The Difference?

1. MakeExecutableSchema Has Been Replaced

MakeExecutableSchema has been replaced with the ApolloServer constructor function. MakeExecutableSchema was an additonal import on top of Apollo-Server-Express 1.4.0. through the Graphql-Tools package.

2. Body-Parser Is Baked In

Version 2.0.0 doesn’t require importing the Body-Parser package, so if not needed elsewhere, you can uninstall it.

3. Graphql-Express Is Baked In

Graphql-Express created an HTTP server, but that code has been baked in to Apollo-Server-Express, allowing for less code to setup.

4. Server Setup

If you recently upgraded your Apollo-Server-Express from version 1.4.0 to 2.0.0 without updating your Express server file, you probably received this errror in your Terminal:

APP.use('/graphql', _bodyParser2.default.json(), (0, _apolloServerExpress.graphqlExpress)({ schema: _schema2.default }));

^ TypeError: (0 , _apolloServerExpress.graphqlExpress) is not a function

Don’t worry, your code is fine and it just needs to be updated. Below is how to update your existing 1.4.0 Apollo-Server-Express code to 2.0.0. The file names will be listed at the top of each code block and the differences will be highlighted in bold.

Note: I prefer my code to be modularized, so I have the code distributed between the following four files: server.js, schema.js, types.js, and resolvers.js. Additionally, these examples are using the ES6 import/export.

Server.js (Express Server 1.4.0):

// Imports: Express

import express from 'express';

const APP = express(); // Imports: GraphQL

import { graphqlExpress, graphiqlExpress } from 'apollo-server-express';

import SCHEMA from './graphql/schema.js'; // Imports: Middleware

import bodyParser from 'body-parser'; // Middleware: GraphQL

APP.use(

'/graphql',

bodyParser.json(),

graphqlExpress({ schema: SCHEMA })

); // Middleware: Graphiql Visualizer

APP.use(

'/graphiql',

graphiqlExpress({ endpointURL: `/graphql` })

); // Express: Port

const PORT = 4000 || process.env; // Express: Listener

APP.listen(PORT, () => {

console.log(`The server has started on port: ${PORT}`);

console.log(`http://localhost:${PORT}/graphql`);

}); // Exports

export default APP;

Server.js (Express Server 2.0.0):

// Imports: Express

import express from 'express';

const APP = express(); // Imports: GraphQL

import SERVER from './graphql/schema.js'; // Middleware: GraphQL

SERVER.applyMiddleware({

app: APP

}); // Express: Port

const PORT = 4000 || process.env; // Express: Listener

APP.listen(PORT, () => {

console.log(`The server has started on port: ${PORT}`);

console.log(`http://localhost:${PORT}/graphql`);

}); // Exports

export default APP;

Schema.js (Express Server 1.4.0):

// Imports: GraphQL

import { makeExecutableSchema } from 'graphql-tools'; // Imports: GraphQL TypeDefs & Resolvers import TYPEDEFS from './types.js';

import RESOLVERS from './resolvers.js'; // GraphQL: Schema

const SCHEMA = makeExecutableSchema({

typeDefs: TYPEDEFS,

resolvers: RESOLVERS

}); // Exports

export default SCHEMA;

Schema.js (Express Server 2.0.0):

// Imports: GraphQL

import { ApolloServer } from 'apollo-server-express'; // Imports: GraphQL TypeDefs & Resolvers

import TYPEDEFS from './types.js';

import RESOLVERS from './resolvers.js'; // GraphQL: Schema

const SERVER = new ApolloServer({

typeDefs: TYPEDEFS,

resolvers: RESOLVERS,

playground: {

endpoint: `http://localhost:4000/graphql`,

settings: {

'editor.theme': 'light'

}

}

}); // Exports

export default SERVER;

Types.js (Express Server 1.4.0):

// GraphQL: TypeDefs

const TYPEDEFS = `

type Query {

test_query: Test

} type Test {

test_field_1: String

test_field_2: Int

test_field_3: Boolean

}

`; // Exports

export default TYPEDEFS;

Types.js (Express Server 2.0.0):

// Imports: GraphQL

import { gql } from 'apollo-server-express'; // GraphQL: TypeDefs

const TYPEDEFS = gql` type Query {

test_query: Test

} type Test {

test_field_1: String

test_field_2: Int

test_field_3: Boolean

}

`; // Exports

export default TYPEDEFS;

Resolvers.js (Not Changed Between Versions):

// Imports: Axios

import axios from 'axios'; // GraphQL: Resolvers

const RESOLVERS = {

Query: {

test_query: (parent, args) => {

return axios.get(`www.apiurl.com/people`)

.then((response) => response.data)

.catch((error) => console.log(error))

}

}

}; // Exports

export default RESOLVERS;

5. GraphiQLExpress Has Been Replaced

If you take a look at the schema.js file below, the playground object is the GraphiQL replacement.

// GraphQL: Schema

const SERVER = new ApolloServer({

typeDefs: TYPEDEFS,

resolvers: RESOLVERS,

playground: {

endpoint: `http://localhost:4000/graphql`,

settings: {

'editor.theme': 'light'

}

}

});

GraphQL Playground has more features and was built on top of GraphiQL, share the same core features. Here are a few reasons why GraphQL Playground is superior:

GraphQL Playground includes is automatic schema reload. As you work on the project, schema changes are introduced while GraphiQL session, breaking your queries. GraphQL Playground can automatically reload your schema when any change is made to your project.

GraphQL Playground also allows you to share a Playground with developers on GraphQL Bin (Think about it like Pastebin for GraphQL queries).

GraphQL Playground allows you to browse your schema using the keyboard and view multiple schema navigation columns. GraphiQL provides only one schema navigation column, so the scope of what you can see is one step forward and one step back. On the contrary, GraphQL Playground allows you to have three schema navigation columns or three steps forward and three steps back.

It’s Now Your Turn To Serve

And that’s it! You now know how to migrate your application using Apollo Server from version 1.X to 2.X.

No one’s perfect. If you’ve found any errors, want to suggest enhancements, or expand on a topic, please feel free to send me a message. I will be sure to include any enhancements or correct any issues.