I've been building a MERN Stack Application for my final project at University and I wanted to use modern tools for it. At University We built a LAMP Stack Application and recently a simple MERN Stack application using built-in API fetch requests, https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch.

With this Project, I wanted to be curious and work with different tools. I suggest checking out the documentation here, https://www.apollographql.com/docs/apollo-server/migration/.

With Apollo Server, you have what's called the Apollo Stand Alone Server that uses default middleware settings. If you want more flexibility with CORS then we need to use the Apollo Express Server.

Apollo Express Server

Apollo Express Server has a built-in function called expressMiddleware. With this function, you can add cors and body-parser settings for more flexibility compared to the Stand Alone Server.

What to install

npm init
npm install @apollo/server/graphql
npm install express
npm install node
npm install mongoose
npm install cors
npm install bodyparser
npm install -D nodemon

Below is code for using JavaScript when making this server. I wrapped everything in an async function so I can use promises and await the connection of the server.

const mongoose = require("mongoose"); // database connection
const { ApolloServer } = require('@apollo/server');
const { expressMiddleware } = require('@apollo/server/express4');
const { ApolloServerPluginDrainHttpServer } = require('@apollo/server/plugin/drainHttpServer');
const express = require('express');
const http = require('http');
const cors = require('cors');
const bodyParser = require('body-parser');
const typeDefs = require("./typeDefs"); // add these files
const resolvers = require("./resolver"); // add these files
require('dotenv').config();

// I'm not using TypeScript with this project so in order to use promises, I wrapped the server in an async function for ease.
async function startServer(){
    const app = express();

    const httpServer = http.createServer(app);

    const server = new ApolloServer({
        typeDefs,
        resolvers,
        plugins:[ApolloServerPluginDrainHttpServer({httpServer})],
    });

    await server.start();

    app.use(
        '/graphql',
        cors(),
        bodyParser.json(),
        expressMiddleware(server),
    );


    await mongoose.connect(process.env.MONGODB_URI)
     console.log("Mongoose Connected...");
    await new Promise(
        (resolve) => httpServer.listen({port:process.env.PORT}, resolve)
       );

    console.log(`🚀 Server ready at http://localhost:4000/`);

 }

// start server with async function
startServer();

If you are using something different than Express Js, then Apollo-Server has multiple Integrations for your middleware. Please see Apollo Documentations for more information on connecting these.

• apollo-server-fastify

• apollo-server-hapi

• apollo-server-koa

• apollo-server-lambda

• apollo-server-micro

• apollo-server-cloud-functions

• apollo-server-cloudflare

• apollo-server-azure-functions

What's Next??

Plans are to show MongoDB connection and creation of your first GraphQL TypeDefs and Resolvers.