Hot reloaded Apollo server: Introduction

Photo by Dan Wayman on Unsplash

This is my first post on dev.to. For some time I wanted to build Apollo server with hot reload. Many attempts failed, but I recently found webpack plugin that helped me. In this short series, I will demonstrate that.

Init and clear package.json

npm init

After that, I cleaned up package.json and added .gitignore.

Install dependencies and create demo app

npm i apollo-server graphql

src/resolvers/index.js

export default {
  Query: {
    testMessage() {
      return "Hello World!";
    }
  }
};

src/typeDefs/index.js

import { gql } from "apollo-server";

export default gql`
  type Query {
    testMessage: String!
  }
`;

src/index.js

import { ApolloServer } from "apollo-server";

import resolvers from "./resolvers";
import typeDefs from "./typeDefs";

const server = new ApolloServer({ resolvers, typeDefs });

server.listen(process.env.GRAPHQL_PORT || 8080).then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

if (module.hot) {
  module.hot.accept();
  module.hot.dispose(() => {
    console.log("Module disposed");
  });
}

Production webpack config

Install dev dependencies:
npm i -D npm i -D webpack webpack-cli clean-webpack-plugin webpack-merge webpack-node-externals

webpack.common.js

const path = require("path");

module.exports = {
  output: {
    filename: "server.js",
    path: path.resolve(__dirname, "dist")
  },
  resolve: {
    extensions: [".js"]
  },
  target: "node"
};

webpack.production.js

const path = require("path");

const cleanWebpackPlugin = require("clean-webpack-plugin");
const merge = require("webpack-merge");
const nodeExternals = require("webpack-node-externals");

const common = require("./webpack.common");

module.exports = merge.smart(common, {
  devtool: "source-map",
  entry: [path.join(__dirname, "src/index.js")],
  externals: [nodeExternals({})],
  mode: "production",
  plugins: [new cleanWebpackPlugin.CleanWebpackPlugin()]
});

And finally add this script to package.json

"build": "webpack --config webpack.production.js",
"start": "node dist/server.js"

Test run

Next step is build app:
npm run build
and test run:
npm start

After that, you can open your browser at http://localhost:8080/ and try out this query:

query {
  testMessage
}

Next part

In the next part, I will dockerize app.

VojtechP / apollo-server-hot-reload-example

apollo-server-hot-reload-example

Example repo for hot reaload Apollo server in docker container used for dev.to posts part1 and part 2

View on GitHub

Comments

[Juliana Jaime 🎃]

Exactly what I was looking for, thanks for the guide!

[Adrian Darian]

A simple change that will decrease the amount of scripts to run post setup, would be to change the build script to a prestart which will execute when you run the start script and build your app for production. Thoughts?

[VojtechP]

The build is supposed to be used during a docker image building. So it must be separated.