GraphQL Express Apollo Server Setup

Express + GraphQL + Apollo + MongoDB + TypeScript

GraphQL provides a complete and understandable description of the data in your API, it gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

In this tutorial, we will create an express app with apollo integration. I will be using MongoDB Database you can use whatever you find suitable for your product.

Just wanna check out the code? Help yourself ☟

garganurag893/Next.js_GraphQL_Express_Apollo_Boilerplate

So, Let’s start by creating a new project directory :

mkdir example

Navigate to project directory and run command :

npm init

Dependencies

Now we will install all the dependencies mentioned below which are required for the basic setup:

• Bluebird:- To promisify all the Mongoose.
• Mongoose:- It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB.
• Express:- To set up the server.
• Apollo-Server-Express:- Apollo Server is a community-maintained open-source GraphQL server that works with many Node.js HTTP server frameworks.

yarn add express mongoose bluebird apollo-server apollo-server-express

Folder Structure

Make the following folder structure to house everything:

TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

yarn add typescript -D

The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project. A project is compiled in one of the following ways:

Using tsconfig :

• By invoking tsc with no input files, in which case the compiler searches for the tsconfig.json file starting in the current directory and continuing up the parent directory chain.
• By invoking tsc with no input files and a --project (or just -p) command line option that specifies the path of a directory containing a tsconfig.json file, or a path to a valid .json file containing the configurations.

tsconfig.json☟

Environment Setup

Before we start to code, we should set up the development environment.

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.

yarn add dotenv

config/index.ts☟

After setting up the environment, let's proceed by setting up the Schema.

GraphQL Schema

It is required by GraphQL as every GraphQL service defines a set of types that completely describe the set of possible data you can query on that service. Then, when queries come in, they are validated and executed against that Schema.

server/graphql/schema/index.ts ☟

Now to complete the GraphQL setup we have to add Resolvers.

GraphQL Resolvers

It provides the instructions for turning a GraphQL operation (a query, mutation, or subscription) into data. They either return the same type of data we specify in our schema or a promise for that data.

server/graphql/resolvers/index.ts ☟

server/graphql/resolvers/user.ts ☟

For the sake of time-saving, I created a function for transforming user return objects so that I can call it every time I need to return a user object.

const transformUser = user => {
 return {
   ...user._doc,
   _id: user.id,
   createdAt: dateToString(user._doc.createdAt),
   updatedAt: dateToString(user._doc.updatedAt)
 };
};

That's it the GrapgQL Setup is completed. Now its time to configure express to set up the server.

Express

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

config/express.ts☟

Now create a file index.js in the project directory where we will connect our database to the server.

index.ts☟

That’s it run the server and go live…..🚀

Visit the below link to learn about the Next.js Client Setup ☟

Next.js Apollo GraphQL Client Setup