DEV Community

loading...
Cover image for Apollo-Server-Express 1.0 to 2.0: Fix 'graphiqlExpress and graphqlExpress is not a function'

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

Monique Dingding
Hi! I develop web and mobile apps.
・3 min read

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:

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

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

Without gql tag

With gql tag

Without 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

With bodyParser, graphiQlExpress, graphqlExpress

After

Without bodyParser, graphqlExpress, graphiQlExpress

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

With makeExecutableSchema

After

Without makeExecutableSchema

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

Without bodyParser, graphqlExpress, graphiQlExpress

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

Success

Happy coding!

Discussion (3)

Collapse
hasusozam profile image
hasusozam

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.

Collapse
joshmatthew profile image
Jay-Em

Saved my life thanks for this

Collapse
squarewave24 profile image
Raf

nice post.

i'd recommend not using screenshots for code snippets. it makes a lot of your post not accessible to search engines, among other problems.