☄️ A minimalistic zero-config GraphQL server.
Alternatives To Graphpack
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Apollo Server13,2725,3261,153a day ago305August 26, 202239mitTypeScript
🌍  Spec-compliant and production ready JavaScript GraphQL server that lets you develop in a schema-first way. Built for Express, Connect, Hapi, Koa, and more.
Graphql Shield3,429
2 months ago89mitTypeScript
🛡 A GraphQL tool to ease the creation of permission layer.
Vulcain3,3582a month ago15October 14, 202122agpl-3.0Go
Fast and idiomatic client-driven REST APIs.
5 years ago36JavaScript
:hamburger: like meteor, but meatier :hamburger:
10 hours ago338mitPython
A GraphQL library for Python that leverages type annotations 🍓
Async Graphql2,773522 days ago386September 26, 202283apache-2.0Rust
A GraphQL server library implemented in Rust
Graphpack1,9921212 years ago14February 26, 201934mitJavaScript
☄️ A minimalistic zero-config GraphQL server.
Ariadne1,97710293 days ago34April 22, 202250bsd-3-clausePython
Python library for implementing GraphQL servers using schema-first approach.
4 months ago71November 18, 201741mitTypeScript
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Json Graphql Server1,8114053 months ago21August 24, 20228mitJavaScript
Get a full fake GraphQL API with zero coding in less than 30 seconds.
Alternatives To Graphpack
Select To Compare

Alternative Project Comparisons


☄️ A minimalistic zero-config GraphQL server

Check out the demo on CodeSandbox:

What is included?

Graphpack lets you create GraphQL servers with zero configuration. It uses webpack with nodemon and Apollo Server under the hood, so we get features like Live Reloading, GraphQL Playground, GraphQL Imports and many more right out of the box.

Install & Usage

yarn add --dev graphpack

Add src/schema.graphql and src/resolvers.js

├── resolvers.js
└── schema.graphql

In your schema, add some sample types in SDL:

type Query {
  hello: String

In src/resolvers.js:

const resolvers = {
  Query: {
    hello: () => 'world!',

export default resolvers;

Setup package.json run scripts

Add following scripts to your package.json:

  "scripts": {
    "dev": "graphpack",
    "build": "graphpack build"

Start development server

To start the development server, simply run:

yarn dev

Create production build

To create a production-ready build run following command:

yarn build

Use production build

Add following script that executes our build:

  "scripts": {
    "start": "node ./build/index.js"

The following command will run the build and start the app

yarn start

Make sure to create a build before running the start script.

CLI Commands

graphpack (alias graphpack dev)

Runs graphpack in development mode. After a successful build your output should look something like this:


Graphpack will watch for changes in your ./src folder and automatically reload the server.

graphpack build

Creates a production-ready build under the project roots build folder.

Entry files

src/resolvers.js (required)

In this file you define all your resolvers:

// src/resolvers.js
const resolvers = {
  Query: {
    article: (obj, args) => getArticleById(,
    articles: () => getArticles(),

export default resolvers;

You can use any of these folder/file structure:

  • src/resolvers.js
  • src/resolvers/index.js

src/schema.graphql (required)

Here you define all your GraphQL type definitions:

# src/schema.graphql
type Article {
  title: String
  body: String

type Query {
  article: Article
  articles: [Article!]!

Alternatively you can create a src/schema.js and use the template literal tag gql by graphql-tag:

// src/schema.js
import { gql } from 'graphql-tag';

const typeDefs = gql`
  type Article {
    title: String
    body: String

  type Query {
    article: Article
    articles: [Article!]!

export default typeDefs;

Note that in this case, you will need to install graphql-tag.

Graphpack can resolve both .js and .graphql files. This means you can use any of these folder/file structures:

  • src/schema.js
  • src/schema/index.js
  • src/schema.graphql
  • src/schema/index.graphql


Create src/context.js and do following:

const context = req => ({
  /* context props here */

export default context;

You can use any of these folder/file structures:

  • src/context.js
  • src/context/index.js

Custom configuration

For custom configuration you can create a graphpack config file in cosmiconfig format:

  • graphpack.config.js (recommended)
  • graphpack field in package.json
  • .graphpackrc in JSON or YAML
  • .graphpackrc with the extensions .json, .yaml, .yml, or .js

Note that the config file (eg. graphpack.config.js) is not going through babel transformation.

Customize Server configuration

In your graphpack.config.js configure your server as follows:

// graphpack.config.js
module.exports = {
  server: {
    introspection: false,
    playground: false,
    applyMiddleware: { app, path }, // app is from an existing (Express/Hapi,...) app

Return config as a function to get the env variable:

// graphpack.config.js

// `mode` will be either `development` or `production`
module.exports = (mode) => {
  const IS_DEV = mode !== 'production';

  server: {
    introspection: IS_DEV,
    playground: IS_DEV,
    mocks: IS_DEV,
    mocks: IS_DEV,
    // ...

export default config;

Refer to the Apollo Server docs for more details about the options.

Note that it's not possible to set resolvers, typeDefs or context in the config file. For this please refer to entry files.

Configure server port

Configure the server port with:

module.exports = {
  server: {
    port: 4000, // default,

Applying express middlewares to the server

In your graphpack.config.js add your applyMiddleware field as follows:

// graphpack.config.js
const express = require('express');

const app = express();

app.get('/hello', (req, res) => {
  res.send('Hello world!');

module.exports = {
  server: {
    applyMiddleware: {
      path: '/graphql', // default

Your GraphQL endpoint will be available under http://localhost:4000/graphql. To configure the server options refer to

Customize Webpack configuration

To extend webpack, you can define a function that extends its config via the config file:

// graphpack.config.js
module.exports = {
  webpack: ({ config, webpack }) => {
    // Add customizations to config
    // Important: return the modified config
    return config;

Customize Babel configuration

Add an optional babel.config.js to your project root with the following preset:

// babel.config.js
module.exports = api => {
  // Cache the returned value forever and don't call this function again

  return {
    presets: ['graphpack/babel'],
    // ... Add your plugins and custom config


Graphpack was heavily inspired by:

Thanks to @richardbmx for designing the logo! 🙌


This project exists thanks to all the people who contribute. contributors


Thank you to all our backers! 🙏 [Become a backer]


Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]



Popular Server Projects
Popular Graphql Projects
Popular Networking Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.