Apollo-Server-Express 1.0 to 2.0: Fix 'graphiqlExpress and graphqlExpress is not a function'

Today, I decided to dive into the GraphQL hype! (Maybe a few years too late - but it's alright. What's important is we never stop learning!)

"One Endpoint to Rule Them All"

The concept is fairly simple to understand. Unlike REST API where we consume different endpoints depending on the resource we need, in GraphQL you only need one for everything.

That's not enough details (I'm sure), so I am going to list a few resources that I have personally curated to help you jumpstart your weekend project:

• What is GraphQL? - by LevelUpTuts, discussing the fundamentals
• REST vs GraphQL APIs, the Good, the Bad, the Ugly - by Derric Gilling, an in-depth comparison between REST and GraphQL
• Building a GraphQL Server - by TraversyMedia, discussing concepts through application
• Integrating Apollo and Express to build a Node.js GraphQL API - by Maximiliano Duthey, for structure and integration-specific code tutorial

I was following this great tutorial by XOOR, when the end of the article I encountered an error in ApolloServer:

graphqlExpress is not a function

As of August 2018, ApolloServer has migrated from 1.0 to 2.0 with significant changes to the patterns and code (see here and here).

You can still follow through the tutorial without updating Apollo-Server-Express, with a few changes in the code, as follows:

1 Add gql tag in your schema

The gql tag is used for editor syntax highlighting and auto-formatting with Prettier.

The tutorial divides the language types in a schema directory, which is great for code maintainability, but it also means you have to include the tag per file (_input.js, _mutation.js, _query.js, _type.js, graphql/index.js).

Without gql tag

With gql tag

As you can see, the code is more readable as it is being autoformatted. By the way, I'm using Atom editor.

2 Remove bodyParser, graphqlExpress and graphiqlExpress

In v2.0, bodyParser is already included in the apollo-server-express, so you no longer need the body-parser package. Moreover, graphiqlExpress and graphiqlExpress are replaced by ApolloServer, which you can wrap as a middleware to app.

Before

After

3 Integrate ApolloServer

GraphiQLExpress and GraphQLExpress have been replaced by ApolloServer with the additional typeDefs and resolvers as parameters.

Replace makeExecutableSchema with ApolloServer, like so:

Before

After

Take note of the schema variable, as it is imported in graphql/index.js.

That's it! If you followed the instructions properly, the GraphQL Playground should show up in your specified endpoint.

Happy coding!