This article will give you a detailed introduction on how to set up your computer as a web developer.  It was created for MacOS cause I mostly work on MacOS, however, you can easily interchange those instructions for Windows. Setting up a web development environment is the first challenge on a road to become a web developer today.  Don't give up, try right away!

There are a few ways you can set up your development environment. You can have everything in one IDE alternatively you can use many lightweight tools to combine them with their purposes. The following short checklist reflects my favourite tools in lightweight combination. In some cases, I prefer to use lightweight tools and for example, for react I use one IDE. Follow me to get more, in the next article I'll cover the basics of React Development Environment.

### Agenda:

* Homebrew
* Git & GitHub
* Sublime as Editor
* Node and NPM
* iTerm2

### Homebrew

You will need to use the Mac Terminal app to install Homebrew. The Terminal app is located in the Utility folder in the Applications folder.

Homebrew is a package manager for MacOS. Rather than having to download every app from a web, Homebrew enables you to install and control applications from the command line. It’s an excellent tool to get used to the command line at the beginner's journey. You should feel relaxed on the command line as developer thus it makes sense to perform as many tasks as possible there. In addition, Homebrew gives you the ability to manage all of your applications with only one tool. You can get all the necessary instructions for Homebrew on their website. Otherwise, simply type the following command in your command line (terminal) to install Homebrew.

```bash
ruby -e "$(curl -fsSL
https://raw.githubusercontent.com/Homebrew/install/master/install)" 
```

To verify if the installation was successful type:

```bash
    brew --version
```

Afterwards, Homebrew should be ready for you. It should be accessible on the command line when you type brew. Whenever you install another tool with Homebrew, type brew update in your command line to update the Homebrew repository with all the recent versions of the packages. Afterwards, you can install the desired tool with brew install `<tool>` or upgrade it with brew upgrade `<tool>`.

### Git and GitHub

Git will be your distributed version control system. It manages your local projects on your machine and your remote projects on platforms such as GitHub and GitLab. Sooner or later, you will need it to cooperate on projects with other developers. Git should have been installed along the way with the Homebrew installation. Type git --version to verify that it is there. Otherwise, you can use Homebrew for the first time to install it with the following command on the command line:

```bash
    brew install git
```

To verify if the installation was successful type:

```bash
    git --version
```

Next, you have to create a GitHub account and connect it from a terminal. GitHub is a web-based hosting service for version control using Git. It offers all of the distributed version control and source code management (SCM) functionality of Git as well as adding its other features. It provides access control and several collaboration features such as bug tracking, feature requests, task management, and wikis for every project. To learn more how to setup GitHub over terminal check this [link](https://docs.github.com/en/get-started/quickstart/set-up-git).

### Sublime as Editor

Sublime is one of the top editors for developers. That’s the part where everybody has their own opinion. You can use any editor or IDE of your choices like Visual Studio Code, Atom and VIM.

Unfortunately, Sublime isn’t directly accessible via Homebrew. But you can use Cask to install it. Cask is another package manager within Homebrew for GUI tools. For instance, Chrome could be installed on your machine with Cask as well.  Just type selected commands in a terminal:

```bash
    brew install caskroom/cask/brew-cask
    brew tap caskroom/versions
    brew cask install sublime-text
```

To verify if the installation was successful type:

```bash
    subl -v
```

### Node and NPM

If you are working with JavaScript, node and npm is a must. The node package manager is used to install libraries/frameworks (node packages) on the command line to your project.

```bash
    brew install node
```

To verify if the installation was successful type:

```bash
    node -v
    npm -v
```

### iTerm2

MacOS and other OS’s already come with their own command line terminal tool. Thus, another command line tool is optional, but you might want to install iTerm2 because of various advantages. It comes with powerful integrations, beautiful themes and other useful utility tools that will enrich your daily toolset. Homebrew with Cask helps you to install it, just type:

```bash
    brew cask install iterm2
```

### Summary

That are all the basic tools you need to set up a development environment. Homebrew is used to install all the tools for you on the command line. Cask is used on top of Homebrew to install graphical user interfaces apps applications such as Chrome, iTerm2 and Sublime. The later stage you can choose any code editor as you want since you'll spend most of the time in it. As a JavaScript developer, there is no way around node and npm and thus you should install them with nvm to manage multiple node versions.  Git and GitHub should be used to handle your projects.

#### Would you add anything to my list?

Junior Web Developer environment setup

## Intro

After periods of hard work from numbers of contributors, the React Native Core team is proud to publish of new version 0.60. This release touches important migrations for both Android and iOS and many more fixed issues. This article covers the top highlights. If you would like to check more detailed information, refer to the changelog. Finally, we should cheer for all contributors who helped improve this version.

## Accessibility

The new version added many enhancements to the accessibility APIs, like

* Several missing roles have been added for various components.
* New Accessibility States API for web support in the future.
* AccessibilityInfo.announceForAccessibility is confirmed on Android.
* Accessibility actions will include callbacks that deal with user-defined actions.
* iOS accessibility flags and reduce motion are supported on iOS.
* A clickable prop and an onClick callback are added for invoking actions via keyboard navigation.
  Accessibility is a complicated science, but we hope these changes make it a bit easier to be available to disabled users (according to A11Y). Check latest React Native Open Source Update for more details.

## Start Screen

React Native's home screen has been refreshed! This new "Hello World" will greet users to the ecosystem in a more welcoming, engaging way.

![React start](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/react060-1730853290712.webp)

## AndroidX Support

With this release, React Native has been moved to AndroidX (Android Extension library). As this is a major change, developers need to transfer their native code and dependencies. The React Native community created a temporary solution for this called “jetifier”, an AndroidX transition tool in npm format, with a react-native compatible style.

Users are excited about the release and reflected it to be the most important RN release.

## CocoaPods by Default

React Native for iOS comes with CocoaPods by default. It is an application level dependency manager for Objective-C Cocoa projects and Swift. Developers are suggested to check the iOS platform code using the ‘xcworkspace’ file. Additionally, the Pod specifications of internal packages have been updated to make them compatible with the Xcode projects, which will assist with troubleshooting and debugging. Assume to make some straightforward changes to your Podfile as part of the upgrade to 0.60 to bring this support.

## Lean Core project

The team started Lean Core project to bring the React Native repository to a manageable state. They have extracted WebView and NetInfo toward separate repo. In this version 0.60, the team has completed migrating them out of the React Native repo. Also, geolocation has been extracted based on the community feedback about the new App Store policy.

## Native Modules are now Autolinked

The CLI React Native team has offered significant advances to native module linking called auto-linking! Majority situations will not require the use of the react-native link. The team, at the same time, overhauled the linking process in general. Unlink react-native any preexisting dependencies as mentioned in the docs.

## Upgrade Helper

The team of @lucasbento, @pvinis, @kelset, and @watadarkstar have built Upgrade Helper to simplify the upgrade process. Their goal was to help React Native users with brownfield apps or complicated customizations to see what's changed among versions. Try yourself and check updated upgrading docs.

![Upgrade helper](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/upgradehelper-1730853295948.webp)

## A word to Library Maintainers
AndroidX changes will almost absolutely require updates to your library, so be sure to cover support. If you're ready to upgrade yet, consider checking your library with jetifier to confirm that users at build time can patch your library.

Check the autolinking docs to update your configs & readme. Depending on the previous integration of your library, you may also need to make some extra adjustments.

## Thanks!

For more details check [changelog](https://github.com/react-native-community/releases/blob/master/CHANGELOG.md)

Top features in React Native 0.60


There’s a lot of hype on GraphQL and debate to compare it to REST. GraphQL is in the early stage of adoption globally and no one exactly knows where it will end. Researching on the internet, I was able to find many positive articles presenting this new piece of tech. Is it just a hype of the first impression?

I’ve researched Reddit and selected the most upvoted comments on GraphQL.  My goal was to write down as much transparent and objective article on the topic. I’ve used discussions and arguments between users to present a different point of view on each aspect. Each comment quoter below has a link to its author and number of upvotes in (). Keep in mind that upvote numbers might change since I've written this article.

##Agenda 

- General review
- React & Apollo review
- Big Boys & GraphQL 
- Caching
- Data Fetching
- Summary.


#General review

Starting from a general view I’ve chosen two cases. First, one - [SwiftOneSpeaks](https://www.reddit.com/user/SwiftOneSpeaks/) shows front end developer perspective and potential improvements in time to market. Secondly, [Scruffles360](https://www.reddit.com/user/scruffles360/) presents strategy trends on how teams adapt graphql and which one they used. Later on you’ll find more about his case. The second comment was the least upvoted one that I’ve chosen in the article.

[SwiftOneSpeaks](https://www.reddit.com/r/reactjs/comments/bozrg1/graphql_vs_rest_putting_rest_to_rest/eno3ovb/) (23) says: 

> *When I was working with a backend dev team, they were far more willing to provide new queries to match my needs because it didn't impact existing queries they had to support. (That said, I have no idea how well this scales over time). It also reduced the number of crappy responses I had to reparse into usable (for my needs) data structures. (example, I'd get 3 arrays back that I had to relate and zip together into a single set of objects. With GraphQL, I had more ability to demand data in a useful shape, though the backend still has to do their part).*

[Scruffles360](https://www.reddit.com/r/reactjs/comments/bozrg1/graphql_vs_rest_putting_rest_to_rest/enpb6fg/) (8) explains his three trends in GraphQL scope:

>- The monolith - which is what Apollo is pushing now. Every company has one and only one api endpoint and schema that proxies to everything else (https://principledgraphql.com/). I disagree with this wholeheartedly, but won't repeat my arguments here (you can dig through my comment history if you want)
- The database api - for some strange reason people have started adding plugins to databases that give you direct database access via graphql. Graphql is wonderful for so many reasons, but it doesn't come close to competing with a native database query language. More importantly, this takes away your business layer giving callers direct access to your store. No one should have access to your store except one single microservice. Everyone else should be calling through your api.
- The medium approach - The classic API approach where each app has their own API (graphql in this case). It might isolate business logic or proxy to microservices (via rest or by schema stitching another Graphql schema). That's the route we went, and I don't regret a thing.

#React & Apollo review

React & Apollo combination review request  gained a lot of attention. Additionally [Wronglyzorro](https://www.reddit.com/user/wronglyzorro/) and [Livelierepeat](https://www.reddit.com/user/livelierepeat/) argued about why backend developers might not like GraphQL. The response from more experienced developer gained triple more upvotes! Additionally I've choosen one longer but very detailed review.

[Wronglyzorro](https://www.reddit.com/r/reactjs/comments/9nmj0w/what_is_your_experience_with_react_apollo_graphql/e7nkk73/) (12) says: 

>*We strictly use react + apollo on our web app. We're also forcing the mobile clients to use it as well. It's incredible and the future. Backend devs of course hate it because they are set in their ways and don't like change. However over the last year when there have been any sort of outages it was never graphql that was a point of weakness. It was always the legacy backend services that crapped out.*
 
[Livelierepeat](https://www.reddit.com/r/reactjs/comments/9nmj0w/what_is_your_experience_with_react_apollo_graphql/e7o92o5/) (40) responded: 
>*You might want to gain a little more insight that that. I used to be a young dev who used all of the latest tools and scoffed at those who "couldn't adapt". I've learned that there are often much more interesting reasons than, "people hate change". Like does GraphQl create burdensome abstractions? What is getting added to their workload that they are resisting?
At some point using all of the latest tools loses its luster. More power comes from understanding the code and the people processes as well.*
 
 [Capaj](https://www.reddit.com/r/reactjs/comments/9nmj0w/what_is_your_experience_with_react_apollo_graphql/e7nlgrn/ 
) (11) detailed review: 
>*We use it in production since May. We're a fullstack team so we're not on the mercy of some other team doing the backend. It wasn't easy persuading everyone, but with a single sample feature built in GQL everyone agreed it looked way better than REST. [Graphiql](/graphql-playground) helped a lot with that. It's been quite good. We have apollo engine enabled on the backend and I really enjoy using metrics to hunt API bugs in prod. We use decapi to decorate our objection.js DB models. We have a single place where we define our models and GQL gets generated almost for free.
On the frontend we use apollo-client, but we don't use caching so far. Our FE focus is on getting rid of our legacy angular.js code, so we don't have time yet to experiment with FE caching.
I don't event consider using apollo for client side state management, because all the feedback I've heard so far was that it's not production ready yet. Also I have to say it looks quite verbose for what it really does. Instead I am hoping I can extend https://github.com/mhaagens/gql-to-mobx and use that for our state management needs. MST works wonders with typescript. If we can generate MST models from our queries on the fly while editing our GQL queries we can boost our productivity considerably.*


#Caching
 
I’ve found a lot of great and upvoted comments from [SwiftOneSpeaks](https://www.reddit.com/user/SwiftOneSpeaks/) and [Scruffles360](https://www.reddit.com/user/scruffles360/) which had been already mentioned here. Here’s what they discussed on lack of caching and potential solution.

[SwiftOneSpeaks](https://www.reddit.com/r/reactjs/comments/bozrg1/graphql_vs_rest_putting_rest_to_rest/eno3ovb/) (23) writes: 

>*While you can configure GraphQL to work differently, as a practical matter they will always be POST requests. Which means all your browser/CDN/proxy caches that rely on GET being idempotent and POST not being now don't work by default. Everything is treated as a new request. You can set the client to do more smart caching, but that's literally solving a problem you created.*

[Scruffles360](https://www.reddit.com/r/reactjs/comments/bozrg1/graphql_vs_rest_putting_rest_to_rest/enokkzb/) (11) respoded: 

>*Apollo has a solution for this. I haven't tried it, but its called Dynamic Persisted Queries if you want to read up. Basically the client makes a GET call with a hash of the query and if it fails, falls back to POST. The next GET call will succeed and populate any proxy caches.*

#Data Fetching

Those guys also presented a different points of view on data fetching. In the [original article](https://www.imaginarycloud.com/blog/graphql-vs-rest/) writer describes an example of blog app with multiple authors and possibility of using GraphQL vs REST. 

[SwiftOneSpeaks](https://www.reddit.com/r/reactjs/comments/bozrg1/graphql_vs_rest_putting_rest_to_rest/eno3ovb/) (23) says: 

>*Everyone emphasizes the "over fetching" problem. I feel like that's a red herring outside of poorly designed services (and that sort of points out the flaw - don't expect GraphQL services from poor service developers to suddenly not be poor) It's easy to resolve if you put a service in front - GraphQL can be that service, but so can something else. The issue isn't over fetching vs not, it's having a central service AND solving the caching issues.*

[Scruffles360](https://www.reddit.com/r/reactjs/comments/bozrg1/graphql_vs_rest_putting_rest_to_rest/enokkzb/) (12) responded:

>*Over fetching is a real problem. When you have hundreds of clients, each calling your system in different ways, adding a property to a rest api causes massive inefficiencies. Many people point out using client-centric facades for their mobile client vs web for example, but that doesn't scale. My project is called by hundreds of clients, each asking for slightly different data in different ways.*

#Big Boys & GraphQL 

Everyone is interested in big companies like Facebook, Netflix and Coursera and their adaptation of GraphQL. In the [article](https://www.imaginarycloud.com/blog/graphql-vs-rest/) commented on Reddit we can find two main reasons as an author - states. The first comment presented was the most upvoted comment that I’ve found. 

- In the early 2010s there was a boom in mobile usage, which led to some issues with low-powered devices and sloppy networks. REST isn't optimal to deal with those problems;
- As mobile usage increased, so did the number of different front-end frameworks and platforms that run client applications. Given REST's inflexibility, it was harder to develop a single API that could fit the requirements of every client.

[Greulich](https://www.reddit.com/r/reactjs/comments/bozrg1/graphql_vs_rest_putting_rest_to_rest/ennt7ak/) (62) responded to article:   
 
>- This is so tangential as to be pointless. A different method of structuring your requests, does not render the network on which those requests better or worse.
- I think the author means endpoint rather than API, because any endpoint, no matter how many there are, is part of the API.
Assuming that is the case, why do we NEED only one endpoint?

[Scruffles360](https://www.reddit.com/r/reactjs/comments/bozrg1/graphql_vs_rest_putting_rest_to_rest/enohrog/) (16) responded to Greulich:

>*The first two points weren't worded well in the article, but are still valid. A REST API can either be generic and reusable or crafted specifically for a known client. In the first case, you aren't going to get good performance when you keep making calls back to the system for more data (especially on high-latency networks like we had on mobile 10 years ago). If you craft your API for a specific client, you obviously run into scalability problems.*
 
#Summary

There’s a lot to say or choose when picking the right comment to summarize the state of GraphQL. **Till today the most popular submissions on reddit are case studies of facebook or netflix yet they aren’t much commented**. 
This gives us already a good summary on reddit’s view on GraphQL. 
From a daily developer life I couldn’t skip what [Kdesign](https://www.reddit.com/r/reactjs/comments/bozrg1/graphql_vs_rest_putting_rest_to_rest/enn9sdf/) (36) wrote:  
> ###*GraphQL provides job security, that’s for sure*.

[Kollektiv](https://www.reddit.com/r/node/comments/bozsb1/graphql_vs_rest_putting_rest_to_rest/enng3ba/) (44) stated a great list of GraphQL issues:
>- Things like query rate limiting and credit estimation are difficult.
- The way type and dataloaders work, it's difficult to bind queries to the database layer in an efficient way by grouping queries without writing a full module for it.
- Validation only checks types so you still need some kind of JSON schema to do additional format validation.
- GraphQL queries only allow for left joins so recreating SQL like INNER JOINs together with filters quickly becomes awkward.
- The imposed pagination (connections) from frameworks like Relay are a mess.

Regarding my initial research on GraphQL [SwiftOneSpeaks](https://www.reddit.com/r/reactjs/comments/bozrg1/graphql_vs_rest_putting_rest_to_rest/eno3ovb/) (24) wrote: 
>I expect many of the "GraphQL is great" reports we are seeing is mainly because ANY new service is great - they only get klunky over time, as assumptions are violated and needs change and code changes accrue. This doesn't mean GraphQL won't be great - it just means I can't trust early reports too much.
 
And finally, I’ve chosen [Mando0975](https://www.reddit.com/r/node/comments/bozsb1/graphql_vs_rest_putting_rest_to_rest/enopzpk/ 
) (28) opinion to summarize this article:

>*Development should always be about picking the right tool for the job. GraphQL isn't always the right tool. REST isn't dead and GraphQL isn't going to kill it.*

###What's your experience with GraphQL?
 
 
 
 

 



The state of GraphQL by Reddit

I recently came across an interesting library for GraphQL. Strawberry is a new GraphQL library for Python 3, inspired by dataclasses. An initial version of Strawberry has been released on GitHub. To follow the project, you can sign up to get updates on the Strawberry site or github. Links below:

[https://strawberry.rocks/](https://strawberry.rocks/)

Strawberry is created by [patrick91](https://twitter.com/patrick91) who is also an organizer of @pyconit. It was originally announced during Python Pizza Berlin.



\#PyPi release and demo

Alpha version on PyPI: [https://pypi.org/project/strawberry-graphql/](https://pypi.org/project/strawberry-graphql/)
Demo on Heroku using Starlette:

\#Installation

```ts
pip install strawberry-graphql
```

Getting Started

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

```ts
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:

```ts
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.

{% github strawberry-graphql/strawberry %}

GraphQL library for Python - Strawberry

### The importance of a typeface

Communication plays a vital role in web design. In the web context communication usually means text. As the major part of the information that a web site is trying to communicate to an end-user is in the form of written language, modern web design started to put more and more pressure on typography which started becoming a principal element of [designs system](https://graphqleditor.com/blog/Design-System/) in the last years.

Good typography is a factor that distinguishes a mediocre website from a decent one by making the act of reading more pleasant, which eases communication of key content to a user.

##### Source: [Understanding typography](https://m2.material.io/design/typography/understanding-typography.html#type-properties)

### Typography JS

Implementing a tiny design change can become a real nightmare as it might turn into making tons of recalculations & [CSS](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) changes. So how to keep your [Typography](https://m2.material.io/design/typography/understanding-typography.html) tight?

Typography.js comes with help, making it easier to create a unique design for your project as all you need to do is provide a configuration to the [Typography.js API](https://github.com/KyleAMathews/typography.js) and it will generate CSS for all block and inline elements. The TypoGraphy.js will take care of many details i.e. making sure that the spacings are nice, which will enhance the general UX value of your product.

### Usage

**Typography.js themes** are simple Javascript objects & **Typography Plugins** are functions extending or modifying the core Typography engine. These functions can modify the styles of different website elements.

Let's take a look at basic JS usage:

```ts
import Typography from 'typography';

const typography = new Typography({
  baseFontSize: '18px',
  baseLineHeight: 1.45,
  headerFontFamily: [
    'Avenir Next',
    'Helvetica Neue',
    'Segoe UI',
    'Helvetica',
    'Arial',
    'sans-serif',
  ],
  bodyFontFamily: ['Georgia', 'serif'],
  // See below for the full list of options.
});

// Output CSS as string.
typography.toString();

// Or insert styles directly into the <head> (works well for client-only
// JS web apps.
typography.injectStyles();
```

### How to use themes

Currently, there are around 30 themes maintained, that are ready to pick up for your project. The themes are published separately as NPM packages. Let's take a look at themes usage on a [typography-theme-github](https://github.com/KyleAMathews/typography.js/tree/master/packages/typography-theme-github) example. First, you need to save the package to your project using:

```ts
npm install --save typography-theme-github
```

Then import and pass into Typography when initializing

```ts
import Typography from 'typography';
import githubTheme from 'typography-theme-github';

const typography = new Typography(githubTheme);
```

As previosuly mentioned, themes are javascript object that can be easily custamized i.e. if you want to change the font size of a github theme just:

```ts
import Typography from 'typography';
import funstonTheme from 'typography-theme-github';
githubTheme.baseFontSize = '22px'; // was 20px.

const typography = new Typography(githubTheme);
```

You can play with available themes here:
[http://kyleamathews.github.io/typography.js/](http://kyleamathews.github.io/typography.js/)

![Live demo sample](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/sample-1730835122886.webp)

Handling web fonts with TypoGraphy.js

In the previous week, we looked into a [basic GraphQL Server implementation in TypeScript](https://graphqleditor.com/blog/graphql-server-typescript/). In this episode of ...

> *GraphQL Server in under 5 minutes series*

... we will take a look at the full-stack template of React GraphQL app.

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

The Fullstack React GraphQL Boilerplate repo contains minimal, basic & advanced boilerplates, each allowing to bootstrap a GraphQL server in no time, whether you want to build a simple "Hello world!" or a fully-featured enterprise app.

|                                                                                                     | [Minimal](https://github.com/graphql-boilerplates/react-fullstack-graphql/tree/master/minimal) | [Basic](https://github.com/graphql-boilerplates/react-fullstack-graphql/tree/master/basic) | [Advanced](https://github.com/graphql-boilerplates/react-fullstack-graphql/tree/master/advanced) |
| --------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------: |
| **Scalable GraphQL server:** The server uses graphql-yoga which is based on Apollo Server & Express |                                               ✔️                                               |                                             ✔️                                             |                                                ✔️                                                |
| **Pre-configured Apollo Client:** The project comes with a preconfigured setup for Apollo Client    |                                               ✔️                                               |                                             ✔️                                             |                                                ✔️                                                |
| **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                                   |                                                ❌                                               |                                             ✔️                                             |                                                ✔️                                                |

### Getting started

The `minimal` boilerplate is only two commands away. Just go for:

```ts
npm install -g graphql-cli
graphql create my-app --boilerplate react-fullstack-minimal
```

Then `yarn start` or `npm run start` will start your basic GraphQL server on a `localhost:4000`.  Basic & advanced setup requires a couple more steps.

After installing [GraphQL CLI](https://github.com/Urigo/graphql-cli), bootstrap GraphQL server with:

```ts
graphql create my-app --boilerplate react-fullstack-basic (or advance)
```

when prompted deploy the Prisma service to a `_public cluster_`, then navigate into `server` directory of your new project and start it:

```ts
cd my-app/server

yarn dev
```

this will run a server on localhost:4000, along with [GraphQL Playground](/graphql-playground); open new terminal tab & navigate back to `my-app`, then run the app

```ts
cd ..
yarn start
```

![Server Structure](/structure.webp)

##### Source: [react-fullstack-graphql](https://github.com/graphql-boilerplates/react-fullstack-graphql)

Fullstack template for React GraphL project

NPM posted [javascript predictions](https://graphqleditor.com/blog/javascript-predictions-for-2019-by-npm/) at the begging of this year with GraphQL as an essential point. They mentioned it twice and stated that you'd have to learn GraphQL this year. We are in the middle of 2019, and I’ve decided to write my predictions focused only on future of GraphQL! There’re five bullet points:

## Lee Byron & foundation will make GraphQL technology an industry standard.

In November 2018, GraphQL co-creator Lee Byron announced the creation of a GraphQL foundation. The GraphQL foundation from the start is supported by the Linux Foundation and aims to grow a neutral GraphQL ecosystem.

In March 2019 - The GraphQL Foundation declared a collaboration with the Joint Development Foundation to promote Open Source and Open Standards. With JDF, the GraphQL community can create and popularize open standards more quickly than ever.

In March 2019 - GraphQL Foundation was joined by IBM to grow open source adoption. At IBM they’ve created OASGraph (a GraphQL wrapper for REST APIs), and they see several opportunities to make GraphQL enterprise-level, for example in API Management.

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

## Majority of the community will experience GraphQL.

Analyzing the latest editions of The State of Javascript survey, we can spot massive growth in desire to experience GraphQL. In the most recent 2018 edition, just 7.1% of the respondent has never heard of GraphQL (matching to 36.% in 2016, and 17.9% in 2017). The 62.5% people say that they would like to learn GraphQL when 20.4% applied it and would use again (it's a 200% growth matching 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/state-1730810384405.webp)

The number of quality learning materials is growing thanks to the community-driven effort. Resources like How to GraphQL, Learn Hasura and Open GraphQL are free, easy to use, and top quality. Youtube is full of great videos - i.e., enterprise case studies from Shopify, GitHub, Medium, Docker, or Twitter at GraphQL Europe Conference. Facebook also recently posted a video on how they used GraphQL with a new version of their UI on their developer page.

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

## GraphQL events will boom all over the globe!

Right now on meetup.com, there are 124 GraphQL meetups with over 61229 members all over the world. Last year we had two major conferences and a lot of smaller full-day events. GraphQL Day has been organized three times in Toronto, Amsterdam, and southern Germany (Lake Constance). Apollo Day happened twice last year (once in New York as well in San Francisco). The most significant events for 2019 are already published:

* GraphQL Conf Berlin - June 20-21, 2019
* GraphQL Summit SF - 29-31 October, 2019

We already past two amazing events:

* GraphQL Day in Toronto (Feb)
* GraphQL Asia in India (April)

## GraphQL will be a dominant API Management tool.

From home automation to apps like Zapier, the tech industry is taking more investment in APIs than ever. Combine this with a desire to learn GraphQL, and we may well have something of a hurricane of adoption.

The number of big companies adopting GraphQL is growing. According to stackshare.io, there are more than 500 companies already adopted. At GraphQL Europe last year, several big players presented case studies of how they’re using GraphQL:

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

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

[https://www.youtube.com/watch?v=GKxog\_SETzs](https://www.youtube.com/watch?v=GKxog_SETzs)

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

Smaller tech companies are usually influenced by what the “big boys” in tech are doing…not because they may need to understand it to plug into those APIs. As a result, the ongoing adoption of GraphQL by big companies is a step towards ubiquity.

## Schema First will be the dominant approach

Schema first is the most popular approach with GraphQL. I believe it will remain this way as a dominant, cause of the few reasons.

* Faster Development: having a common, accepted specification means that development is much faster than traditional methods would allow. Frontend teams can instantly start building components regardless of backend components.
* Choosing a constrained schema forces teams to talk to one another and to work more efficiently and closely by updating specification.
* Cleaner Development means cleaner codebase, in which expected functionality is presented cleanly without duplication of code and effort.
* All of these interests come together to one bigger picture of why schema-first is a great idea – a single source of truth.

Schema-first design is easy, and the benefits gathered from its adoption are huge can’t be ignored. A single source of truth is remarkably powerful, and should be done at the start in a development process – and adopting schema-first design is the easiest way to establish such a source.

GraphQL Predictions 2019

Web APIs are the motors that power most of our nowadays apps. For many years REST has been the principal architect for APIs, but in this article, we will investigate Django to GraphQL library!

With REST APIs, you were regularly creating URLs for every object of data that's available. Thinking about REST API example for books - we'll have URLs for the books themselves, authors, prizes, characters and heroes ... it's already a lot! This could involve a lot of requests.

With GraphQL you have one endpoint, ask what you want and get exactly that. It's is the top wanted technology according to The state of JS 2018 and every week community creates something interesting to help users adopt into new technology. [Yezyilomo](https://twitter.com/yezyilomo) came with the idea of python library that allows to turn Django Rest Framework into GraphQL like API. Let's explore it more.

Django-restql is a library which turn your API made with Django REST Framework(DRF) into a GraphQL like API. With django-restql you will be able to:

* Send a query to your API and get precisely what you need, nothing extra and nothing less.
* Get expected results, since you control what you get from the server.
* Control the data you get, not the server.
* Save the load of fetching unused data from the server.

The library works by choosing dynamically a subset of fields per DRF resource as specified by the request's `query` parameter.

[![github](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/github-1730852299752.webp)](https://github.com/yezyilomo/django-restql)

Follow [Yezyilomo](https://twitter.com/yezyilomo) to get in touch with him!

[![twitter](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/twitter-1730852293478.webp)](https://twitter.com/yezyilomo)

## Installing

```python
pip install django-restql
```

## Getting Started

Using **django-restql** is very simple, you just have to use the DynamicFieldsMixin when defining a View.

```python
from rest_framework import viewsets
from django.contrib.auth.models import User
from .serializers import UserSerializer
from django_restql import DynamicFieldsMixin

class UserViewSet(DynamicFieldsMixin, viewsets.ModelViewSet):
    queryset = User.objects.all().order_by('-date_joined')
    serializer_class = UserSerializer
```

A regular request returns all fields specified on DRF serializer, in fact **django-restql** doesn't handle this request at all:

`GET /users`

```json
    [
      {
        "id": 1,
        "username": "yezyilomo",
        "email": "yezileliilomo@hotmail.com",
        "groups": [1,2]
      },
      ...
    ]
```

**django-restql** handle all GET requests with `query` parameter, this parameter is the one used to pass all fields to be included on a response. For example to select `id` and `username` fields from `user` model, send a request with a ` query` parameter as shown below.

`GET /users/?query=[["id", "username"]]`

```json
    [
      {
        "id": 1,
        "username": "yezyilomo"
      },
      ...
    ]
```

If a query contains nested field, **django-restql** will return its id or array of ids for the case of nested iterable field(one2many or many2many). For example on a request below `location` is a flat nested field(many2one) and `groups` is an iterable nested field(one2many or many2many).

`GET /users/?query=[["id", "username", "location", "groups"]]`

```json
    [
      {
        "id": 1,
        "username": "yezyilomo",
        "location": 6,
        "groups": [1,2]
      },
      ...
    ]
```

**django-restql** support querying both flat and nested resources, so you can expand or query nested fields at any level as long as your field is defined as nested field on a serializer. For example you can query a country and region field from location.

`GET /users/?query=[["id", "username", {"location": ["country", "region"]}]]`

```json
    [
      {
        "id": 1,
        "username": "yezyilomo",
        "location": {
            "contry": "Tanzania",
            "region": "Dar es salaam"
        }
      },
      ...
    ]
```

**django-restql** got your back on expanding or querying iterable nested fields too. For example if you want to expand `groups` field into `id` and `name`, here is how you would do it.

`GET /users/?query=[["id", "username" {"groups": [[ "id", "name" ]]}]]`

```json
    [
      {
        "id": 1,
        "username": "yezyilomo",
        "groups": [
            {
                "id": 2,
                "name": "Auth_User"
            }
            {
                "id": 3,
                "name": "Admin_User"
            }
        ]
      },
      ...
    ]
```

Turn your Django REST API into a GraphQL like API

[GraphQL](https://graphql.org/) is really about collaboration, and the teams that get furthest are those who can work seamlessly together on their GraphQL API.

This idea is well-known for the members of [The Guild](https://github.com/the-guild-org) know from open-sourcing amazing graphql tools. Its members work constantly on new solutions aiming to automate & increase the type-safety of our GraphQL projects. After open-sourcing such tools as [GraphQL Code Generator](https://the-guild.dev/graphql/codegen) or [GraphQL Modules](https://the-guild.dev/graphql/modules), their next work seen daylight - the [GraphQL inspector](https://the-guild.dev/graphql/inspector)

[GraphQL Inspector](https://the-guild.dev/graphql/inspector) is a tool published by [Kamil Kisiela](https://github.com/kamilkisiela/), that detects changes, similar or duplicated types, validates documents against a schema and looks for deprecated usage.

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

**Key features/commands:**

* [diff](https://the-guild.dev/graphql/inspector/docs/commands/diff) - that detects breaking or dangerous changes,
* [validate](https://the-guild.dev/graphql/inspector/docs/commands/validate) - validates documents against a schema & searches for deprecated usage,
* [similiar](https://the-guild.dev/graphql/inspector/docs/commands/similar) - lists similar types in order to find duplicates,
* [coverage](https://the-guild.dev/graphql/inspector/docs/commands/coverage) - finds unused parts of GraphQL Schema based on clients’ fragments & operations.

The tool is available as:

* [CLI tool](https://the-guild.dev/graphql/inspector/docs/installation)
  ![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/inspector2-1730752756946.webp)
* [Github Application](https://github.com/apps/graphql-inspector)![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/inspector3-1730752769833.webp)

##### Source: [GraphQL Inspector](https://the-guild.dev/graphql/inspector)

There is also a [programmatic API](https://the-guild.dev/graphql/inspector/docs/api/schema) available in case you want to build something on the top of it on your own.

GraphQL Inspector

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`.

Blog