Repository files navigation

Graphpack lets you create GraphQL serverswith zero configuration. It useswebpack withnodemon andApollo Server under the hood, so we get features like Live Reloading, GraphQL Playground, GraphQL Imports and many more right out of the box.

• 📦Zero-config out of the box
• 🚦 Built-inLive reload
• 🚨 Super-friendly error messages
• 🎮GraphQL Playground IDE
• ⭐️GraphQL imports in Schema Definition Language
• 🔥Blazing fast bundle times
• ⚡️ES module imports and dynamicimport()'s thanks toBabel

yarn add --dev graphpack

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

In your schema and add some sample types inSDL:

typeQuery {hello:String}

Insrc/resolvers.js:

constresolvers={Query:{hello:()=>'world!',},};exportdefaultresolvers;

Add following scripts to yourpackage.json:

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

To start the development server, simply run:

yarn dev

To create a production ready build run following command:

yarn build

Add following script that executes our build:

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

Following command will run the build and start the app

yarn start

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

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 reloads the server.

Creates a production ready build under the project rootsbuild folder.

Make sure to runyarn build before.

In this file you define all your resolvers:

// src/resolvers.jsconstresolvers={Query:{article:(obj,args)=>getArticleById(args.id),articles:()=>getArticles(),},};exportdefaultresolvers;

You can use any of these folder/file structure:

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

Here you define all your GraphQL type definitions:

# src/schema.graphqltypeArticle {title:Stringbody:String}typeQuery {article:Articlearticles: [Article!]!}

Alternatively you can create asrc/schema.js and use the template literal taggql bygraphql-tag:

// src/schema.jsimport{gql}from'graphql-tag';consttypeDefs=gql`  type Article {    title: String    body: String  }  type Query {    article: Article    articles: [Article!]!  }`;exportdefaulttypeDefs;

Note that you need installgraphql-tag in this case.

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

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

Createsrc/context.js and do following:

constcontext=req=>({/* context props here */});exportdefaultcontext;

You can use any of these folder/file structure:

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

Insrc/config.js you can set further options of your Apollo Server. Refer to theApollo Server docs for more details about the options.

// src/config.jsconstIS_DEV=process.env.NODE_ENV!=='production';constconfig={debug:process.env.DEBUG,playground:IS_DEV,introspection:IS_DEV,mocks:IS_DEV,// ...};exportdefaultconfig;

Note that you cannot to setresolvers,typeDefs orcontext in the config file. In these cases please refer toentry files.

You can use any of these folder/file structure:

• src/config.js
• src/config/index.js

For custom configuration you can create agraphpack config file incosmiconfig format:

• graphpack.config.js
• graphpack field inpackage.json
• .graphpackrc in JSON or YAML
• .graphpackrc with the extensions.json,.yaml,.yml, or.js

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

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

Add an optionalbabel.config.js to your project root with the following preset

// babel.config.jsmodule.exports=api=>{// Cache the returned value forever and don't call this function againapi.cache(true);return{presets:['graphpack/babel'],// ... Add your plugins and custom config};};

Note that this file is not going through babel transformation.

Graphpack was heavily inspired by:

• backpack

MIT