If you think that setting up a GraphQL server is a difficult task, [GraphQL Boilerplates ](https://github.com/graphql-boilerplates) Github repo will prove you that you're very wrong.

The best thing about GraphQL is that is can be used with any technology. Let's take a look at starter projects for most popular web technologies, provided by one of [the finest GraphQL devs](https://github.com/orgs/graphql-boilerplates/people). Now first off, let's take a look at [TypeScript](https://www.typescriptlang.org/).

### **TypeScript-graphql-server**

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript, which popularity constantly rising. The TypeScript Boilerplate repo contains two starter kits:

* [Basic](https://github.com/graphql-boilerplates/typescript-graphql-server/tree/master/basic)
* [Advanced](https://github.com/graphql-boilerplates/typescript-graphql-server/tree/master/advanced)

Both allowing to bootstrap your GraphQL server with TypeScript within seconds. No matter if you need a [Basic option](https://github.com/graphql-boilerplates/typescript-graphql-server/tree/master/basic) for a simple personal project or [Advanced boilerplate](https://github.com/graphql-boilerplates/typescript-graphql-server/tree/master/advanced) with more features you are getting scalable, production-ready GraphQL server.

All projects are based on `graphql-yoga`, a GraphQL server library focused on providing the easiest possible setup.

Let's take a look at features available in those versions:

|                                                                                                            | [Basic](https://github.com/graphql-boilerplates/typescript-graphql-server/tree/master/basic) | [Advanced](https://github.com/graphql-boilerplates/typescript-graphql-server/tree/master/advanced) |
| ---------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------: |
| **Scalable GraphQL server:** The server uses graphql-yoga which is based on Apollo Server & Express        |                                              ✔️                                              |                                                 ✔️                                                 |
| **Static type generation:** TypeScript types for GraphQL queries & mutations are generated in a build step |                                              ✔️                                              |                                                 ✔️                                                 |
| **GraphQL database:** Includes GraphQL database binding to Prisma (running on MySQL)                       |                                              ✔️                                              |                                                 ✔️                                                 |
| **Tooling:** Out-of-the-box support for [GraphQL Playground](/graphql-playground) & query performance tracing                     |                                              ✔️                                              |                                                 ✔️                                                 |
| **Extensible:** Simple and flexible data model – easy to adjust and extend                                 |                                              ✔️                                              |                                                 ✔️                                                 |
| **No configuration overhead:** Preconfigured graphql-config setup                                          |                                              ✔️                                              |                                                 ✔️                                                 |
| **Realtime updates:** Support for GraphQL subscriptions                                                    |                                               ❌                                              |                                                 ✔️                                                 |
| **Authentication:** Signup and login workflows are ready to use for your users                             |                                               ❌                                              |                                                 ✔️                                                 |

The setup is the same for both versions:
![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/setup-1730817488193.webp)
and our project structure will look like this:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/project-1730817499766.webp)

##### Source: [Graphql-boilerplates](https://github.com/graphql-boilerplates/typescript-graphql-server)

GraphQL Server under 5 minutes - TypeScript

[GraphQL](https://graphqleditor.com/) is a hot technology. Its recent rise created a niche for multiple tools, like [GraphQL Code Generator](https://the-guild.dev/graphql/codegen), having one thing in common - making using GraphQL easier & more pleasant experience.

GraphQL Code Generator is a tool that generates code out of your GraphQL schema. How? By analyzing the GraphQL schema & documents and parsing it, then GraphQL Code Generator outputs code at a wide variety of formats.

The creators currently support & maintain plugins for:

* TypeScript
* Flow
* React
* Angular
* MongoDB
* Stencil
* Reason

GraphQL Code Generator let you choose the output that you need, based on available plugins,  which can also be easily customized. As it 100% open-source you can write your own plugins to generate custom outputs that you need.

I got your attentiopn?  Good, now go try it out online:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/gqlcodegen.webp)

or just explore its [GitHub repo](https://github.com/dotansimha/graphql-code-generator) if that's what you prefer.

GraphQL Code Generator

[The stage of Javascript 2018 Survey](https://2018.stateofjs.com) was completed by 20k users and contains an analysis of what aspects people like & dislike about web technologies. I found React & GraphQL interesting since they're completing each other and stand out from surveys conclusions:

> React is the most popular among front end frameworks.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/react.webp)

> GraphQL is the top most wanted technology to learn.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/graphql.webp)

Following that, I've combined popular boilerplates and starter apps to start using React with GraphQL. There's so much stuff on the internet that I've decided to split article two articles.

## Agenda:

1. ReactQL
2. SaaS Boilerplate
3. React apollo todo app
4. Universal React Apollo app
5. Relay Skeleton

### [1. ReactQL](https://reactql.js.org/)

\###Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/reactql.webp)

#### Front-end stack

* [React v16.8](https://react.dev/) (the one with [hooks](https://legacy.reactjs.org/docs/hooks-intro.html)!) for UI.
* [Apollo Client 2.5 (React)](https://www.apollographql.com/docs/react/) for connecting to GraphQL.
* [MobX-React-Lite](https://github.com/mobxjs/mobx-react-lite) for declarative, type-safe flux/store state management.
* [Emotion](https://emotion.sh/docs/introduction) CSS-in-JS, with inline `<style>` tag generation that contains only the CSS that needs to be rendered.
* [Sass](https://sass-lang.com/), [Less](https://lesscss.org) and [PostCSS](https://postcss.org/) when importing `.css/.scss/.less` files.
* [React Router 4](https://reacttraining.com/react-router) for declarative browser + server routes.
* [GraphQL Code Generator v1.1](https://the-guild.dev/graphql/codegen) for parsing remote GraphQL server schemas, for automatically building fully-typed Apollo React HOCs instead of writing `<Query>` / `<Mutation>` queries manually
* Declarative/dynamic `<head>` section, using [react-helmet](https://github.com/nfl/react-helmet).

#### Server stack

* Built-in [Koa 2](https://koajs.com/) web server, with async/await routing.
* Full route-aware server-side rendering (SSR) of initial HTML.
* Universal building - both browser + Node.js web server compile down to static files, for fast server re-spawning.
* Per-request GraphQL store. Store state is dehydrated via SSR, and rehydrated automatically on the client.
* MobX for app-wide flux/store state, for automatically re-rendering any React component that 'listens' to state. Fully typed state!
* Full page React via built-in SSR component - every byte of your HTML is React.
* SSR in both development and production, even with hot-code reload.

#### Real-time

* Hot code reloading; zero refresh, real-time updates in development.
* Development web server that automatically sends patches on code changes, and restarts the built-in Web server for SSR renders that reflect what you'd see in production.
* WebSocket `subscription` query support for real-time data (just set `WS_SUBSCRIPTIONS=1` in .env)

#### Code optimisation

* [Webpack v4](https://webpack.js.org/), with [tree shaking](https://webpack.js.org/guides/tree-shaking/) -- dead code paths are automatically eliminated.
* Asynchronous code loading when `import()`'ing inside a function.
* Automatic per-vendor chunk splitting/hashing, for aggressive caching (especially good behind a HTTP/2 proxy!)
* Gzip/Brotli minification of static assets.
* CSS code is combined, minified and optimised automatically - even if you use SASS, LESS and CSS together!

#### Styles

* [Emotion](https://emotion.sh/docs/introduction), for writing CSS styles inline and generating the minimal CSS required to properly render your components.
* [PostCSS v7](https://postcss.org/) with [next-gen CSS](https://preset-env.cssdb.org/) and automatic vendor prefixing when importing `.css`, `.scss` or `.less` files.
* [SASS](https://sass-lang.com/) and [LESS](https://lesscss.org) support (also parsed through PostCSS.)
* Automatic vendor prefixing - write modern CSS, and let the compiler take care of browser compatibility.
* Mix and match SASS, LESS and regular CSS - without conflicts!
* CSS modules - your classes are hashed automatically, to avoid namespace conflicts.
* Compatible with Foundation, Bootstrap, Material UI and more. Simply configure via a `.global.(css|scss|less)` import to preserve class names.

#### Production-ready

* Production bundling via `npm run production`, that generates optimised server and client code.
* [Static compression](https://webpack.js.org/plugins/compression-webpack-plugin/) using the Gzip and [Brotli](https://opensource.googleblog.com/2015/09/introducing-brotli-new-compression.html) algorithms for the serving of static assets as pre-compressed `.gz` and `.br` files (your entire app's `main.js.bz` - including all dependencies - goes from 346kb -> 89kb!)
* Static bundling via `npm run build:static`. Don't need server-side rendering? No problem. Easily deploy a client-only SPA to any static web host (Netlify, etc.)

## [2. SaaS Boilerplate](http://codefoundries.com/products/UniversalRelayBoilerplate.html)

#### SaaS Boilerplate + examples using React, Relay, GraphQL, Node.js, and Cassandra/Elassandra.

#### Front-end stack

| **Technology**                                      | **Description**                                                                                                                                                                                                |
| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [found](https://github.com/4Catalyzer/found)        | Extensible route-based routing for React applications.                                                                                                                                                         |
| [GraphQL](https://graphql.org/learn/)               | A query language for describing the capabilities and requirements of data models for client‐server applications.                                                                                               |
| [JSS](https://cssinjs.org/?v=v10.10.0)              | JSS is a more powerful abstraction over CSS. It uses JavaScript as a language to describe styles in a declarative and maintainable way.                                                                        |
| [Material UI](https://mui.com/material-ui/)         | Library for implementing [Material Design](https://www.google.com/design/spec/material-design/introduction.html) in React. All user interface in this kit is built predominantly using Material UI components. |
| [React](https://react.dev/)                         | The best library for building modern browser-based and mobile UIs.                                                                                                                                             |
| [React Helmet](https://github.com/nfl/react-helmet) | Reusable React component will manage all of your changes to the document head with support for document title, meta, link, script, and base tags.                                                              |
| [Relay](https://relay.dev/)                         | A Javascript framework for building data-driven react applications.                                                                                                                                            |

#### Server stack

| **Technology**                                                           | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Apache Cassandra](https://cassandra.apache.org/_/index.html)            | The right choice when you need scalability and high availability without compromising performance. Linear scalability and proven fault-tolerance on commodity hardware or cloud infrastructure make it the perfect platform for mission-critical data. Cassandra's support for replicating across multiple datacenters is best-in-class, providing lower latency for your users and the peace of mind of knowing that you can survive regional outages. |
| [Data Loader](https://github.com/graphql/dataloader)                     | Generic utility to be used as part of your application's data fetching layer to provide a consistent API over various backends and reduce requests to those backends via batching and caching.                                                                                                                                                                                                                                                          |
| [Elassandra](http://www.strapdata.com/)                                  | Elassandra Combines Cassandra And Elasticsearch In A Single Powerful Integrated Solution. URB works well with Elassandra.                                                                                                                                                                                                                                                                                                                               |
| [Express](https://expressjs.com)                                         | Fast, unopinionated, minimalist web framework for Node.js                                                                                                                                                                                                                                                                                                                                                                                               |
| [express-cassandra](https://express-cassandra.readthedocs.io/en/latest/) | Cassandra ORM/ODM/OGM for Node.js with optional support for Elassandra & JanusGraph                                                                                                                                                                                                                                                                                                                                                                     |
| [Express GraphQL](https://github.com/graphql/express-graphql)            | A Node.js express library that allows the creation of GraphQL servers.                                                                                                                                                                                                                                                                                                                                                                                  |
| [JWT](https://jwt.io/)                                                   | JSON Web Tokens is an industry standard [RFC 7519](https://tools.ietf.org/html/rfc7519) method for representing claims securely between two parties.                                                                                                                                                                                                                                                                                                    |
| [Node.js](https://nodejs.org/en)                                         | Event-driven, non-blocking I/O runtime based on JavaScript that is lightweight and efficient.                                                                                                                                                                                                                                                                                                                                                           |
| [Winston](https://github.com/winstonjs/winston)                          | A logger for just about everything.                                                                                                                                                                                                                                                                                                                                                                                                                     |

#### Development tools

| **Technology**                                                  | **Description**                                                                 |
| --------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| [Babel](https://babeljs.io/)                                    | Transpiles ESX to ESX and performs relay transformations.                       |
| [concurrently](https://www.npmjs.com/package/concurrently)      | Run multiple commands concurrently.                                             |
| [ESLint](https://eslint.org)                                    | A fully pluggable tool for identifying and reporting on patterns in JavaScript. |
| [Flow](http://flowtype.org/)                                    | Static type checker, designed to find type errors in JavaScript programs.       |
| [Husky](https://github.com/typicode/husky)                      | Git hooks for eslint and prettier.                                              |
| [LocalTunnel](https://localtunnel.github.io/www/)               | Expose yourself to the world.                                                   |
| [Prettier](https://github.com/prettier/prettier/)               | Code formatter for javaScript.                                                  |
| [React Hot Loader](https://gaearon.github.io/react-hot-loader/) | Allows tweaking of React components in real time.                               |
| [Webpack](http://webpack.github.io)                             | Bundles npm packages, application Java Script, CSS, images, etc. into bundles.  |

## [3. React apollo todo app](https://github.com/k8s-platform-hub/react-apollo-todo-app)

#### A simple todo app build on react using the graphql queries of hasura

This is a basic todo app built on react. The app uses Hasura for its backend, leveraging the following features of Hasura:

* Deploy the react app
* Hasura Authentication the Auth UI Kit
* Hasura Database
* GraphQL queries provided by Hasura

This project comes with the following custom microservice - a React TODO app made using GraphQL with Apollo Client

## [4. Universal React Apollo app](https://github.com/WeLikeGraphQL/universal-react-apollo-example)

### Universal React Apollo App (GraphQL) consuming

#### Features

* [GraphQL](https://graphql.org/) for fetching data! The most awesome part of the project!
* Universal Rendering (Server Side Rendering)
* ES6/ES2015 with [Babel](https://babeljs.io/)
* React data container for the [Apollo Client](https://www.apollographql.com/docs/react/)
* Integrating predictable state container [Redux](https://redux.js.org/) with Apollo
* Hot reloading using [React-Hot-Loader](https://github.com/gaearon/react-hot-loader)
* [Recompose](https://github.com/acdlite/recompose) as a React utility belt for higher order components
* Development and production bundling by [Webpack](https://webpack.github.io)
* CSSNext: use of official W3C syntax of the future CSS
* Transforming styles with JS plugins by [PostCSS](https://postcss.org/)
* [Wow.js](https://mynameismatthieu.com/WOW/) for CSS animations
* [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for resolving [layout fatigue](http://blog.karenmenezes.com/2014/apr/13/floats-inline-block-or-display-table-or-flexbox/) and making the app responsive (open the app in desktop, mobile, whatever...). Doesn't work on IE 9, but it should not be a problem nowadays. See [browsers usage](https://caniuse.com/usage-table).
* [CSS Modules](https://github.com/css-modules/css-modules): say goodbye to global scope in CSS and most of conflicts
* \[Jest Snapshot Testng] some parts in [Enzyme](https://enzymejs.github.io/enzyme/) and [Sinon](https://sinonjs.org/)
* Linting both JS and CSS, respectively by: [ESLint](https://eslint.org/) and [Stylelint](https://stylelint.io/)

## [5. Relay Skeleton](https://github.com/fortruce/relay-skeleton)

#### React, Relay, GraphQL project skeleton

This skeleton project is meant to scaffold a fullstack React, Relay, and GraphQL project. The skeleton uses webpack and gulp to manage the build and provide a great development experience. The frontend stack is React, and Relay. All React changes are automatically hot reloaded using react-hot-loader. Also, the backend server is automatically
restarted upon any changes using nodemon.

Both the server and frontend code are built and transpiled using webpack, while gulp is used primarily to start the webpack-dev-server and nodemon.

#### Typical Usage

This skeleton was designed with a typical use case of having a backend api serve a React SPA. The skeleton automatically proxies all requests to `/graphql` thru the webpack-dev-server to the backend GraphQL server.

The frontend is automatically hot reloaded whenever you save a file. See
\[react-hot-loader] for more details on how this works. It enables you to immediately see changes in React components without losing application state or having to reload your page!

The backend server is automatically restarted whenever you save a file.
If, for example, you modify the GraphQL schema, then the GraphQL server will be restarted to reflect the changes, the `schema.json` will be regenerated using an introspection query, and the frontend code will be recompiled to re-run `Relay.QL` queries through the `babel-relay-plugin`.

Getting started with React & GraphQL part I

I've decided to create a list of top resources to learn for two modern and trending technologies after checking results of [The stage of Javascript 2018 Survey](https://2018.stateofjs.com). The survey was completed by 20k users. React is, of course, the most popular among front end frameworks.

![react](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/react-popularity.webp)

GraphQL is the top wanted to learn technology.

![graphql](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/graphql-1732202384090.webp)

## Clients

* [Apollo GraphQL ](https://github.com/apollographql/apollo-client): A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server

![apollo](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/apollo.webp)

* [Relay Modern](https://relay.dev/): A JavaScript framework for building data-driven React applications

![replay](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/relay.webp)

* [AppSync](https://github.com/awslabs/aws-mobile-appsync-sdk-js): JavaScript GraphQL library for Offline, Sync, Sigv4. includes support for React Native

![appsync](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/appsync.webp)

* [FormidableLabs - urql](https://github.com/urql-graphql/urql): A highly customizable and versatile GraphQL client for React

![urql](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/urql.webp)

* [Graphql.js](https://github.com/f/graphql.js):A Simple and Isomorphic GraphQL Client for JavaScripy

![graphQljs](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/graphqljs.webp)

## Tutorials

* React
  * [A complete React with GraphQL Tutorial](https://www.robinwieruch.de/react-with-graphql-tutorial/)
  * [A complete React with Apollo and GraphQL Tutorial](https://www.robinwieruch.de/react-graphql-apollo-tutorial/)
  * [React + Apollo Tutorial](https://www.howtographql.com/react-apollo/0-introduction/)
  * [React + Relay Tutorial](https://www.howtographql.com/react-relay/0-introduction/)

[https://www.youtube.com/watch?v=XeALXh37WeU](https://www.youtube.com/watch?v=XeALXh37WeU)

[https://www.youtube.com/watch?v=gF-peiFjG0o](https://www.youtube.com/watch?v=gF-peiFjG0o)

[https://www.youtube.com/watch?v=7giZGFDGnkc](https://www.youtube.com/watch?v=7giZGFDGnkc)

[https://www.youtube.com/watch?v=kXH2dbnHYA0](https://www.youtube.com/watch?v=kXH2dbnHYA0)

* React Native
  * [Code an App With GraphQL, React Native, and AWS AppSync: The API](https://code.tutsplus.com/code-an-app-with-graphql-and-react-native--cms-30511t)
  * [Code an App With GraphQL, React Native and AWS AppSync: The App](https://code.tutsplus.com/code-an-app-with-graphql-react-native-and-aws-appsync-the-app--cms-30569t)
  * [Building Chatty](https://medium.com/react-native-training/building-chatty-a-whatsapp-clone-with-react-native-and-apollo-part-1-setup-68a02f7e11): A WhatsApp clone with React Native and Apollo

[https://www.youtube.com/watch?v=33qP1QMmjv8](https://www.youtube.com/watch?v=33qP1QMmjv8)

[https://www.youtube.com/watch?v=nyE6shIRzxM](https://www.youtube.com/watch?v=nyE6shIRzxM)

## Developer Tools

* [[[GraphQL Playground](/graphql-playground)](/graphql-playground)](https://github.com/graphql/graphql-playground): Powerful [GraphQL IDE](/graphql ide) built on top of [GraphiQL](/graphql-playground)

![GraphQL Playground](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/graphql-playground.webp)

* [[GraphiQL](/graphql-playground) Online](https://cloud.hasura.io/public/graphiql): An online version of [GraphiQL](/graphql-playground) with a configurable endpoint and headers.
* [GraphQL Editor](https://graphqleditor.com): a visual graphql editor that allows you to visualize graphql schema and create fake backend out of schema.![GraphQL Editor](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/editor-vold.webp)
* [apollo-tooling](https://github.com/apollographql/apollo-tooling): Tooling for development and production Apollo workflows
* [graphql-code-generator](https://github.com/dotansimha/graphql-code-generator): GraphQL code generator with flexible support for custom templates

![gcg](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/gcg.webp)

* [eslint-plugin-graphql](https://github.com/apollographql/eslint-plugin-graphql): Check your GraphQL query strings against a schema.

![eslint](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/eslint.webp)

* Apollo Client Developer Tools: Chrome extension for Apollo Client developer tools

![apollo](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/apollo-chrome.webp)

* [Relay DevTools](https://chrome.google.com/webstore/detail/relay-devtools/oppikflppfjfdpjimpdadhelffjpciba): A Chrome Extension that creates a Relay tab in the developer tools interface for debugging apps in Chrome

![replay](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/relay-chrome.webp)

* [Relay Devtools Electron](https://www.npmjs.com/package/relay-devtools): Standalone Relay DevTools App for debugging Relay outside Chrome

Best resources to learn React & GraphQL

[The State of JavaScript](https://stateofjs.com/) is a survey created and maintained by [Sacha Greif](https://twitter.com/sachagreif), [Raphael Benitte](https://twitter.com/benitteraphael) & [Michael Rambeau](https://twitter.com/michaelrambeau). The survey collects data from over **20,000 developers**, who are asked questions regarding front-end frameworks, libraries and the part that interests us the most ... the Data Layer which of course includes the [GraphQL](https://graphql.org/) and its derivatives such as Apollo or Relay.

#### Data layers report

The data layer regroups all the technologies used to transmit and manage data. It's a vast category where many approaches compete to make a tricky problem more approachable. The users were asked about their experience and knowledge of such technologies as [Redux](https://redux.js.org/), [Apollo](https://www.apollographql.com/), [MobX](https://mobx.js.org/), [Relay](https://relay.dev/) & [GraphQL](https://graphqleditor.com). Let's take a look at the responses from last year (2018) surveys:

#### GraphQL's popularity

As you can see on a chart below (hopefully), only 7.1% of the respondent has never heard of GraphQL (comparing to 36.% in 2016, and 17.9% in 2017). The 62.5% declare that they would like to learn the GraphQL, **20.4% used it and would use again** (which is a double growth comparing to 2017), and only 1.3% have already given it a try, but would not use it again.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/pop-1730840624708.webp)Source: [stateofjs.com](https://2018.stateofjs.com)

#### Most like aspects of GraphQL

The developers who declared that they *“used it and would use again”*, when asked about the most liked aspects of GraphQL picked the below top3:

* elegant programming style & patterns
* growing popularity
* powerful tooling (i.e. [GraphQL Editor](https://graphqleditor.com/))

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/likedfor-1730840635419.webp)

##### Source: [stateofjs.com](https://2018.stateofjs.com)

#### Most disliked aspects of GraphQL

The developers who declared that they *“used it and would not use again”*, when asked about the most disliked aspects of GraphQL picked:

* high complexity
* clumsy programming style,
* hard learning curve

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/disliked-1730840648077.webp)Source: [stateofjs.com](https://2018.stateofjs.com)

#### GraphQL Usage

The survey showed that **20.3% of respondents have used GraphQL** and would do it again for future projects. Below map represent the distribution of users enjoying [GraphQL](https://graphql.org/). Countries with the highest ratio are shown in red, those where it's lower are displayed in blue. Countries with less than 20 respondents were omitted.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/map-1730840662702.webp)

##### Source: [stateofjs.com](https://2018.stateofjs.com)

#### The summary

After analyzing over **20 000 surveys** the authors have put them into a quadrant chart where have four groups:

| Recommendation | Tech                                                                                                                                                                                                                                                                      |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Adopt**      | [Redux](https://redux.js.org/) - it has very high usage & satisfaction rates, which makes it a safe technology to adopt.                                                                                                                                                  |
| **Assess**     | [GraphQL](https://graphql.org/), [Apollo](https://www.apollographql.com/), [MobX](https://mobx.js.org/) - they have high satisfaction, but still relatively low usage rate. These are the technologies worth following as they soon might transform into the big players. |
| **Avoid**      | [Relay](https://relay.dev/) - low usage, combined with low satisfaction makes Relay a technology to avoid (at least right now).                                                                                                                                           |
| **Analyze**    | NONE - high usage despite low satisfaction if being used you should consider reassessment.                                                                                                                                                                                |

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/summary-1730840697678.webp)

##### Source: [stateofjs.com](https://2018.stateofjs.com)

The State of GraphQL

In this short read, I will try to break down for you the concept of GraphQL fragments. What are the fragments in GraphQL and how you can benefit from using them?

### GraphQL Fragments

In [GraphQL](https://graphql.org/) you sometimes need to query for the same fields in multiple queries. This requires defining these fields over again which can lead to tiny, but very annoying errors.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/twitter-1730750708476.webp)

That's why GraphQL includes reusable units called fragments. Fragments let you construct reusable pieces of query logic (an equivalent to UI component of a [design system](https://graphqleditor.com/blog/Design-System/)). The small part of a query makes, ready to be used where needed, makes our work is way more effective, and possibly lower odds of making a simple typo.

Let's say we have a `user` type containing some standard fields like:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/1-1730750729245.webp)

We can use the `fragment` to represent a set of specific fields i.e. *online contact details*:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/2-1730750741285.webp)
so when querying for online details we can **referer to the fragment instead of querying for all fields separately**:

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/3-1730750755339.webp)

Less typing, cleaner code, easier life :)

### The benefits of using fragments

GraphQL fragments allow you to reuse parts of your queries and provide such qualities as:

* **consistency** - higher confidence that you’re always working on the right fields i.e when running mutations you know you update the right data.
* **better code organization** - fragments improve the structure & reusability of GraphQL code, which is very handy in terms of team collaboration
* **improved communication with GraphQL server** - querying for fragments isolates a component from any unwanted data.

Sounds good right? So if you are wondering if its worth using GraphQL fragments the answers is simple - YES!

GraphQL Fragments and the benefits of using them

In this short read, I will try to break down for you the concept of GraphQL fragments. What are the fragments in GraphQL and how you can benefit from using them?

### GraphQL Fragments

In [GraphQL](https://graphql.org/) you sometimes need to query for the same fields in multiple queries. This requires defining these fields over again which can lead to tiny, but very annoying errors.

[![David Walsh Twitter](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/twitter.webp)](https://twitter.com/davidwalshblog/status/1118526853948612608)

That's why GraphQL includes reusable units called fragments. Fragments let you construct reusable pieces of query logic (an equivalent to UI component of a [design system](https://graphqleditor.com/blog/Design-System/)). The small part of a query makes, ready to be used where needed, makes our work is way more effective, and possibly lower odds of making a simple typo.

Let's say we have a `user` type containing some standard fields like:

![user](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/1-1732204494904.webp)

We can use the `fragment` to represent a set of specific fields i.e. *online contact details*:

![details](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/2-1732204498088.webp)
so when querying for online details we can **referer to the fragment instead of querying for all fields separately**:

![getUsers](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/3-1732204500549.webp)

Less typing, cleaner code, easier life :)

### The benefits of using fragments

GraphQL fragments allow you to reuse parts of your queries and provide such qualities as:

* **consistency** - higher confidence that you’re always working on the right fields i.e when running mutations you know you update the right data.
* **better code organization** - fragments improve the structure & reusability of GraphQL code, which is very handy in terms of team collaboration
* **improved communication with GraphQL server** - querying for fragments isolates a component from any unwanted data.

Sounds good right? So if you are wondering if its worth using GraphQL fragments the answers is simple - YES!

This post is a summary of the best python libraries for GraphQL. Python in recent years is starting to be on the list of top programming language. GraphQL is emerging but very promising query language and execution engine tied to any backend service.

Python is one of the most popular languages used in data science, machine learning and AI systems. GraphQL was introduced by Facebook as an alternative to REST and it's popular of flexibility on handling complex systems.

### Ariadne

Ariadne is a Python library for implementing GraphQL servers using schema-first approach.

Ariadne is a Python library for implementing GraphQL servers.

* Schema-first: Ariadne enables Python developers to use schema-first approach to the API implementation. This is the leading approach used by the GraphQL community and supported by dozens of frontend and backend developer tools, examples, and learning resources. Ariadne makes all of this immediately available to your and other members of your team.
* Simple: Ariadne offers small, consistent and easy to memorize API that lets developers focus on business problems, not the boilerplate.
* Open: Ariadne was designed to be modular and open for customization. If you are missing or unhappy with something, extend or easily swap with your own.
  Documentation is available here.

Features:

* Simple, quick to learn and easy to memorize API.
* Compatibility with GraphQL.js version 14.0.2.
* Queries, mutations and input types.
* Asynchronous resolvers and query execution.
* Subscriptions.
* Custom scalars and enums.
* Unions and interfaces.
* Defining schema using SDL strings.
* Loading schema from .graphql files.
* WSGI middleware for implementing GraphQL in existing sites.
* Opt-in automatic resolvers mapping between camelCase and snake\_case.
* Build-in simple synchronous dev server for quick GraphQL experimentation and [GraphQL Playground](/graphql-playground).
* Support for Apollo GraphQL extension for Visual Studio Code.
* GraphQL syntax validation via gql() helper function. Also provides colorization if Apollo GraphQL extension is installed.

### Installation

```bash
pip install ariadne
```

### Quickstart

The following example creates an API defining Person type and single query field people returning a list of two persons. It also starts a local dev server with [GraphQL Playground](/graphql-playground) available on the [http://127.0.0.1:8000](http://127.0.0.1:8000) address. Start by installing uvicorn, an ASGI server we will use to serve the API:

Start by installing uvicorn, an ASGI server we will use to serve the API:

```bash
pip install uvicorn
```

Then create an example.py file for your example application:

```python
from ariadne import ObjectType, QueryType, gql, make_executable_schema
from ariadne.asgi import GraphQL

# Define types using Schema Definition Language (https://graphql.org/learn/schema/)
# Wrapping string in gql function provides validation and better error traceback
type_defs = gql("""
    type Query {
        people: [Person!]!
    }

    type Person {
        firstName: String
        lastName: String
        age: Int
        fullName: String
    }
""")

# Map resolver functions to Query fields using QueryType
query = QueryType()

# Resolvers are simple python functions
@query.field("people")
def resolve_people(*_):
    return [
        {"firstName": "John", "lastName": "Doe", "age": 21},
        {"firstName": "Bob", "lastName": "Boberson", "age": 24},
    ]


# Map resolver functions to custom type fields using ObjectType
person = ObjectType("Person")

@person.field("fullName")
def resolve_person_fullname(person, *_):
    return "%s %s" % (person["firstName"], person["lastName"])

# Create executable GraphQL schema
schema = make_executable_schema(type_defs, [query, person])

# Create an ASGI app using the schema, running in debug mode
app = GraphQL(schema, debug=True)
```

### Strawberry

Strawberry is a new GraphQL library for Python 3, inspired by dataclasses. An initial version of Strawberry has been released on GitHub. Strawberry was created by @patrick91 who is also an organizer of @pyconit. It was originally announced during Python Pizza Berlin.

![strawberry](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/strawberry-1730846692693.webp)
[https://strawberry.rocks/](https://strawberry.rocks/)

### Installation

```bash
pip install strawberry-graphql
```

### Getting Started

Create a file called app.py with the following code:

```python
import strawberry


@strawberry.type
class User:
    name: str
    age: int


@strawberry.type
class Query:
    @strawberry.field
    def user(self, info) -> User:
        return User(name="Patrick", age=100)


schema = strawberry.Schema(query=Query)
```

This will create a GraphQL schema defining a User type and a single query field user that will return a hard-coded user.

To run the debug server run the following command:

```bash
strawberry run server app
```

Open the debug server by clicking on the following link: [http://0.0.0.0:8000/graphql](http://0.0.0.0:8000/graphql)

This will open a [GraphQL playground](/graphql-playground) where you can test the API.

### Graphene

Graphene is a Python library for building GraphQL schemas/types fast and easily.

* Easy to use: Graphene helps you use GraphQL in Python without effort.
* Relay: Graphene has builtin support for Relay.
* Data agnostic: Graphene supports any kind of data source: SQL (Django, SQLAlchemy), NoSQL, custom Python objects, etc. We believe that by providing a complete API you could plug Graphene anywhere your data lives and make your data available through GraphQL.

### Integrations

Graphene has multiple integrations with different frameworks:

* Django - graphene-django
* SQLAlchemy - graphene-sqlalchemy
* Google App Engine - graphene-gae
* Peewee - In progress (Tracking Issue)

Also, Graphene is fully compatible with the GraphQL spec, working seamlessly with all GraphQL clients, such as Relay, Apollo and gql.

### Installation

For instaling graphene, just run this command in your shell

```bash
pip install "graphene>=2.0"
```

### Examples

```python
Here is one example for you to get started:

class Query(graphene.ObjectType):
    hello = graphene.String(description='A typical hello world')

    def resolve_hello(self, info):
        return 'World'

schema = graphene.Schema(query=Query)
```

Then Querying graphene.Schema is as simple as:

```python
query = '''
    query SayHello {
      hello
    }
'''
result = schema.execute(query)
```

 Top 3 python libraries for graphql 

One of the things that differentiate an average developer from a good one is the constant urge for learning and adopting new tools that can simplify one's life. Here is a list of five developer tools that can facilitate your life :)

### [CloudCraft](https://cloudcraft.co/)

**CloudCraft** is a fancy tool allowing you to design your cloud architecture in no time. This tool allows you to build a smart **AWS diagram** and calculate the cost of the services. Isn't that cool?
[![Visualize you cloud architecture](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/cloudcraft.webp)](https://cloudcraft.co/)

### [BundlePhobia](https://bundlephobia.com)

> #### **bundle phobia**/ˈbʌnd(ə)l fəʊbɪə/an irrational fear of possible consequences of adding new npm package to your bundle.

If you live in a constant fear that adding a npm package to your project will destroy it, this is a tool for you. **BundlePhobia** lets you understand the performance cost of `npm install`ing any package before actually adding it to your project.

[![No more dangerous bundles](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/bundlephobia.webp)](https://bundlephobia.com)

### [GraphQL Editor](https://graphqleditor.com/)

GraphQL is a query language for APIs, it shows types of data provided by the server and then the client can fetch exactly what it needs in one call rather than making multiple REST API calls. The schema is a crucial part of any GraphQL project and **GraphQL Editor** makes building or understanding existing GraphQL schema a lot easier as you can plan it by linking visual nodes. Features like loading schema from URL/file or a fake backend data can speed up the prototyping of your app by a lot!

[![GraphQL Schema that can be turned into a production-ready backend](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/gqle.webp)](https://graphqleditor.com/)

### [Amplify Framework](https://aws-amplify.github.io/)

Want to build a cloud base app? This is the only tool you need! **Amplify Framework by AWS** is a library for building fully-featured apps! The framework allows you to easily connect micro-services for:

* *API*
* *Analytics*
* *Authentication*
* *Notifications*
* *Storage*

and many more with just a few lines of code! The Amplify also offers a vast range of beautiful out-of-the-box **UI components** ready to take your app to the next level!

[![Library for building your fancy cloud-powered apps](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/amplify.webp)](https://aws-amplify.github.io/)

### Flare

*Flare* is a powerful design and animation tool, which allows designers and developers to easily add high-quality animation to their apps and games. With Flare you can create:

* *sophisticated interactions*
* *animated icons*
* *onboarding screens*
* *game characters*

These are real design assets that run in your app - they don't need to be recreated in code! This makes future modifications super easy!

[![Super cool animations](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/flare.webp)](https://www.2dimensions.com/about-flare)

5 Developer Tools you need to check out!

Looking for a way of improving your design-development workflow? You need a design system! Why? Because it will help you work better, much faster & will take your team collaboration to the next level!

Design system is a very popular concept, arousing a lot of emotions and interest recently ... even the government of United States of America has one they call [U.S. Web Design System](https://designsystem.digital.gov/).

![it's all about design](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/designhtml.webp)

### What's Design System

A design system is a collection of reusable graphical components, design standards, style guides, which define **a common visual language** for product teams. It accelerates the design process and bridges the gap between teams involved in building a final product by having clear graphics standards, that makes assembling websites from components super easy. So basically the design system is a rulebook for graphical and development teams which we can breakdown like that:

* **Design System** – the complete set of design standards along with principles, patterns & code components to achieve them,
* **Pattern Library** – a subclass of a design system which defines allowed design patterns,
* **Style guide** – a subclass showing how products should look, containing use cases for UI patterns, typography etc.

![Design System](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/design-system.webp)

Source: [Zack Rutherford for Studio by UXPin](https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/)

### The benefits

Design systems provide consistency in designing new elements of your company or product visual identification. Design system creates straightforward and beautiful experiences for end-user as well as product team makes collaboration a lot easier for:

* **designers** as they can breakdown the design-process into smaller parts, easier to work on, manage, change than the whole webpage,
* **developers** so they clear vision of how to build required components to maintain the unified styles,
* **product owners/managers** as component-based approach makes requesting development teams for additional page elements a super easy process

### Examples

You have all probably heard about the famous [Material Design](https://m3.material.io/) by Google:

[![Material Design](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/material.webp)](https://m3.material.io/)

but that's not the only one you can draw inspiration from as big companies like IBM, Audi or Atlassian make their design system publicly available. Here you can take a look at a couple of them:

[Carbon React Components by IBM](https://react.carbondesignsystem.com/?path=/docs/getting-started-welcome--welcome)

[![Carbon React Components by IBM](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/ibm.webp)](https://react.carbondesignsystem.com/?path=/docs/getting-started-welcome--welcome)

[Zendesk Garden](https://garden.zendesk.com/)

[![Zendesk Garden](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/zendesk.webp)](https://garden.zendesk.com/)

[Atlassian Design System](https://atlassian.design/)

[![Atlasian](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/atlasian.webp)](https://atlassian.design/)

[Polaris by Shopify](https://polaris.shopify.com/)

[![Polaris](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/polaris.webp)](https://polaris.shopify.com/)

### Looking for more?

Make sure to visit [https://designsystemsrepo.com/design-systems/](https://designsystemsrepo.com/design-systems/) for more samples & inspirations!

What is Design System and why you need one?

A **GraphQL Java Cheat Sheet** to help you understand what is what in GraphQL Java world. You might find it useful if you:

> - Want to learn GraphQL Java
> - Feel confused by all the Java GraphQL libraries
> - Want to try GraphQL Java in your project, but not sure how to start

### Gradle or Maven?

[Gradle](https://gradle.org/) and [Maven](https://maven.apache.org/) are the most popular build automation tools.
Which one you should choose? I can not provide you an answer to that question as this decision is to a large extent up to you and it depends on variables like your project's size or how much customization it needs. The tools like [Spring](https://spring.io/) and the constantly increasing amount of integration make it's quite a personal decision. As both approaches have their strengths and weaknesses, I hope this short summary can help you choose the right one for your project.

|                                             |                   Gradle                    |                          Maven                           |
| ------------------------------------------- | :-----------------------------------------: | :------------------------------------------------------: |
| _builds approach_                           |    based on a graph of task dependencies    |       based on a fixed and linear model of phases        |
| _dynamic and transitive dependencies_       |                   **yes**                   |                         **yes**                          |
| _artifact repositories_                     |                   JCenter                   |                      Maven Central                       |
| _private company repository_                |                   **yes**                   |                         **yes**                          |
| _custom rules, resolving version conflicts_ |                   **yes**                   |                            no                            |
| _advance task orderings_                    |                   **yes**                   |                            no                            |
| _administering build infrastructure_        | uses wrappers that accept auto provisioning | require an extension to support self-provisioning builds |

To sum up, Gradle is much more powerful than Maven, but in many cases, you won't need to use its fancy features. If you are working on a small project you should consider Maven, if it's a big enterprise application Gradle seems to be the right choice. In the end, it's your personal choice.

### Libraries

There are a couple of GraphQL Java related libraries. The only library that is strictly required is a `graphql-java` which is the GraphQL implementation itself, but there are many others that you might find useful:

- **[graphql-java](https://github.com/graphql-java/graphql-java)**: The alpha and omega of any project, the GraphQL Java implementation itself.

- **[graphql-java-tools](https://github.com/graphql-java-kickstart/graphql-java-tools)**: The library that allows you to use the GraphQL schema language to [build your GraphQL schema](https://graphqleditor.com/). It's inspired by [Apollo's graphql-tools](https://github.com/ardatan/graphql-tools), it parses the given GraphQL schema and allows you to bring your own object to fill in the implementations.

- **[graphql-spring-boot](https://github.com/graphql-java-kickstart/graphql-spring-boot)**: A lib that contains various Spring Boot starters to enable GraphQL related services and features.

- **[graphql-java-servlet](https://github.com/graphql-java-kickstart/graphql-java-servlet)**: The implementation of GraphQL Java Servlet including support for popular libraries like [Relay.js](https://github.com/facebook/relay), [Apollo](https://github.com/apollographql), and [OSGi](https://www.osgi.org/) out of the box; wraps the Java implementation of GraphQL provided by GraphQL Java.

- **[graphql-java-annotations](https://github.com/Enigmatis/graphql-java-annotations)**: The library that offers an annotations-based syntax for GraphQL schema definition.

### DEV.TO GraphQL Java articles

- [First impressions with GraphQL in Java](https://dev.to/committedsw/first-impressions-with-graphql-in-java-5c82) by [@committedsw](https://dev.to/committedsw)
- [Notes from experimenting with GraphQL and Kotlin](https://dev.to/baens/notes-from-experimenting-with-graphql-and-kotlin-k8) by [@baens](https://dev.to/baens)
- [Getting Started with GraphQL Java](https://dev.to/tomekponiat/getting-started-with-graphql-java-13j1) by [@tomekponiat](https://dev.to/tomekponiat)
- [How to Build GraphQL Services in Java with Spring Boot](https://dev.to/sambenskin/howto-build-graphql-services-in-java-with-spring-boot---part-1-38b2) by [@sambenskin](https://dev.to/sambenskin)

### Tutorials and other resources

- [Gradel Tutorials and Guides](https://gradle.org/guides/)
- [Maven in 5 Minutes](https://maven.apache.org/guides/getting-started/maven-in-five-minutes.html)
- [How to get your GraphQL Java server up and running in no time](https://www.freecodecamp.org/news/graphql-java-development-stack-in-production-21f402c4c37a)
- [graphql-java Tutorial](https://www.howtographql.com/graphql-java/0-introduction/)
- [Migratiing Builds From Apache Maven](https://docs.gradle.org/current/userguide/migrating_from_maven.html)

### Video tutorials:

**Spring Boot with GraphQL Query Example - Tech Primers**

https://www.youtube.com/watch?v=zX2I7-aIldE

**Building a GraphQL Server with Kotlin and graphql-java - Michael Hunger**

https://www.youtube.com/watch?v=3-yyEaQfm9c

**Developing and maintaining a Java GraphQL back-end - Bojan Tomic**

https://www.youtube.com/watch?v=1zIHHi2MaQE


GraphQL Java Cheat Sheet


A **GraphQL Java Cheat Sheet** to help you understand what is what in GraphQL Java world. You might find it useful if you:

> - Want to learn GraphQL Java
> - Feel confused by all the Java GraphQL libraries
> - Want to try GraphQL Java in your project, but not sure how to start

### Gradle or Maven?

[Gradle](https://gradle.org/) and [Maven](https://maven.apache.org/) are the most popular build automation tools.
Which one you should choose? I can not provide you an answer to that question as this decision is to a large extent up to you and it depends on variables like your project's size or how much customization it needs. The tools like [Spring](https://spring.io/) and the constantly increasing amount of integration make it's quite a personal decision. As both approaches have their strengths and weaknesses, I hope this short summary can help you choose the right one for your project.

|                                             |                   Gradle                    |                          Maven                           |
| ------------------------------------------- | :-----------------------------------------: | :------------------------------------------------------: |
| _builds approach_                           |    based on a graph of task dependencies    |       based on a fixed and linear model of phases        |
| _dynamic and transitive dependencies_       |                   **yes**                   |                         **yes**                          |
| _artifact repositories_                     |                   JCenter                   |                      Maven Central                       |
| _private company repository_                |                   **yes**                   |                         **yes**                          |
| _custom rules, resolving version conflicts_ |                   **yes**                   |                            no                            |
| _advance task orderings_                    |                   **yes**                   |                            no                            |
| _administering build infrastructure_        | uses wrappers that accept auto provisioning | require an extension to support self-provisioning builds |

To sum up, Gradle is much more powerful than Maven, but in many cases, you won't need to use its fancy features. If you are working on a small project you should consider Maven, if it's a big enterprise application Gradle seems to be the right choice. In the end, it's your personal choice.

### Libraries

There are a couple of GraphQL Java related libraries. The only library that is strictly required is a `graphql-java` which is the GraphQL implementation itself, but there are many others that you might find useful:

- **[graphql-java](https://github.com/graphql-java/graphql-java)**: The alpha and omega of any project, the GraphQL Java implementation itself.

- **[graphql-java-tools](https://github.com/graphql-java-kickstart/graphql-java-tools)**: The library that allows you to use the GraphQL schema language to [build your GraphQL schema](https://graphqleditor.com/). It's inspired by [Apollo's graphql-tools](https://github.com/ardatan/graphql-tools), it parses the given GraphQL schema and allows you to bring your own object to fill in the implementations.

- **[graphql-spring-boot](https://github.com/graphql-java-kickstart/graphql-spring-boot)**: A lib that contains various Spring Boot starters to enable GraphQL related services and features.

- **[graphql-java-servlet](https://github.com/graphql-java-kickstart/graphql-java-servlet)**: The implementation of GraphQL Java Servlet including support for popular libraries like [Relay.js](https://github.com/facebook/relay), [Apollo](https://github.com/apollographql), and [OSGi](https://www.osgi.org/) out of the box; wraps the Java implementation of GraphQL provided by GraphQL Java.

- **[graphql-java-annotations](https://github.com/Enigmatis/graphql-java-annotations)**: The library that offers an annotations-based syntax for GraphQL schema definition.

### DEV.TO GraphQL Java articles

- [First impressions with GraphQL in Java](https://dev.to/committedsw/first-impressions-with-graphql-in-java-5c82) by [@committedsw](https://dev.to/committedsw)
- [Notes from experimenting with GraphQL and Kotlin](https://dev.to/baens/notes-from-experimenting-with-graphql-and-kotlin-k8) by [@baens](https://dev.to/baens)
- [Getting Started with GraphQL Java](https://dev.to/tomekponiat/getting-started-with-graphql-java-13j1) by [@tomekponiat](https://dev.to/tomekponiat)
- [How to Build GraphQL Services in Java with Spring Boot](https://dev.to/sambenskin/howto-build-graphql-services-in-java-with-spring-boot---part-1-38b2) by [@sambenskin](https://dev.to/sambenskin)

### Tutorials and other resources

- [Gradel Tutorials and Guides](https://gradle.org/guides/)
- [Maven in 5 Minutes](https://maven.apache.org/guides/getting-started/maven-in-five-minutes.html)
- [How to get your GraphQL Java server up and running in no time](https://www.freecodecamp.org/news/graphql-java-development-stack-in-production-21f402c4c37a)
- [graphql-java Tutorial](https://www.howtographql.com/graphql-java/0-introduction/)
- [Migratiing Builds From Apache Maven](https://docs.gradle.org/current/userguide/migrating_from_maven.html)

### Video tutorials:

**Spring Boot with GraphQL Query Example - Tech Primers**

https://www.youtube.com/watch?v=zX2I7-aIldE

**Building a GraphQL Server with Kotlin and graphql-java - Michael Hunger**

https://www.youtube.com/watch?v=3-yyEaQfm9c

**Developing and maintaining a Java GraphQL back-end - Bojan Tomic**

https://www.youtube.com/watch?v=1zIHHi2MaQE


Blog