{"id":13452059,"url":"https://github.com/glennreyes/graphpack","last_synced_at":"2025-05-15T03:06:01.360Z","repository":{"id":46944575,"uuid":"140535486","full_name":"glennreyes/graphpack","owner":"glennreyes","description":"☄️ A minimalistic zero-config GraphQL server.","archived":false,"fork":false,"pushed_at":"2021-09-20T23:06:10.000Z","size":3142,"stargazers_count":1984,"open_issues_count":35,"forks_count":79,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-04-30T21:07:31.991Z","etag":null,"topics":["babel","graphql","javascript","node","webpack"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/k3qrkl8qlv","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/glennreyes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["glennreyes"],"patreon":"glennreyes","open_collective":"graphpack","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2018-07-11T07:06:29.000Z","updated_at":"2025-04-24T08:11:54.000Z","dependencies_parsed_at":"2022-09-05T05:20:20.563Z","dependency_job_id":null,"html_url":"https://github.com/glennreyes/graphpack","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glennreyes%2Fgraphpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glennreyes%2Fgraphpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glennreyes%2Fgraphpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glennreyes%2Fgraphpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glennreyes","download_url":"https://codeload.github.com/glennreyes/graphpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251946237,"owners_count":21669434,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","graphql","javascript","node","webpack"],"created_at":"2024-07-31T07:01:11.545Z","updated_at":"2025-05-15T03:06:01.329Z","avatar_url":"https://github.com/glennreyes.png","language":"JavaScript","readme":"![Graphpack](https://user-images.githubusercontent.com/5080854/47752201-1dead580-dc94-11e8-8028-580207f85feb.png)\n\n\u003cdiv align=\"center\"\u003e\n\n☄️ A minimalistic zero-config GraphQL server\n\nCheck out the demo on CodeSandbox: https://codesandbox.io/s/k3qrkl8qlv\n\n\u003c/div\u003e\n\n\u003chr\u003e\n\n## What is included?\n\nGraphpack lets you create GraphQL servers _with zero configuration_. It uses [`webpack`](https://github.com/webpack/webpack) with [`nodemon`](https://github.com/remy/nodemon) and [`Apollo Server`](https://github.com/apollographql/apollo-server) under the hood, so we get features like Live Reloading, GraphQL Playground, GraphQL Imports and many more right out of the box.\n\n- 📦 **Zero-config** out of the box\n- 🚦 Built-in **Live reload**\n- 🚨 Super-friendly error messages\n- 🎮 [**GraphQL Playground**](https://github.com/prisma/graphql-playground) IDE\n- ⭐️ [**GraphQL imports**](https://github.com/prisma/graphql-import) in Schema Definition Language\n- 💖 [**TypeScript**](https://www.typescriptlang.org/) support\n- 🔥 [**Blazing fast**](https://twitter.com/acdlite/status/974390255393505280) bundle times\n- ⚡️ **ES module imports** and dynamic `import()`'s thanks to [Babel](https://github.com/babel/babel)\n\n## Install \u0026 Usage\n\n```\nyarn add --dev graphpack\n```\n\n### Add `src/schema.graphql` and `src/resolvers.js`\n\n```\nsrc\n├── resolvers.js\n└── schema.graphql\n```\n\nIn your schema, add some sample types in [SDL](https://graphql.org/learn/schema/#type-language):\n\n```graphql\ntype Query {\n  hello: String\n}\n```\n\nIn `src/resolvers.js`:\n\n```js\nconst resolvers = {\n  Query: {\n    hello: () =\u003e 'world!',\n  },\n};\n\nexport default resolvers;\n```\n\n### Setup `package.json` run scripts\n\nAdd following scripts to your `package.json`:\n\n```json\n  \"scripts\": {\n    \"dev\": \"graphpack\",\n    \"build\": \"graphpack build\"\n  },\n```\n\n### Start development server\n\nTo start the development server, simply run:\n\n```sh\nyarn dev\n```\n\n### Create production build\n\nTo create a production-ready build run following command:\n\n```sh\nyarn build\n```\n\n### Use production build\n\nAdd following script that executes our build:\n\n```json\n  \"scripts\": {\n    \"start\": \"node ./build/index.js\"\n  },\n```\n\nThe following command will run the build and start the app\n\n```sh\nyarn start\n```\n\n\u003e Make sure to create a build before running the start script.\n\n## CLI Commands\n\n### `graphpack` (alias `graphpack dev`)\n\nRuns graphpack in development mode. After a successful build your output should look something like this:\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/5080854/47042315-3e426c80-d18b-11e8-941e-e193a339e3ee.png\" width=\"520\" alt=\"Graphpack\"\u003e\n\u003c/div\u003e\n\nGraphpack will watch for changes in your `./src` folder and automatically reload the server.\n\n### `graphpack build`\n\nCreates a production-ready build under the project roots `build` folder.\n\n## Entry files\n\n### `src/resolvers.js` (required)\n\nIn this file you define all your resolvers:\n\n```js\n// src/resolvers.js\nconst resolvers = {\n  Query: {\n    article: (obj, args) =\u003e getArticleById(args.id),\n    articles: () =\u003e getArticles(),\n  },\n};\n\nexport default resolvers;\n```\n\n\u003e You can use any of these folder/file structure:\n\u003e\n\u003e - `src/resolvers.js`\n\u003e - `src/resolvers/index.js`\n\n### `src/schema.graphql` (required)\n\nHere you define all your GraphQL type definitions:\n\n```graphql\n# src/schema.graphql\ntype Article {\n  title: String\n  body: String\n}\n\ntype Query {\n  article: Article\n  articles: [Article!]!\n}\n```\n\nAlternatively you can create a `src/schema.js` and use the template literal tag `gql` by [`graphql-tag`](https://github.com/apollographql/graphql-tag):\n\n```js\n// src/schema.js\nimport { gql } from 'graphql-tag';\n\nconst typeDefs = gql`\n  type Article {\n    title: String\n    body: String\n  }\n\n  type Query {\n    article: Article\n    articles: [Article!]!\n  }\n`;\n\nexport default typeDefs;\n```\n\nNote that in this case, you will need to install `graphql-tag`.\n\n\u003e Graphpack can resolve both `.js` and `.graphql` files. This means you can use any of these folder/file structures:\n\u003e\n\u003e - `src/schema.js`\n\u003e - `src/schema/index.js`\n\u003e - `src/schema.graphql`\n\u003e - `src/schema/index.graphql`\n\n### `src/context.js`\n\nCreate `src/context.js` and do following:\n\n```js\nconst context = req =\u003e ({\n  /* context props here */\n});\n\nexport default context;\n```\n\n\u003e You can use any of these folder/file structures:\n\u003e\n\u003e - `src/context.js`\n\u003e - `src/context/index.js`\n\n## Custom configuration\n\nFor custom configuration you can create a `graphpack` config file in [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) format:\n\n- `graphpack.config.js` (recommended)\n- `graphpack` field in `package.json`\n- `.graphpackrc` in JSON or YAML\n- `.graphpackrc` with the extensions `.json`, `.yaml`, `.yml`, or `.js`\n\n\u003e Note that the config file (eg. graphpack.config.js) is not going through babel transformation.\n\n### Customize Server configuration\n\nIn your `graphpack.config.js` configure your server as follows:\n\n```js\n// graphpack.config.js\nmodule.exports = {\n  server: {\n    introspection: false,\n    playground: false,\n    applyMiddleware: { app, path }, // app is from an existing (Express/Hapi,...) app\n  },\n};\n```\n\nReturn config as a function to get the env variable:\n\n```js\n// graphpack.config.js\n\n// `mode` will be either `development` or `production`\nmodule.exports = (mode) =\u003e {\n  const IS_DEV = mode !== 'production';\n\n  server: {\n    introspection: IS_DEV,\n    playground: IS_DEV,\n    mocks: IS_DEV,\n    mocks: IS_DEV,\n    // ...\n  }\n};\n\nexport default config;\n```\n\nRefer to the [Apollo Server docs](https://www.apollographql.com/docs/apollo-server/api/apollo-server.html#constructor-options-lt-ApolloServer-gt) for more details about the options.\n\n\u003e Note that it's not possible to set `resolvers`, `typeDefs` or `context` in the config file. For this please refer to [entry files](#entry-files).\n\n#### Configure server port\n\nConfigure the server port with:\n\n```js\nmodule.exports = {\n  server: {\n    port: 4000, // default,\n  },\n};\n```\n\n#### Applying express middlewares to the server\n\nIn your `graphpack.config.js` add your applyMiddleware field as follows:\n\n```js\n// graphpack.config.js\nconst express = require('express');\n\nconst app = express();\n\napp.get('/hello', (req, res) =\u003e {\n  res.send('Hello world!');\n});\n\nmodule.exports = {\n  server: {\n    applyMiddleware: {\n      app,\n      path: '/graphql', // default\n    },\n  },\n};\n```\n\nYour GraphQL endpoint will be available under `http://localhost:4000/graphql`. To configure the server options refer to https://www.apollographql.com/docs/apollo-server/api/apollo-server.html#ApolloServer-applyMiddleware\n\n### Customize Webpack configuration\n\nTo extend webpack, you can define a function that extends its config via the config file:\n\n```js\n// graphpack.config.js\nmodule.exports = {\n  webpack: ({ config, webpack }) =\u003e {\n    // Add customizations to config\n    // Important: return the modified config\n    return config;\n  },\n};\n```\n\n### Customize Babel configuration\n\nAdd an optional `babel.config.js` to your project root with the following preset:\n\n```js\n// babel.config.js\nmodule.exports = api =\u003e {\n  // Cache the returned value forever and don't call this function again\n  api.cache(true);\n\n  return {\n    presets: ['graphpack/babel'],\n    // ... Add your plugins and custom config\n  };\n};\n```\n\n## Acknowledgements\n\nGraphpack was heavily inspired by:\n\n- [backpack](https://github.com/jaredpalmer/backpack)\n- [create-react-app](https://github.com/facebook/create-react-app)\n- [next.js](https://github.com/zeit/next.js)\n\nThanks to [@richardbmx](https://github.com/richardbmx) for designing the [logo](https://figma.com/file/XyKbNTDI9lwoJNr91l91bQ7C/Graphpack)! 🙌\n\n## Contributors\n\nThis project exists thanks to all the people who contribute.\n\u003ca href=\"https://github.com/glennreyes/graphpack/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/graphpack/contributors.svg?width=890\" title=\"contributors\" alt=\"contributors\" /\u003e\u003c/a\u003e\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/graphpack#backer)]\n\n\u003ca href=\"https://opencollective.com/graphpack#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/graphpack/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/graphpack#sponsor)]\n\n\u003ca href=\"https://opencollective.com/graphpack/sponsor/0/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/graphpack/sponsor/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/graphpack/sponsor/1/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/graphpack/sponsor/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/graphpack/sponsor/2/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/graphpack/sponsor/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/graphpack/sponsor/3/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/graphpack/sponsor/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/graphpack/sponsor/4/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/graphpack/sponsor/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/graphpack/sponsor/5/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/graphpack/sponsor/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/graphpack/sponsor/6/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/graphpack/sponsor/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/graphpack/sponsor/7/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/graphpack/sponsor/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/graphpack/sponsor/8/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/graphpack/sponsor/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/graphpack/sponsor/9/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/graphpack/sponsor/9/avatar.svg\"\u003e\u003c/a\u003e\n\n## License\n\nMIT\n","funding_links":["https://github.com/sponsors/glennreyes","https://patreon.com/glennreyes","https://opencollective.com/graphpack"],"categories":["JavaScript","GraphQL"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglennreyes%2Fgraphpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglennreyes%2Fgraphpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglennreyes%2Fgraphpack/lists"}