Apollo-Server-Express 1.0 to 2.0: Fix 'graphiqlExpress and graphqlExpress is not a function'
Tags: apollo, express, graphql, node
Published: 2018-09-20 21:42:42

---
title: Apollo-Server-Express 1.0 to 2.0: Fix 'graphiqlExpress and graphqlExpress is not a function'
published: true
description: 
tags: apollo, express, graphql, node,
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ifzkjkd4yd2d5yn1rcvc.png
---

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?](https://www.youtube.com/watch?v=VjXb3PRL9WI) - by LevelUpTuts, discussing the fundamentals
* [REST vs GraphQL APIs, the Good, the Bad, the Ugly] (https://www.moesif.com/blog/technical/graphql/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](https://www.youtube.com/watch?v=PEcJxkylcRM&list=PLillGF-RfqbYZty73_PHBqKRDnv7ikh68) - by TraversyMedia, discussing concepts through application 
* [Integrating Apollo and Express to build a Node.js GraphQL API](https://medium.com/@xoor/coding-a-graphql-api-with-node-js-c02d617f49f4) - by Maximiliano Duthey, for structure and integration-specific code tutorial


I was following this great tutorial by [XOOR](https://medium.com/@xoor/coding-a-graphql-api-with-node-js-c02d617f49f4), when the end of the article I encountered an error in ApolloServer:

![graphqlExpress is not a function](https://thepracticaldev.s3.amazonaws.com/i/4h5yzl9928agur1s890a.png)

### `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](https://www.apollographql.com/docs/apollo-server/v2/migration-two-dot.html) and [here](https://medium.com/@jeffrey.allen.lewis/graphql-migrating-from-apollo-server-express-1-0-to-2-0-be80f5c61bee)).

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](https://thepracticaldev.s3.amazonaws.com/i/0rann01a249gq6ecvu51.png)

#### With `gql` tag
![Without gql tag](https://thepracticaldev.s3.amazonaws.com/i/2vv4exnh41orpqha6e18.png)

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](https://thepracticaldev.s3.amazonaws.com/i/dv1m9djfnziaqhsl9aua.png)

#### After
![Without bodyParser, graphqlExpress, graphiQlExpress](https://thepracticaldev.s3.amazonaws.com/i/w8azsx6ez2y8n9u4j7e9.png)


## 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](https://thepracticaldev.s3.amazonaws.com/i/my9pzc94z1n8ulgcs6pn.png)

#### After
![Without makeExecutableSchema](https://thepracticaldev.s3.amazonaws.com/i/styece248oa7crgv4dz8.png)

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

![Without bodyParser, graphqlExpress, graphiQlExpress](https://thepracticaldev.s3.amazonaws.com/i/yk6xn55d07uq6tyhdxqa.png)


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

![Success](https://thepracticaldev.s3.amazonaws.com/i/qzrp0hqcw7sas5xbizh7.png)


Happy coding!