Forem: Robert Matyszewski

The state of GraphQL by Reddit

Robert Matyszewski — Mon, 10 Jun 2019 12:00:02 +0000

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 shows front end developer perspective and potential improvements in time to market. Secondly, 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 (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 (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 and 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 (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 (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 (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 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 and Scruffles360 which had been already mentioned here. Here’s what they discussed on lack of caching and potential solution.

SwiftOneSpeaks (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 (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 writer describes an example of blog app with multiple authors and possibility of using GraphQL vs REST.

SwiftOneSpeaks (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 (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 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 (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 (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 (36) wrote:

GraphQL provides job security, that’s for sure.

Kollektiv (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 (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 (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?

If you're looking for best graphql tutorials check this post.

Turn Django REST API into a GraphQL like API

Robert Matyszewski — Fri, 24 May 2019 13:19:11 +0000

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 came with the idea of python library that allows to turn Django Rest Framework into GraphQL like API. Let's explore it more.

// Detect dark theme var iframe = document.getElementById('tweet-1130446070260076545-12'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1130446070260076545&theme=dark" }

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.

yezyilomo / django-restql

Turn your API made with Django REST Framework(DRF) into a GraphQL like API.

Django RESTQL

Django RESTQL is a python library which allows you to 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 exactly what you need, nothing more and nothing less.
Control the data you get, not the server.
Get predictable results, since you control what you get from the server.
Get nested resources in a single request.
Avoid Over-fetching and Under-fetching of data.
Write(create & update) nested data of any level in a single request.

Isn't it cool?.

Want to see how this library is making all that possible?

Check out the full documentation at https://yezyilomo.github.io/django-restql

Or try a live demo on Django RESTQL Playground

Requirements

Python >= 3.6
Django >= 1.11
Django REST Framework >= 3.5

Installing

pip install django-restql

Getting Started

Using Django RESTQL to query…

View on GitHub

Follow Yezyilomo to get in touch with him!

Installing

pip install django-restql

Getting Started

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

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

    [
      {
        "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"]]

    [
      {
        "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"]]

    [
      {
        "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"]}]]

    [
      {
        "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" ]]}]]

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

Getting started with React & GraphQL part II

Robert Matyszewski — Tue, 21 May 2019 09:25:34 +0000

This is the second part of series Getting started with React & GraphQL containing most popular starter kits and example apps. Let's explore at the start what people like and dislike about each technology. Data show below comes from the state of js survey 2018.

React liked aspects	React disliked aspects
⚙️ Elegant programming style & patterns	⚙️ Clumsy programming style
🎁 Rich package ecosystem	🎈 Bloated & complex
🏛️ Well-established option	👶 Hard learning curve
📖 Good documentation	👫 Concerns about the team/company
⚡ Fast performance	📖 Bad documentation
🔧 Powerful developer tooling	⚖️ Fast-changing & breaks often

GraphQL liked aspects	GraphQL disliked aspects
⚙️ Elegant programming style & patterns	🎈 Bloated & complex
📉 Growing momentum/popularity	⚙️ Clumsy programming style
🔧 Powerful developer tooling	👶 Hard learning curve
🕹️ Full-featured & powerful	📖 Bad documentation
📖 Good documentation	🔧 Lacking developer tooling
⚡ Fast performance	🕹️ Limited & lacking in features

Agenda

Extensive React Apollo.
React GraphQL vanilla.js.
React app with local state management.
React Apollo mocking example.
WhatsApp clone.
React Native "hello world".
Pokedex React Native App.
Realtime, Offline AWS AppSync.
Starter fullstack app.

1. Extensive React app

A React + Apollo + GraphQL GitHub Client

the-road-to-graphql / react-graphql-github-apollo

🚀A React + Apollo + GraphQL GitHub Client. Your opportunity to learn about these technologies in a real world application.

A React + Apollo + GraphQL GitHub Client

Features

React 16 with create-react-app
Responsive
React Router 4
Apollo with GitHub GraphQL API
- Queries and Mutations with render props
- Optimistic Updates
- Pagination
- Optimistic Fetch (e.g. Issues)
  - not everywhere for the purpose of demonstrating though

Installation

git clone git@github.com:the-road-to-graphql/react-graphql-github-apollo.git
cd react-graphql-github-apollo
add your own GitHub personal access token in a .env file in your root folder
- scopes/permissions you need to check: admin:org, repo, user, notifications
- REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN=xxxXXX
npm install
npm start
visit http://localhost:3000

Contributing

Please install Prettier integration to your editor and turn on format on save option.

Want to learn more about React + GraphQL + Apollo?

Don't miss upcoming Tutorials and Courses
Check out current React Courses

View on GitHub

Features

React 16 with create-react-app
Responsive
React Router 4
Apollo with GitHub GraphQL API
- Queries and Mutations with render props
- Optimistic Updates
- Pagination
- Optimistic Fetch (e.g. Issues)
- not everywhere for the purpose of demonstrating though

2. React GraphQL vanilla.js

A React GraphQL example using GitHub's GraphQL API with vanilla JS

the-road-to-graphql / react-graphql-github-vanilla

A React GraphQL example using GitHub's GraphQL API with vanilla JS

react-graphql-github-vanilla

A simple React application consuming the GitHub GraphQL API with plain HTTP requests. Read more about it over here.

Features

React 16 with create-react-app
GitHub GraphQL API
Consuming GraphQL with plain JS
no Apollo/Relay
- are you curious about Apollo though?

Installation

git clone git@github.com:the-road-to-graphql/react-graphql-github-vanilla.git
cd react-graphql-github-vanilla
npm install
add your own REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN in .env file
- scopes/permissions you need to check: admin:org, repo, user, notifications
npm start
visit http://localhost:3000

Want to learn more about React + GraphQL + Apollo?

Don't miss upcoming Tutorials and Courses
Check out current React Courses

View on GitHub

Features

React 16 with create-react-app
GitHub GraphQL API
Consuming GraphQL with plain JS
no Apollo/Relay

3. React app with local state management.

A React application using Apollo Client with apollo-link-state for local state management.

the-road-to-graphql / react-apollo-link-state-example

A React application using Apollo Client with apollo-link-state for local state management.

react-apollo-link-state-example

A React application using Apollo Client with apollo-link-state for local state management. While apollo-link-state (as alternative to React's local state, Redux or MobX) is used to manage selected items in a list as local data, the remaining queries and mutations are used for remote data.

Installation

git clone git@github.com:the-road-to-graphql/react-apollo-link-state-example.git
cd react-apollo-link-state-example
npm install
add your own REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN in .env file
- scopes/permissions you need to check: admin:org, repo, user, notifications
npm start
visit http://localhost:3000

Want to learn more about React + GraphQL + Apollo?

Don't miss upcoming Tutorials and Courses
Check out current React Courses

View on GitHub

4. WhatsApp clone

A WhatsApp clone with React Native and Apollo

srtucker22 / chatty

A WhatsApp clone with React Native and Apollo (Tutorial)

Chatty

A WhatsApp clone with React Native and Apollo

Overview

View the Medium blog for this tutorial here.

This tutorial was created using tortilla, an incredible framework for building tutorials.

Starting with the very first commit, every commit in Chatty represents the next step in the tutorial. Follow the tutorial for a guided walk through the code, or investigate a commit to see exactly what code changed for a given step. Since this is git, you can even download the app at any step in the tutorial -- how cool is that?!

Steps

Installing

npm install                       # install server dependencies
cd client && npm install          # install client dependencies

For Steps 7 and higher, please enter your…

View on GitHub

Overview

This is a tutorial for building this example here. This tutorial was created using tortilla, an incredible framework for building tutorials. Starting with the very first commit, every commit in Chatty represents the next step in the tutorial. Follow the tutorial for a guided walk through the code, or investigate a commit to see exactly what code changed for a given step. Since this is git, you can even download the app at any step in the tutorial -- how cool is that?!

5. React Native "hello world"

apollographql / frontpage-react-native-app

📄 Apollo "hello world" app, for React Native

Apollo React Native Hello World app

This is the simple example React Native/Apollo app that lives at dev.apollodata.com.

Installation

Clone the repository and run npm install:

git clone https://github.com/apollostack/frontpage-react-native-app
cd frontpage-react-native-app
npm install

Starting the app

Make sure you have React Native installed.

This app talks to the hello world server, available here: https://github.com/apollostack/frontpage-server

Once you've installed and started that server, start this app with:

react-native run-ios

It will open a iOS simulator.

View on GitHub

This is the simple example React Native/Apollo app that lives at dev.apollodata.com.

6. Pokedex React Native App

learnapollo / pokedex-react-native

A Pokedex App using and teaching Apollo with React Native (Expo)

pokedex-react-native

Pokedex React Native app based on CRNA & Expo using and teaching Apollo and GraphQL

Live Demo: http://demo.learnapollo.com

Getting started

If you haven't done it already, checkout the hands-on Learn Apollo tutorial.

git clone git@github.com:learnapollo/pokedex-react-native.git
cd pokedex-react-native
cd exercise-01
yarn
yarn start

Workflow

As you're following along the Learn Apollo tutorial, you will work on different coding excercises. Each exercise has a folder that you can use to start working and a solution folder where you can take a peek if the instructions given on Learn Apollo are not clear enough.

After you completed the step, you can compare your results to the official solution by looking into the respective folder. If you found a different solution than we're proposing, feel free to tell us about your solution. 💡

Help & Community

Join our Slack community if you run into issues or have questions. We love talking to…

View on GitHub

Pokedex React Native app based on CRNA & Expo using and teaching Apollo and GraphQL

Live Demo: http://demo.learnapollo.com

7. Realtime, Offline AWS AppSync

GraphQL starter application with Realtime and Offline functionality using AWS AppSync

aws-samples / aws-mobile-appsync-events-starter-react-native

GraphQL starter application with Realtime and Offline functionality using AWS AppSync

Introduction

This is a Starter React Native application for using the Sample app in the AWS AppSync console when building your GraphQL API. The Sample app creates a GraphQL schema and provisions Amazon DynamoDB resources, then connects them appropriately with Resolvers. The application demonstrates GraphQL Mutations, Queries and Subscriptions using AWS AppSync. You can use this for learning purposes or adapt either the application or the GraphQL Schema to meet your needs.

Features

GraphQL Mutations
- Create new events
- Create comments on existing events
GraphQL Queries
- Get all events (w/ pagination support)
- Get an event by Id
GraphQL Subscriptions
- Real time updates for comments on an event
Authorization
- The app uses API Key as the authoriation mechanism

AWS Setup

Navigate to the AWS AppSync console using the URL: http://console.aws.amazon.com/appsync/home
Click on Create API and select the Sample Schema option. Enter a API name of your choice. Click Create.

React Native

…

View on GitHub

Features

GraphQL Mutations
- Create new events
- Create comments on existing events
GraphQL Queries
- Get all events (w/ pagination support)
- Get an event by Id
GraphQL Subscriptions
- Real time updates for comments on an event
Authorization
- The app uses API Key as the authoriation mechanism

8. Starter fullstack app

graphql-boilerplates / react-fullstack-graphql

Starter projects for fullstack applications based on React & GraphQL.

Fullstack GraphQL Boilerplates for React & Node.js

Bootstrap your fullstack GraphQL app within seconds

GraphQL boilerplates provide the perfect foundation for your GraphQL server, no matter if you're just getting started with GraphQL or aim to build a fully-fledged application.

Features

Rapid scaffolding: Simply use graphql create (from the GraphQL CLI) to download the boilerplate you want.
Easily extensible: A boilerplate only provides the minimum setup so you can tailor the API to your use case.
Best practices: Each boilerplate incorporates best practices from the GraphQL community.

For a fully-fledged React & Apollo tutorial, visit How to GraphQL. You can more learn about the idea behind GraphQL boilerplates here.

Quickstart

Select a boilerplate and follow the instructions in the belonging README to get started:

minimal: Minimal boilerplate with basic "Hello World" functionality
basic: Basic boilerplate based on a simple data model…

View on GitHub

Bootstrap your fullstack GraphQL app within seconds. GraphQL boilerplates provide the perfect foundation for your GraphQL server, no matter if you're just getting started with GraphQL or aim to build a fully-fledged application.

Features

Rapid scaffolding: Simply use graphql create (from the GraphQL CLI) to download the boilerplate you want.
Easily extensible: A boilerplate only provides the minimum setup so you can tailor the API to your use case.
Best practices: Each boilerplate incorporates best practices from the GraphQL community.

Getting started with React & GraphQL part I

Robert Matyszewski — Thu, 16 May 2019 08:51:39 +0000

The stage of Javascript 2018 Survey 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.

GraphQL is the top most wanted technology to learn.

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:

Universal React+GraphQL starter kit
SaaS Boilerplate
React apollo todo app
Universal React Apollo app
Relay Skeleton

1. Universal React+GraphQL starter kit

leebenson / reactql

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

Universal front-end React + GraphQL starter kit, written in Typescript.

https://reactql.org

Features

Front-end stack

React v16.8 (the one with hooks!) for UI.
Apollo Client 2.5 (React) for connecting to GraphQL.
MobX-React-Lite for declarative, type-safe flux/store state management.
Emotion CSS-in-JS, with inline <style> tag generation that contains only the CSS that needs to be rendered.
Sass, Less and PostCSS when importing .css/.scss/.less files.
React Router 4 for declarative browser + server routes.
GraphQL Code Generator v1.1 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.

Server-side rendering

Built-in Koa 2 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…

View on GitHub

Front-end stack

React v16.8 (the one with hooks!) for UI.
Apollo Client 2.5 (React) for connecting to GraphQL.
MobX-React-Lite for declarative, type-safe flux/store state management.
Emotion CSS-in-JS, with inline <style> tag generation that contains only the CSS that needs to be rendered.
Sass, Less and PostCSS when importing .css/.scss/.less files.
React Router 4 for declarative browser + server routes.
GraphQL Code Generator v1.1 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.

Server stack

Built-in Koa 2 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, with 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, for writing CSS styles inline and generating the minimal CSS required to properly render your components.
PostCSS v7 with next-gen CSS and automatic vendor prefixing when importing .css, .scss or .less files.
SASS and LESS 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 using the Gzip and Brotli 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

MachineAcuity / rebar

Multi-tenant SaaS boilerplate + examples for universal web application with React, Material-UI, Relay, GraphQL, JWT, Node.js, C* DB - Cassandra/Elassandra/Scylla.

Rebar

Multi-tenant SaaS boilerplate + examples for universal web application with React, Material-UI, Relay, GraphQL, JWT, Node.js, C* DB - Cassandra/Elassandra/Scylla.

Technology stack

Client

Technology	Description
found	Extensible route-based routing for React applications.
found-relay	Relay integration for Found.
GraphQL	A query language for describing the capabilities and requirements of data models for client‐server applications.
JSS	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	Library for implementing Material Design in React. All user interface in this kit is built predominantly using Material UI components.
mdi-material-ui	This module provides Material-UI components for all Material Design Icons.
React	The best library for building modern browser-based and mobile UIs.
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	A

…

View on GitHub

Front-end stack

Technology	Description
found	Extensible route-based routing for React applications.
GraphQL	A query language for describing the capabilities and requirements of data models for client‐server applications.
JSS	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	Library for implementing Material Design in React. All user interface in this kit is built predominantly using Material UI components.
React	The best library for building modern browser-based and mobile UIs.
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	A Javascript framework for building data-driven react applications.

Server stack

Technology	Description
Apache Cassandra	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	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	Elassandra Combines Cassandra And Elasticsearch In A Single Powerful Integrated Solution. URB works well with Elassandra.
Express	Fast, unopinionated, minimalist web framework for Node.js
express-cassandra	Cassandra ORM/ODM/OGM for Node.js with optional support for Elassandra & JanusGraph
Express GraphQL	A Node.js express library that allows the creation of GraphQL servers.
JWT	JSON Web Tokens is an industry standard RFC 7519 method for representing claims securely between two parties.
Node.js	Event-driven, non-blocking I/O runtime based on JavaScript that is lightweight and efficient.
Winston	A logger for just about everything.

Development tools

Technology	Description
Babel	Transpiles ESX to ESX and performs relay transformations.
concurrently	Run multiple commands concurrently.
ESLint	A fully pluggable tool for identifying and reporting on patterns in JavaScript.
Flow	Static type checker, designed to find type errors in JavaScript programs.
Husky	Git hooks for eslint and prettier.
LocalTunnel	Expose yourself to the world.
Prettier	Code formatter for javaScript.
React Hot Loader	Allows tweaking of React components in real time.
Webpack	Bundles npm packages, application Java Script, CSS, images, etc. into bundles.

3. React apollo todo app

k8s-platform-hub / react-apollo-todo-app

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

react-apollo-todo-app

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

Pre-requisites

Ensure that you have the HasuraCLI installed on your local machine.
Login into Hasura by running the following command on your command shell

hasura login

Quickstart

Getting the project

To get the project, run the following in your command shell:

hasura quickstart hasura/react-apollo-todo-app

Deploying the project

Deploying the project is equivalent to pushing to a remote git repo

cd react-apollo-todo-app
git add . && git commit -m "Initial commit"
git push hasura master

Opening the react app in your browser

After you are done deploying the project, you can open up the react app in your browser by:

hasura microservice open ui

React App Code

You can…

View on GitHub

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

WeLikeGraphQL / universal-react-apollo-example

Universal React Apollo App (GraphQL) consuming: https://github.com/WeLikeGraphQL/wordpress-graphql-api-example!

Universal React Apollo Example

An example of the app that shows how to use a modern stack (strong accent on GraphQL!).

Features

GraphQL for fetching data! The most awesome part of the project!
Universal Rendering (Server Side Rendering)
ES6/ES2015 with Babel
React data container for the Apollo Client
Integrating predictable state container Redux with Apollo
Hot reloading using React-Hot-Loader
Recompose as a React utility belt for higher order components
Development and production bundling by Webpack
CSSNext: use of official W3C syntax of the future CSS
Transforming styles with JS plugins by PostCSS
Wow.js for CSS animations
Flexbox for resolving layout fatigue 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.
CSS Modules: say goodbye to global scope in CSS and most of conflicts
Jest Snapshot Testng, some…

View on GitHub

Features

GraphQL for fetching data! The most awesome part of the project!
Universal Rendering (Server Side Rendering)
ES6/ES2015 with Babel
React data container for the Apollo Client
Integrating predictable state container Redux with Apollo
Hot reloading using React-Hot-Loader
Recompose as a React utility belt for higher order components
Development and production bundling by Webpack
CSSNext: use of official W3C syntax of the future CSS
Transforming styles with JS plugins by PostCSS
Wow.js for CSS animations
Flexbox for resolving layout fatigue 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.
CSS Modules: say goodbye to global scope in CSS and most of conflicts
Jest Snapshot Testng, some parts in Enzyme and Sinon
Linting both JS and CSS, respectively by: ESLint and Stylelint

5. Relay Skeleton

fortruce / relay-skeleton

React, Relay, GraphQL project skeleton

React Fullstack 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.

Getting started

npm start  # Launch the GraphQL server and the Webpack dev server
open http://localhost:3000

Directory Structure

build/                  // webpack build output
  public/               //  publicly served assets
    index.html
    bundle.js           // frontend bundle  built w/ webpack
  server.js             // backend server   built w/ webpack
src/
  frontend/
    components/         // React components
    containers/         // Relay Containers
    routes/             // Relay Routes
    index.js            // React.render Root component
    index.template.html //

…

View on GitHub

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.

Best resources to learn React & GraphQL

Robert Matyszewski — Tue, 07 May 2019 14:27:25 +0000

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

GraphQL is the top wanted to learn technology.

Clients

Apollo: Apollo Client is a community-driven GraphQL client for React, JavaScript, and native platforms

apollographql / apollo-client

🚀 A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.

Apollo Client

Announcement:
Join 1000+ engineers at GraphQL Summit for talks, workshops, and office hours, Oct 8-10 in NYC. Get your pass here ->

Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL.

☑️ Apollo Client User Survey
What do you like best about Apollo Client? What needs to be improved? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

Documentation

All Apollo Client documentation, including React integration articles and helpful recipes, can be found at:
https://www.apollographql.com/docs/react/

The Apollo Client API reference can be found at:
https://www.apollographql.com/docs/react/api/apollo-client/

Learn how to use Apollo Client with self-paced hands-on training on Odyssey, Apollo's official learning platform:
https://odyssey.apollographql.com/

Maintainers

Name	Username
Ben Newman	@benjamn
Alessia Bellisario	@alessbell
Jeff Auriemma

…

View on GitHub

apollographql / react-apollo

♻️ React integration for Apollo Client

React Apollo

⚠️ THIS PROJECT HAS BEEN DEPRECATED ⚠️

Please note that 4.0.0 is the final version of all React Apollo packages. React Apollo functionality is now directly available from @apollo/client >= 3. While using the @apollo/react-X packages will still work, we recommend using the following imports from @apollo/client directly instead:

old: @apollo/react-components --> new: @apollo/client/react/components

old: @apollo/react-hoc --> new: @apollo/client/react/hoc

old: @apollo/react-ssr --> new: @apollo/client/react/ssr

old: @apollo/react-testing --> new: @apollo/client/testing

old: @apollo/react-hooks --> new: @apollo/client

Moving forward, all Apollo + React issues / pull requests should be opened in the apollo-client repo. Please refer to the Apollo Client migration guide for more details.

React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs using the React framework. React Apollo may be used in any context that React may be used. In the browser, in React Native, or in Node.js…

View on GitHub

Relay Modern: A JavaScript framework for building data-driven React applications

facebook / relay

Relay is a JavaScript framework for building data-driven React applications.

Relay ·

Relay is a JavaScript framework for building data-driven React applications.

Declarative: Never again communicate with your data store using an imperative API. Simply declare your data requirements using GraphQL and let Relay figure out how and when to fetch your data.
Colocation: Queries live next to the views that rely on them, so you can easily reason about your app. Relay aggregates queries into efficient network requests to fetch only what you need.
Mutations: Relay lets you mutate data on the client and server using GraphQL mutations, and offers automatic data consistency, optimistic updates, and error handling.

See how to use Relay in your own project.

Example

The relay-examples repository contains an implementation of TodoMVC. To try it out:

git clone https://github.com/relayjs/relay-examples.git
cd relay-examples/todo
yarn
yarn build
yarn start

Then, just point your browser at http://localhost:3000.

Contribute

We actively welcome pull requests, learn how to…

View on GitHub

AppSync: JavaScript GraphQL library for Offline, Sync, Sigv4. includes support for React Native

awslabs / aws-mobile-appsync-sdk-js

JavaScript library files for Offline, Sync, Sigv4. includes support for React Native

Use AWS AppSync with JavaScript apps ·

AWS AppSync is a fully managed service that makes it easy to develop GraphQL APIs by handling the heavy lifting of securely connecting to data sources like AWS DynamoDB, Lambda, and more.

You can use any HTTP or GraphQL client to connect to a GraphQL API on AppSync.

For front-end web and mobile development, we recommend using the AWS Amplify library which is optimized to connect to the AppSync backend.

For DynamoDB data sources where conflict detection and resolution are enabled on AppSync, use the DataStore category in the Amplify library.
For non-DynamoDB data sources in scenarios where you have no offline requirements, use the API (GraphQL) category in the Amplify library.
If you want to use the Apollo V3 client, use the Apollo Links in this repository to help with authorization and subscriptions.

Looking for the AWS AppSync SDK for…

View on GitHub

Tutorials

React

React Native
- Code an App With GraphQL, React Native, and AWS AppSync: The API
- Code an App With GraphQL, React Native and AWS AppSync: The App
- How to setup React Native + GraphQL + Relay Modern
- Building Chatty: A WhatsApp clone with React Native and Apollo

Developer Tools

GraphQL Playground: Powerful GraphQL IDE built on top of GraphiQL

graphql / graphql-playground

🎮 GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration)

SECURITY WARNING: both graphql-playground-html and all four (4) of it's middleware dependents until graphql-playground-html@1.6.22 were subject to an XSS Reflection attack vulnerability only to unsanitized user input strings to the functions therein. This was resolved in graphql-playground-html@^1.6.22. More Information CVE-2020-4038

Future of this repository: See this issue for details.

GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).

Installation

$ brew install --cask graphql-playground

Features

✨ Context-aware autocompletion & error highlighting
📚 Interactive, multi-column docs (keyboard support)
⚡️ Supports real-time GraphQL Subscriptions
⚙ GraphQL Config support with multiple Projects & Endpoints
🚥 Apollo Tracing support

Security Details

NOTE: only unsanitized user input to the functions in these packages is vulnerable to the recently reported XSS Reflection attack.

Impact

Impacted are any and all unsanitized user-defined input to: -renderPlaygroundPage() -koaPlayground() -expressPlayground() -koaPlayground() -`lambdaPlayground()

If you used static values, such as graphql-playground-electron does…

View on GitHub

GraphiQL Online: An online version of GraphiQL with a configurable endpoint and headers.
GraphQL Editor: a visual graphql editor that allows you to visualize graphql schema and create fake backend out of schema.

Apollo Cache Updater - Helper for updating the apollo cache after a mutation in scenarios where apollo's in-place update may not be sufficient.

ecerroni / apollo-cache-updater

Helper for updating the apollo cache after a mutation

apollo-cache-updater

Zero-dependencies helper for updating the apollo cache after a mutation

Status

Under heavy development

Why?

I wanted an updater that steals the magic of refetch queries while keeping the power of apollo local cache, but stripped of the boilerplate usually needed for each mutation update.

Updating the local cache becomes exponentially complicated when it needs to:

include multiple variables
include multiple queries
know which of our target queries has been already fired before our speficific mutation happend
cover scenarios** where apollo's in-place update may not be sufficient

** Add/remove to list, move from one list to another, update filtered list, etc.

This solution tries to decouple the view from the caching layer by configuring the mutation's result caching behavior through the Apollo's update variable.

Demo

Install

$ npm install --save apollo-cache-updater

OR 

$ yarn add apollo-cache-updater

Usage

Example: Add an Article

The following block of code:

adds a new…

View on GitHub

apollo-codegen: Generate API code or type annotations based on a GraphQL schema and query documents

apollographql / apollo-tooling

✏️ Apollo CLI for client tooling (Mostly replaced by Rover)

Apollo CLI

[2023-03-29] Note - all apollo service:* commands will reach end-of-life on April 28th, 2023. Refer to this blog post for more details.

[2022-07-07] Are you here for codegen? We highly recommend using graphql-code-generator instead. Codegen in this repo is no longer supported and will be removed completely in a future version. For additional migration details, please see this fantastic writeup by @dotansimha: #2053

[2022-01-21] Note - Upcoming Deprecation Plans: We (Apollo) are working towards fully deprecating this repository and its related projects. Most of the functionality in this repository has been replaced by newer projects and the rest will be soon. We'll share detailed migration documentation when everything here is ready to be officially deprecated, but just a heads up in case you're planning on adopting anything here for a new project (which you still can of course if the tooling here works for you - support for…

View on GitHub

graphql-code-generator: GraphQL code generator with flexible support for custom templates

dotansimha / graphql-code-generator

A tool for generating code based on a GraphQL schema and GraphQL operations (query/mutation/subscription), with flexible support for custom plugins.

https://the-guild.dev/graphql/codegen

GraphQL Code Generator is a tool that generates code out of your GraphQL schema. Whether you are developing a frontend or backend, you can utilize GraphQL Code Generator to generate output from your GraphQL Schema and GraphQL Documents (query/mutation/subscription/fragment).

By analyzing the schema and documents and parsing it, GraphQL Code Generator can output code at a wide variety of formats, based on pre-defined templates or based on custom user-defined ones. Regardless of the language that you're using, GraphQL Code Generator has you covered.

GraphQL Code Generator lets you choose the output that you need, based on plugins, which are very flexible and customizable. You can also write your plugins to generate custom outputs that match your needs.

You can try this tool live on your browser and see some useful examples. Check out GraphQL Code Generator Live Examples.

We currently support and maintain these plugins (TypeScript, Flow…

View on GitHub

eslint-plugin-graphql: Check your GraphQL query strings against a schema

apollographql / eslint-plugin-graphql

🚦 Check your GraphQL query strings against a schema.

eslint-plugin-graphql

[2022-01-25] Note - Upcoming Deprecation Plans: We (Apollo) are working towards fully deprecating this repository. We suggest migrating to the community-supported graphql-eslint. We'll share detailed migration documentation when everything here is ready to be officially deprecated, but just a heads up in case you're planning on adopting anything here for a new project (which you still can of course if this project works for you - support for this project will be minimal however).

An ESLint plugin that checks tagged query strings inside JavaScript, or queries inside .graphql files, against a GraphQL schema.

npm install eslint-plugin-graphql

eslint-plugin-graphql has built-in settings for four GraphQL clients out of the box:

If you want to lint your GraphQL schema, rather than queries, check out cjoudrey/graphql-schema-linter.

Importing schema JSON

You'll need to import your introspection query result or the schema as a string in the Schema…

View on GitHub

Apollo Client Developer Tools: Chrome extension for Apollo Client developer tools
Relay DevTools: A Chrome Extension that creates a Relay tab in the developer tools interface for debugging apps in Chrome
Relay Devtools Electron: Standalone Relay DevTools App for debugging Relay outside Chrome
Relay Devtools Electron: Standalone Relay DevTools App for debugging Relay outside Chrome

Top 3 python libraries for graphql

Robert Matyszewski — Wed, 24 Apr 2019 10:23:49 +0000

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.

mirumee / ariadne

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

Ariadne

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 you 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 15.5.1.
Queries, mutations and input types.
Asynchronous resolvers and query execution.
Subscriptions.
Custom scalars, enums and schema directives.
Unions and interfaces.
File uploads.
…

View on GitHub

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

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 available on the 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:

pip install uvicorn

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

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-graphql / strawberry

A GraphQL library for Python that leverages type annotations 🍓

Strawberry GraphQL

Python GraphQL library based on dataclasses

Installation ( Quick Start )

The quick start method provides a server and CLI to get going quickly. Install with:

pip install "strawberry-graphql[debug-server]"

Getting Started

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

import strawberry


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


@strawberry.type
class Query:
    @strawberry.field
    def user(self) -> 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 hardcoded user.

To run the debug server run the following command:

strawberry server app

Open the debug server by clicking on the following link: http://0.0.0.0:8000/graphql

This will open GraphiQL where you…

View on GitHub

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.

// Detect dark theme var iframe = document.getElementById('tweet-1115266087342563329-978'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1115266087342563329&theme=dark" }

https://strawberry.rocks/

Installation

pip install strawberry-graphql

Getting Started

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

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:

strawberry run server app

Open the debug server by clicking on the following link: http://0.0.0.0:8000/graphql

This will open a GraphQL playground where you can test the API.

Graphene

graphql-python / graphene

GraphQL framework for Python

Graphene

💬 Join the community on Discord

We are looking for contributors! Please check the current issues to see how you can help ❤️

Introduction

Graphene is an opinionated 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), Mongo, 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:

integration	Package
SQLAlchemy	graphene-sqlalchemy
Mongo	graphene-mongo
Apollo Federation	graphene-federation
Django	graphene-django

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

Installation

To install graphene, just run this command in…

View on GitHub

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

pip install "graphene>=2.0"

Examples

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:

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

GraphQL library for Python - Strawberry

Robert Matyszewski — Thu, 18 Apr 2019 12:49:01 +0000

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/

Strawberry is created by @patrick91 who is also an organizer of @pyconit. It was originally announced during Python Pizza Berlin.

// Detect dark theme var iframe = document.getElementById('tweet-1115266087342563329-86'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1115266087342563329&theme=dark" }

PyPi release and demo

Alpha version on PyPI: https://pypi.org/project/strawberry-graphql
Demo on Heroku using Starlette: https://demo.strawberry.rocks/graphql

Installation

pip install strawberry-graphql

Getting Started

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

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:

strawberry run server app

Open the debug server by clicking on the following link: http://0.0.0.0:8000/graphql

This will open a GraphQL playground where you can test the API.

strawberry-graphql / strawberry

A GraphQL library for Python that leverages type annotations 🍓

Strawberry GraphQL

Python GraphQL library based on dataclasses

Installation ( Quick Start )

The quick start method provides a server and CLI to get going quickly. Install with:

pip install "strawberry-graphql[debug-server]"

Getting Started

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

import strawberry


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


@strawberry.type
class Query:
    @strawberry.field
    def user(self) -> 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 hardcoded user.

To run the debug server run the following command:

strawberry server app

Open the debug server by clicking on the following link: http://0.0.0.0:8000/graphql

This will open GraphiQL where you…

View on GitHub

Introduction to HTML

Robert Matyszewski — Wed, 17 Apr 2019 12:53:10 +0000

In this article, we'll create a web page from scratch. You'll get a feeling of what's like to be developer by working along. Don't worry about learning text elements or style sheet rules at this point, I'll cover that in another article. For this introduction, I've created a short agenda:

Agenda:

Understand how tags, markups, and elements work.
Learn the structure of HTML documents.
Check how the browser interprets HTML document.
See yourself how style sheet works in action.

I've created a small roadmap of website production for you to understand what we are doing at each stage.

Create content. Write the text for your web page and choose images.
Create an HTML document structure, learn syntax and elements that setup areas for content and metadata
Identify and describe content using text elements.
Add images to the web page and learn about attributes.
Introduction to style sheets - change how the web looks.

I assume that you have a basic understanding of how the web works. I prefer to teach HTML old fashioned way - by hands and text editor. There's no better way to learn and remember by mechanical typing. You'll see how markups work by typing it out and then checking results in a browser. Professional web developers tend to mark up content manually for better control over the code and possibility to make decisions on what elements to use. We are going to be checking our work in a browser very frequently throughout this article - it's helpful at this stage to see the cause and effect of each small change in the code.

This is our final outcome - basic landing page for startup with logo and text description. It's a basic version of my startup landing page.

Open a text editor

For the purpose of this article, I'll be using most basic text editors on Mac - TextEdit or Windows Notepad. Other editors are also fine as long as they are able to edit plain text and save it as *.html.

Notepad in Windows
Normally in windows, you don't see file extensions so before launching Notepad you might try to change that. It's not obligatory but it's very useful. In folder settings, you have to uncheck "Hide extensions for known file types". That's it, now you can create a new document called mypage.html.

TextEdit in Mac
Normally in this app, you'll get rich end editor with a lot of options for making text bold, setting the font size and others. You can see if the editor is in rich edit mode when you have a lot of controls on the formatting toolbar. HTML documents need to be plain text so we need to change document format. On the New Document tab, select Plain text. Under Options, deselect all of the automatic formatting options. On the Open and Save tab, select Display HTML files as HTML Code and deselect “Add ‘.txt’ extensions to plain text files”. The rest of the defaults should be fine. Now you can create a new document and save it as an HTML page.

The content for our webpage.

Now that we have our new document it's time to get some writing. Type or copy already prepared content into a text editor, remain formatting like breaks between lines. You can use my text which I've posted below or write whatever you want. It's a text from my previous startup landing page https://graphqleditor.com.

Feel free to try our editor when you would like to explore more GraphQL!

VISUAL GRAPHQL EDITOR
GraphQL Editor makes understanding GraphQL schema a lot easier. Plan it out by linking visual blocks and our editor will transform them into a code!

GRAPHQL SUPER EASY
There is no graphql knowledge required to start using this editor. Just click and experiment to learn this technology of the future.

THINK VISUALLY
All backend systems should be drawn first. It is much easier to get the desired solution if you see your system and its structure.

NO CODE SOLUTION
You can create graphql server without modifying generated code. The code generated by the editor is ready to use in production.

Create a new folder and save the text as HTML file inside. Name the folder as "startup" and text file as index.html.

Open what you have created in chrome browser. Check what you see - do you have the same results as I am? I left the text with spaces between paragraphs and the browser interpreted it differently. See what's going on? If yours is not looking the same way check text document settings as mentioned before.

Our page is not looking too good right now. The text from the file is converted into one big block of text. Web browsers ignore things like line brakes, tabs, multi-character white spaces, unrecognized markups or text in comments. More on that later ;)

Tags and markups

Let's start by understanding the most basic HTML element on an example. Since now you haven't seen in this article any code or tags. A generic element of HTML looks like this:

<element>Text here</element>

This second example below is using heading tag meaning that it will be the title of the whole page.

<h1>Visual GraphQL Editor</h1>

A tag consists of element name with angle brackets. Element name appears in opening tag so-called start tag and again in closing tag preceded by a slash. The opening and closing tag work like ON an OFF switch where "/" works like OFF. Be careful to use proper slash "/" and not to mistake it with backslash "\".

The tags plus content are referred to as markup where HTML users markups to describe web pages. Basic HTML element has content and it's markup. There are also elements without content

The tags added around content are referred to as the markup. It is important to note that an element consists of both the content and its markup (the start and end tags). Not all elements have content, however. Some are empty by definition, such as the <img> element used to add an image to the page. We’ll talk about empty elements a little later in this chapter.

Capitalization in HTML is not important however most developers preferer writing code in lowercase.

HTML Structure

Below I've used the most basic HTML document from w3schools.com.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph

Are you ready to start updating our sample web page?

Open our .html document in a text editor and start updating.

Put entire document into <html></html> element, than create <head></head> and add <title></title> inside. Also, you should add <meta charset="utf-8"> in the same section. Define the body of the document by wrapping content into <body></body> and markup titles and paragraphs according to your needs. At the end save the document by replacing the old version. Check how it looks on my example. Do you have the same result?

File naming

HTML files must end with .html or .htm, graphics must be named according to their file format: .gif, .png, .jpg or .svg.

Never use character spaces within filenames. Use an underline character to visually separate words within filenames, like my_website.html.

Avoid special characters such as ?, %, #, /, :, ;, •, etc. and national characters (i.e. in Polish we have ł,ę,ó).

It is common among web developers to keep file names short and lowercase. That's an industry standard of keeping the web development clean.

Text elements

With experience from the previous paragraph, you should have no problem marking up a text according to your needs. The purpose of HTML is to add meaning and structure to the content, not intending how the content should look like. That will be introduced in the next paragraph where we'll touch style sheets. Check below some basic text elements and think about how to apply them to our document:

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text

You can follow my example or mark your own text as you want. For first time users, I suggest staying close to this example, therefore, you'll achieve small wins easily and stay motivated.

Ok so let's go. I've used:

h3 - to mark paragraph titles,
h2 - to mark the main title,
p - to mark paragraphs and em to promote the main feature.

Additionally, if you will pay attention you'll find <br> element which is break liner - like enter in a text editor.

<!DOCTYPE html>
<head>
<title>VISUAL GRAPHQL EDITOR</title>
</head>
<body>

<h2><img src="logo.jpg" alt="logo"><br>Visual GraphQL Editor</h2>

<p>GraphQL Editor makes understanding GraphQL schema a lot easier. Plan it out by linking visual blocks and our editor will transform them into a code!</p>

<h3>GRAPHQL SUPER EASY</h3>
<p>There is no graphql knowledge required to start using this editor. Just click and experiment to learn this technology of future.</p>

<h3>THINK VISUALLY</h3>
<p><em>All backend systems should be drawn first. </em> It is much easier to get the desired solution if you see your system and its structure.</p>

<h3>NO CODE SOLUTION</h3>
<p>You can create graphql server without modifying generated code. Code
generated by the editor is ready to use in production.</p>

<h3>Contact</h3>
<p>Robert Matyszewski <br> robert@graphqleditor.com <br> Bialystok, Poland</p>
</body>

Adding images

You have probably noticed that I've inserted already some image inside - a logo to our landing page. That's right. We are getting close to the final result. Below you can download logo used in this code and add to your webpage. To do that - simply copy the code under the link to your HTML file. Remember to put an image in the same folder and keep naming properly according to file type. If you insert jpg file named .png - the browser won't show the file properly

https://thepracticaldev.s3.amazonaws.com/i/xvtvgoxn6iqksys6iw53.png

<img src="logo.jpg" alt="logo">

The image element <img> is an example of an empty element. It tells the browser to get an image file from the server and insert it at that spot in the flow of the text. Other empty elements include the line break <br>. So far we've only used elements that had start and end, so-called content elements. Below we have an example of <br> element:

<h3>Contact</h3>
<p>Robert Matyszewski <br> robert@graphqleditor.com <br> Bialystok, Poland</p>

Style sheets

We’ll change the presentation of the text elements and background by using some uncomplicated style sheet rules. Don’t worry about understanding them all right now. We’ll get into CSS in more detail in another article, but I want to at least give you a taste of what it means to add CSS to your page.

Open your HTML file and add style section into the head section of your document.

<head>
<title>VISUAL GRAPHQL EDITOR</title>
<style>

</style>
</head>

Now type those style rules between the start and end of the style tag. You can already spot that there are some specific visual rules assigned to the entire document described in body and font formatting for h2 and h3 titles. This will affect your entire page.

<head>
<title>VISUAL GRAPHQL EDITOR</title>
<style>

body {
font: normal 1em Verdana;
width: 80%;
margin: 1em auto;
background-color: #CAE7FF;
}

h2 {
font: normal 3em Verdana;
margin: 1em 0 1em;
text-align: center;
color: #0A45BE
}
h3 {
color: #0A45BE
}

</style>
</head>

Now it's time to save the entire HTML document and open it in chrome browser. Congratulations you have created your own webpage with images, HTML structure and style sheets. All went ok? Compare what you have created with my code at the end screenshot.

<!DOCTYPE html>
<head>
<title>VISUAL GRAPHQL EDITOR</title>
<style>
body {
font: normal 1em Verdana;
width: 80%;
margin: 1em auto;
background-color: #CAE7FF;
}

h2 {
font: normal 3em Verdana;
margin: 1em 0 1em;
text-align: center;
color: #0A45BE
}
h3 {
color: #0A45BE
}
</style>
</head>

<body>

<h2><img src="logo.jpg" alt="logo"><br>Visual GraphQL Editor</h2>

<p>GraphQL Editor makes understanding GraphQL schema a lot easier. Plan it out by linking visual blocks and our editor will transform them into a code!</p>

<h3>GRAPHQL SUPER EASY</h3>
<p>There is no graphql knowledge required to start using this editor. Just click and experiment to learn this technology of future.</p>

<h3>THINK VISUALLY</h3>
<p><em>All backend systems should be drawn first. </em> It is much easier to get the desired solution if you see your system and its structure.</p>

<h3>NO CODE SOLUTION</h3>
<p>You can create graphql server without modifying generated code. Code generated by the editor is ready to use in production.</p>

<h3>Contact</h3>
<p>Robert Matyszewski <br> robert@graphqleditor.com <br> Bialystok, Poland</p>

</body>

Junior Web Developer environment setup

Robert Matyszewski — Thu, 11 Apr 2019 08:30:17 +0000

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.

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

To verify if the installation was successful type:

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 or upgrade it with brew upgrade .

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:

brew install git

To verify if the installation was successful type:

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.

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:

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

To verify if the installation was successful type:
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.

brew install node

To verify if the installation was successful type:
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:

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?

Introduction to backend development for newbies!

Robert Matyszewski — Wed, 27 Mar 2019 14:54:49 +0000

Introduction

In this article, I’ll cover a general introduction to backend development without a deep dive into the code. I’ll provide languages and frameworks that you can explore more. If you're is looking for more technical tutorials, follow me and check my other posts :)

If you’re not a software developer terms like backend or front end development can give her a headache. Adding to that a long list of different tools, languages and frameworks it’ll confuse where to start. However, there’s good news - you don't need to learn coding to understand the basics. It’s helpful to know the basics of typical tech stack whether any developer is working around you.

I've divided this article into few sections.

Let's start by agenda:

What is backend?
API's
Servers
Databases
Backend developer
Backend languages

1. What is backend?

Imagine a typical web application like your online banking service - what comes to your mind? You have the visual part which is created for human interaction and something behind. That’s the easiest way we can describe front end (the visible part - colours, animations, layout, and all the stuff that you can experience) below sample interface of a web application.

The backend is the internal engine of the application which includes things like the server, API and the database. The backend is often described as a “server-side” opposite to “client-side” or “browser side” where the client sends a request to the backend by clicking on a specific button. The backend is the machinery that works silently behind the scenes.

A common backend is a mix of the server, APIs, databases and operating systems that power an application’s front end. Every app can use very different tools whether it’s the use of cloud-based servers and data warehouses, containerization with a service like Docker, APIs to replace more complex processing or Backend-as-a-Service providers. Below sample library app schema visualised with GraphQL Editor.

To start things, we’ll break the server side down into four main components: the server, API, the database, the operating system, and the software. In the next chapters, we’ll explain more about each of these components of the backend.

2. API's

Technically, API stands for Application Programming Interface. In general terms, it's a set of clearly defined methods, rules and definitions of communication between applications. In terms of backend development, it's crucial to mention that backend and frontend are communicating via API. Good designed API makes it simpler to develop parts of the web app by providing all the blocks, which are then put together by developer. To give it context to our article API is a set of rules on how the frontend asks backend for data.

The most popular standards for creating API for the web today are REST API GraphQL. Exploring GraphQL more we can say it is a query language for your API. The most important feature of GraphQL is that its language agnostic with its own rules and definitions. It’s not created to work with any specific technology. Below you can see an example of GraphQL with GraphQL Editor.

3. Servers

When you type any domain into a web browser that means you type server address. If you go deeper into specific sections of that website, you’ll see that extended URL with additional details. This include folder path, subdirectory locations and specific file names. Let’s have a look at Google’s logo. This particular address contains precise information on where exactly on the server file exists.

As part of other components, the server is the heart of the system. It could be located locally on your computer or in a modern way in the cloud. You can imagine a cloud as a group of connected computers. That network of computers can run various tasks including file storage, security and encryption, databases, email, and web services. The cheapest option of cloud servers is a shared virtual machine, a computer which are running many servers at the same time. More expensive one are dedicated machines which you can rent according to your needs. Virtualisation creates shared servers.

The primary goal of virtualisation is to manage workloads by transforming traditional computing to make it more scalable. In operating system-level virtualisation, it is possible to run multiple operating systems on a single piece of hardware. Virtualisation technology involves separating the physical hardware and software by emulating device using the software.

One of a popular lightweight alternative to virtualisation is containerization. Imagine catching application into a virtual container with its environment. It provides benefits of loading an application onto a virtual machine, as the application runs on any suitable physical computer without any worries. Containerization has gained recent fame with the open-source technology called Docker. Using containers, you can easily migrate apps between servers.

As you’ve got the basics about on-site servers, expand your knowledge with a look at virtualisation, how servers get provisioned to house multiple apps, and containerization, another way servers provision their operating systems out to house compartmentalised applications.

4.Databases

A database is the storage of a collection of data. That may sound overly naive, but it pretty much sums up what any database is. A database could be as primary as a text file with a list of names. Alternatively, it could be as complex as a large, relational database management system, complete with in-built tools to help you maintain the data.

Any time you request something from a website or search a place to stay at Airbnb your front end sends a request to the database and creates a response. The data is transmitted back to the website, and you see the result of your actions. You can also update or edit data in your database from the visual interface. Imagine uploading pictures to Facebook or adding a description to your products in CMS.

A Database Management System (DBMS), is a tool that enables the management and creation of databases. Today most database systems are referred to as a Relational-DBMS, because of their capacity to store related data across multiple tables. When more than two tables contain related data, they have a relationship. You design your database in a way that defines which tables will have to be related. Most popular relational DBMS include Microsoft Access, SQL Server, MySQL.

Alternatively, to related databases we have NoSQL. It’s a comprehensive term that doesn’t describe any particular database type. It’s a group of databases that don’t fit into a relational model. Let’s explore some examples:

Column store database,
Graph databases that use a graphical model,
Document store database that uses a document-oriented model,

5. Backend developer

Back-end developers work with front-end developers by giving the outward facing web app elements of server-side logic. In other words, back-end dev’s create the business logic to make the web app work correctly, and they achieve this through the use of back end scripting languages. Some of the regular responsibilities include:

Writing server-side code
Interacting with the database
Writing code to communicate with the database
Deploying the system online so the app can be usable
Maintaining security of the code
Maintaining code to be optimised to handle large traffic volume
Integrating server-side logic with front end
Design and implementation of data storage solutions
Building reusable code and libraries for future use
Writing documentation for ease of use for new developers
Back-end developers usually work in groups or teams. Within larger organisations, there can be both back-end and front-end engineers, which can include engineers - with specific roles like REST API developers or quality assurance or architects.

6. Backend languages

Back-end developers can learn a variety of languages and frameworks depending on the type of app they’re developing, its specific processing specifications, and what other components already exist on the back end.

Languages will differ in file size, speed, adaptability, how many lines of code required, and the style of coding. Some back-end scripting languages are object-oriented, a method of programming that bundles properties and functions within objects. Different languages may be compiled rather than interpreted, something that affects load speed, readability, and processing power needed to run the app.

Most of the sites are built on PHP, making it one of the most common back-end languages. However, there are plenty of others to choose from. You may want to use the processing power of Python for a data-driven site, or leverage the speed of lightweight languages like Ruby for quick prototyping. It’s up to you and your developers, and every language has its pros and typical applications.

Take a look at a few of the other big hitters in back-end programming, like:

Java
C# and C++
.NET
Perl
Scala
Node.js (and JavaScript)

Top tools for junior frontend developer

Robert Matyszewski — Fri, 22 Mar 2019 12:33:47 +0000

Introduction

It's hard to choose what to learn when you're starting your journey as a frontend developer. There're plenty of sources, courses, tutorials or frameworks to choose from. You might get confused starting researching all above. One practical approach is a craftsman road where you learn the process by tools. I've created a list of top tools for junior frontend developer and explained why you should use them. Follow me to get more tutorials!

GitHub

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. Github is also a great community where you find and collaborate a lot of open source projects.

Chrome Dev Tools

It's a set of developer tools built into the Chrome browser. With DevTools you can access the internals of any web application, see how it performs on different screen sizes and change any page. You can edit pages real-time and diagnose problems quickly. It ultimately helps you build better websites and faster. Additional network tools can help you optimise your loading flows while a timeline gives you a knowledge of what the browser is doing at the moment.

React Developer Tools

React is a popular javascript framework among web development last years. However, Google Chrome Developer tools cannot examine the Dom as React Components. Don’t be confused; there is a Chrome Extension called React Developer Tools that allows you to get into the nitty-gritty of how data is passed through components.

Pixel Perfect

This chrome extension helps develop your websites with per-pixel sharpness! It's for web developers and markup designers. PerfectPixel allows developers to put a half-transparent image overlay over the top of the developed HTML and perform pixel perfect comparison among them.

Visual Code Editor

Visual Studio Code is the number one code editor for building and debugging modern web and cloud applications. It’s very customizable, has built-in git, massive list of integrations, powerful autocomplete and debugging features. It’s a powerful multilanguage IDE, super fast and simple. Also, free an open source.

Codepen

Codepen it’s amazing web-based and community-driven code editor. You can see right away results of code. It’s a magic place for designers and front end developers where people are sharing and commenting on their front end skills. It’s a great source of inspiration for new ideas and ways to code. The editor is used for: prototyping new ideas, instant bug testing, sending clients things to look at, evaluating potential hires and finding inspiration.

GraphQL and GraphQL Editor

GraphQL is a query language for APIs. It's very trendy nowadays and recognised by leading tech organisations. GraphQL Editor makes understanding GraphQL schema a lot easier. Plan it out by linking visual blocks and our editor will transform them into a code! Create fake backend out of GraphQL, and you could power up your application.

Npm

It's a package manager for JS. It helps to find packages of reusable code and compile them in new ways. It has over 470,000 free code packages in the database to be used by you. This web dev tool is a command-line utility for interacting with a repository that aids in the package. It also has team features with your private namespace.

Webpack

It's a bundler for javascript and friends which packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, CoffeeScript, LESS, ... and your custom stuff.

Figma

Figma is a design app but very trendy and good to collaborate with designers. Every Figma file has Code Mode where a developer can inspect design files. When designer share view-only files with the developer, he will have access to Code Mode where they can examine, comment, and export without having full edit access to the files.

Web.dev

Every web project needs proper feedback and testing. With this tool, you can check how your website performs according to modern standards. You can measure things: performance, PWA status, accessibility or SEO. Also, you can practice skills: like load speed, network resilience or data security. Check how your website performs over time, and keep track as you learn on your schedule.

Terminal

A terminal is a text-based interface you can type your commands in. A shell takes these commands and tells the operating system to execute them. Getting familiar with tools like Git from the terminal gives you more power and flexibility over GUI. In the end, a GUI is a graphical shell in front of a command-line tool. Being “closer to the metal”, it can also help you to get out of trouble in case a GUI is stuck or messed up. It's an essential productivity tool in a developer's arsenal.

Others

Caniuse.com - are you worried about browser compatibility for some cutting edge ideas? Try this site and see if you can use it.
StackOverflow - that site doesn't need explanation ;)
TinyPNG- Advanced lossy compression for PNG images
Compressor.io - another image compression tool
Notion.so - recording notes, specs, product owner feedback and planning.
Postman - when working with REST APIs.

GraphQL tutorial for newbies - cheatsheet

Robert Matyszewski — Wed, 20 Mar 2019 13:31:12 +0000

Introduction

I'm a founder of a Visual Editor for GraphQL. This blog post is part of a tutorial for newbies. Follow me to get more and check other articles. I’ve already covered basics of GraphQL, introduction and Schema Definition Language. Feel free to comment, suggest changes.

Type definitions

scalar > Scalar type
type > Object type
interface > Interface type
union > Union type
enum > Enumerable type
input > Input object type

Scalar types

String - set of characters in UTF-8 format,
Int - 32-bit integer,
Float - floating point number,
Boolean - value true or false
ID - a type representing the unique identifier for the object.

Type modifiers

String > Nullable string
String! > Required string
[String] > List of strings
[String]! > Required list of strings
[String!]! > Required list of required strings

Example of a GraphQL schema

type Author {
  id: Int!
  firstName: String
  lastName: String
  """
  the list of Books by this author
  """
  books: [Book]
}
type Book {
  id: Int!
  title: String
  author: Author
  pages: Int
}

Explore this example in our Visual Editor for GraphQL

This schema allows the following query:

type Query {
  book: [Book]
  author(id: Int!): Author
}

Input Arguments

Basic Input

type Root {
  users(limit: Int): [User]!
}

Input with default value

type Root {
  users(limit: Int = 10): [User]!
}

Input with multiple args

type Root {
  users(limit: Int, sort: String): [User]!
}

Input with multiple args and default values

type Root {
  users(limit: Int = 10, sort: String): [User]!
}

or

type Root {
  users(limit: Int, sort: String = "asc" ): [User]!
}

Interfaces

interface Publication {
  title: String!
  releasedDate: String!
}
type Magazine implements Publication {
  title: String!
  releasedDate: String!
  version: Int!
}  
type Book implements Publication {
  title: String!
  releasedDate: String!
  pages: Int!
}

Unions

union SearchResult = Book | Author

type Query {
  search(text: String!): SearchResult
}

query {
  search(text: "Park") {
    ... on Book {
      title
    }
    ... on Author {
      name
    }
  }
}

Enums

enum RGB {
  RED
  GREEN
  BLUE
}
type Root {
  color: RGB
}

Input Object Types

input ListUsersInput {
  limit: Int 
  since_id: ID
}
type Root {
  users(params: ListUsersInput): [Users]!
}

If you're looking for best graphql tutorials check this post.

Forem: Robert Matyszewski

The state of GraphQL by Reddit

Agenda

General review

React & Apollo review

Caching

Data Fetching

Big Boys & GraphQL

Summary

GraphQL provides job security, that’s for sure.

What's your experience with GraphQL?

Turn Django REST API into a GraphQL like API

yezyilomo / django-restql

Turn your API made with Django REST Framework(DRF) into a GraphQL like API.

Requirements

Installing

Getting Started

Installing

Getting Started

Getting started with React & GraphQL part II

Agenda

A React + Apollo + GraphQL GitHub Client

the-road-to-graphql / react-graphql-github-apollo

🚀A React + Apollo + GraphQL GitHub Client. Your opportunity to learn about these technologies in a real world application.

A React + Apollo + GraphQL GitHub Client

Features

Installation

Contributing

Want to learn more about React + GraphQL + Apollo?

Features

A React GraphQL example using GitHub's GraphQL API with vanilla JS

the-road-to-graphql / react-graphql-github-vanilla

A React GraphQL example using GitHub's GraphQL API with vanilla JS

react-graphql-github-vanilla

Features

Installation

Want to learn more about React + GraphQL + Apollo?

Features

A React application using Apollo Client with apollo-link-state for local state management.

the-road-to-graphql / react-apollo-link-state-example

A React application using Apollo Client with apollo-link-state for local state management.

react-apollo-link-state-example

Installation

Want to learn more about React + GraphQL + Apollo?

A WhatsApp clone with React Native and Apollo

srtucker22 / chatty

A WhatsApp clone with React Native and Apollo (Tutorial)

Chatty

A WhatsApp clone with React Native and Apollo

Overview

Steps

Installing

Overview

apollographql / frontpage-react-native-app

📄 Apollo "hello world" app, for React Native

Apollo React Native Hello World app

Installation

Starting the app

learnapollo / pokedex-react-native

A Pokedex App using and teaching Apollo with React Native (Expo)

pokedex-react-native

Getting started

Workflow

Help & Community

Live Demo: http://demo.learnapollo.com

GraphQL starter application with Realtime and Offline functionality using AWS AppSync

aws-samples / aws-mobile-appsync-events-starter-react-native

GraphQL starter application with Realtime and Offline functionality using AWS AppSync

Introduction

Features

AWS Setup

React Native

Features

graphql-boilerplates / react-fullstack-graphql

Starter projects for fullstack applications based on React & GraphQL.

Fullstack GraphQL Boilerplates for React & Node.js

Features

Quickstart

Features

Getting started with React & GraphQL part I