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

#apollo #graphql #node #express

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!

Top comments (4)

hasusozam • Sep 21 '18

It's important to mention that apollo-server is a wrapper around apollo-server-express. You can see apollo-server as graphql-yoga (as it's a wrapper around apollo-server version 1). The difference is that apollo-server will help you create a GraphQL server with everything encapsulated for you, but if you want to add things like middlewares and other express things such as authentication and so on, you have to use some integration, such as apollo-server-express so you can use applyMiddleware. Older version of apollo-server would allow you to use applyMiddleware directly without the need to use apollo-server-express but not anymore. In resume: if you have already an express server, stick to apollo-server-express or if you want to use middlewares for your GraphQL server. If you only want a GraphQL server, just use apollo-server and you are good to go.
Unfortunately the constant changes in the API made this kind difficult to understand to a few people, now you know.