One of the best things about GraphQL is that it can be implemented in any language. Today let’s take a look at Java server implementation for GraphQL. Let’s use Maven and assume that we already have set up the project structure. What next?

### Dependencies

To run GraphQL in your Java project you only need one library which is  [GraphQL Java](https://github.com/graphql-java/graphql-java) implementation. However, there are a couple of libs you might find useful when using GraphQL Java:

* [Spring Boot](https://github.com/graphql-java/graphql-java-spring) - GraphQL Java Spring and Spring Boot integration that will handle any HTTP related tasks, expose the GraphQL service on the `/graphql` endpoint of your app and accept `POST` requests containing your GraphQL payload.
* [GraphQL Java Tools](https://github.com/graphql-java-kickstart/graphql-java-tools) - this library allows you to use the GraphQL SDL to build your graphql-java schema.
* [GraphQL Java Servlet](https://github.com/graphql-java-kickstart/graphql-java-servlet) - implementation of GraphQL Java Servlet including support for libraries like Relay.js, Apollo etc. and wraps the Java implementation of GraphQL provided by GraphQL Java.

So add dependencies you need to Project Object Model file (pom.xml):
![Add GraphQL Java dependency](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/dependencies.webp)

### Define the schema

GraphQL Schema is the centerpiece of any GraphQL implementation so we definitely need one before going any further. To make it easier to understand the operation that a server can perform GraphQL defined a universal schema syntax know as SDL (Schema Definition Language).

The SDL defines the elements of your project like:

* **`type`** (the most basic GraphQL schema components):
  ![[GraphQL Type](/docs/what-is-graphql/)](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/type.webp)
* **`query`** (asking the server for the data)
  ![GraphQL Query](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/query.webp)
* **`mutation`** (manipulating the data):
  ![GraphQL Mutation](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/mutation.webp)

The fastest way to define your schema is to use [GraphQL Editor](https://graphqleditor.com/). It allows you to define your schema traditionally (code) or shape it from visual nodes.

### Server

There plenty of servlet containers to choose from, both open source and commercial,  so just pick the one you feel comfortable with. Let's use Jetty for our example and   implement it via a [Maven Plugins](https://maven.apache.org/pom.html#Plugins):
![Jetty](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/jetty.webp)

And you are almost there, the next steps are:

* adding some more basic server configurations like right Java version or servlet specification
* creating **`GraphQLEndpoint`** class for exposing your API
* defining resolvers

If you want to read more details about GraphQL Java implementation to take a look at Bojan's tutorial regarding setting up [GraphQL Java](https://www.howtographql.com/graphql-java/1-getting-started/) server on [https://www.howtographql.com/](https://www.howtographql.com/)

Getting started with GraphQL Java

This year will for sure bring new ideas to the web development as well as cultivate some well-known ones. To provide you with an insight into what is going to happen this year, these are the trends that will continue to dominate the development of the network.

### Progressive Web Apps

Progressive Web Apps (PWA) is a new approach to building applications by combing the best features of the web with the top qualities of mobile apps. PWA has no entry barrier as no install is required. From the very launch in a browser, PWA slowly builds a “relationship” with its user over time by providing features like blazingly fast loading time (even on low-performing networks), communicating relevant information with push notifications or as simple things as easier access by the home-screen icon.

The key advantages of Progressive Web App are:

* **Progressive & responsive** - *works the same for every user, regardless of browser choice or device*
* **Connectivity independent** - *designed to work offline or on a low-performing network connection.*
* **Engageable & shareable** - *users can add apps to their home screen (by-passes app stores) & share easily via URL.*

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

###### Source: [Google Developers](https://developers.google.com/web/progressive-web-apps/)

### Low-code development solutions

LCDPs are visual-based design system which means that the amount of coding is often reduced to zero and that of most of it is replaced by a draw/drag-and-drop system. The rising demand for automation and innovation in many different industries requires:

* *Faster development process*,
* *Easier deployment*,
* *Cost reduction*.

This allows building apps faster (shorter time-to-market) and is expected to push the low-code development trend into its highest high in the next couple of years, which would make tools like [Fuse Open](https://fuseopen.com/) (*mobile apps*), [BuildBox](https://signup.buildbox.com/) (*mobile games*), [Airtable](https://www.airtable.com/platform) (*spreadsheet-database*) or [GraphQL Editor](https://graphqleditor.com/) (*GraphQL schema design*) observe the rise of popularity.

![Low-code GraphQL Editor](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/edytor.webp)

### Cybersecurity

> *We no longer go online, we live online.*

It's a truth hard to swallow but we are ruled by the Internet. It took control of our lives. We work, learn, shop & spend our free time online. More and more aspects of our lives are becoming digitalized so no wonder that our security online has become one of the most (if not the most) important issue. Since we are more tend to upload our confidential data like credit cards, IDs and other to the web, it makes data breaches & cyber threats becoming more frightening than ever before. As recent history has shown, no one is safe. In 2018 we had some major data breaches including Starwood-Marriot (500 million users data), Quora (100 million) and 2019 started with shocking information that since 2012 Facebook has not properly secured the passwords of as many as 600 million users. These passwords were stored in plain text and able to be accessed by more than 20,000 of Facebook’s employees.

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

###### Source: [Avast Blog](https://blog.avast.com/biggest-data-breaches)

With that in mind, companies need to improve their security system to protect their (and their users) private data. Cybercriminals won’t stop to look for vulnerabilities and new solutions are necessary to battle new cybersecurity challenges.

Top 3 Development trends of 2019

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

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

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

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

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

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

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

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

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

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

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

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

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

![GraphQL Editor](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/editor-1730852697723.webp)

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

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

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

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

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

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

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

![web.dev](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/webdev-1730852743154.webp)

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

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

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

 Top tools for a junior frontend developer

## Being short-sighted

It’s a mistake that can lead to serious complications later on. Thinking about your schema try being as predictive as possible in terms what can be required later on when your project grow. Even if you think that initial odds of this happening seems very low, take a while to plan through possible future elements like additional fields or output/input object types. If there is even a tiny changes that you will need them in the future, having them thought through will prevent your project from breaking changes later on.

> Remember: A schema is a most important part of any [GraphQL](https://graphql.org/) project so make sure to treat it with all due respect!

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

## Inconsistency in naming

It's really important to keep naming conventions consistent. There are some common practices you shouldn't ignore, like:

* using [camelCase](https://en.wikipedia.org/wiki/Camel_case) for fields
* using [PascalCase](https://en.wikipedia.org/wiki/Camel_case) for the names of types
  ![ok](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/ok.webp)
* using all capital letters for ENUM values
  ![enum](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/enum.webp)

## Flattening objects in queries

There are a lot of mistakes you can make when "speaking" GraphQL. Not only mistakes that might prevent your project form working properly, but also that they won't use GraphQL possibilities to the fullest. A good example is a type we have created above.

![Avoid queries like this](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/ok.webp)

The `leageId` is a problem here as this will be seen as an inconsistency. When querying for a team’s league you need to perform two database calls:

* to get the team with the `leagueId`
* to pass the `leagueId` to another query

This is very negligent as GraphQL it's all about reducing the number of database calls. The GraphQL preferable way is nesting the output types which makes it easier to call your database with a single request and [batch your data](https://graphqleditor.com/blog/GraphQL-Performance-issues-and-how-to-handle-them/):
![Try structurize your GraphQL queries this way](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/bad.webp)

## Not using graphical interfaces

GraphQL is a very modern "language" so there are a lot of [amazing tools, plugins or editors](https://graphqleditor.com/blog/GraphQL-resources-top-tools-tutorials-for-beginners/) that can speed up the schema design process so why not using them? If you are starting your journey with GraphQL it is a great idea design your first schema with a graphical interface. This will reduce the number of mistakes, speed up your work and learning curve of GraphQL by a lot!

## Not using GraphQL

If you are still focusing on REST you are making a canonical mistake. As none of them is perfect and both have pros & cons, it's really wise to know them both and then make a rational decision which would suit your project better.

Five mistakes to avoid when getting started with GraphQL


GraphQL popularity is continuously growing.
If you want to jump on a GraphQL train here is a list of the best tools, extensions, and tutorials to start with. Let's learn it together!

If you have any interesting resources mail me a tip to tomek@graphqleditor.com and I will update our directory.

### Knowlege base

1. [GrapQL Official Documentation](https://graphql.org/learn/) is definitely the best place to start your GraphQL adventure.
2. [Official Facebook Draft RFC Specification](http://spec.graphql.org/) is a place to go if you are looking for raw knowledge regarding GraphQL project.
3. [GraphQL Weekly](https://www.graphqlweekly.com/) is a newsletter with news, articles, and everything related to GraphQL
4. [How to GraphQL](https://www.howtographql.com/) is a website which will take you into a journey from GraphQL newbie to releasing your first GraphQL project.
5. Explore-tech.org is a helpful resource for collecting GraphQL tools, especially libraries.

### Tools & Extensions

1. [GraphQL Docs](https://github.com/2fd/graphdoc) is a simple way of generating static documentation for a GraphQL schema in seconds.
2. [Hygraph (formerly GraphCMS)](https://hygraph.com/) a tool that allows you to define the GraphQL API. Create structures, relationships, powerful permissions and manage your content with ease, generally speaking, build a hosted GraphQL back-end for your web project along with tools to manage its content.
3. [GraphQL Editor](https://graphqleditor.com/) makes it easier to understand the GraphQL schema. Create it by combining visual blocks and the editor will transform them into code! Features like loading schema from URL/file or a fake backend data can speed up the prototyping of your app.
4. Apollo Launchpad allows you to write a GraphQL schema in JavaScript making GraphQL code very accessible.
5. [[GraphiQL](/graphql-playground)](https://github.com/graphql/graphiql) is a simple IDE tool for testing and documenting GraphQL APIs with a nice graphical interface.
6. [[GraphQL Playground](/graphql-playground)](https://github.com/graphql/graphql-playground) a [GraphiQL](/graphql-playground) alternative.
7. [Apollo Elements](https://github.com/apollo-elements/apollo-elements) a library for building GraphQL-backed UIs without UI frameworks.

### Blogs

1. https://www.apollographql.com/blog/
2. https://www.robinwieruch.de/
3. https://learning.atheros.ai/
4. https://graphqleditor.com/blog/
5. https://graphql.org/blog/
6. https://hasura.io/blog/tagged/graphql/

### Video tutorials

1. [How to build a GraphQL Server](https://www.youtube.com/playlist?list=PLillGF-RfqbYZty73_PHBqKRDnv7ikh68&utm_source=notify_mailer&utm_medium=email&utm_campaign=new_reply_email)

### Communities

1. https://www.reddit.com/r/graphql
2. [ReactiFlux Discord (#graphql)](https://discord.com/invite/0ZcbPKXt5bYZVCkR)

### Let's build this directory together!

Do you know any other useful tools, tutorials or blogs for GraphQL?
Maybe you are running your own blog or developing a GraphQL tool?

Send me a link to tomek@graphqleditor.com and I will post it here :)


GraphQL Resources - beginner tools, extensions & tutorials

GraphQL popularity is continuously growing.
If you want to jump on a GraphQL train here is a list of the best tools, extensions, and tutorials to start with. Let's learn it together!

If you have any interesting resources mail me a tip to tomek@graphqleditor.com and I will update our directory.

### Knowlege base

1. [GrapQL Official Documentation](https://graphql.org/learn/) is definitely the best place to start your GraphQL adventure.
2. [Official Facebook Draft RFC Specification](http://spec.graphql.org/) is a place to go if you are looking for raw knowledge regarding GraphQL project.
3. [GraphQL Weekly](https://www.graphqlweekly.com/) is a newsletter with news, articles, and everything related to GraphQL
4. [How to GraphQL](https://www.howtographql.com/) is a website which will take you into a journey from GraphQL newbie to releasing your first GraphQL project.
5. Explore-tech.org is a helpful resource for collecting GraphQL tools, especially libraries.

### Tools & Extensions

1. [GraphQL Docs](https://github.com/2fd/graphdoc) is a simple way of generating static documentation for a GraphQL schema in seconds.
2. [Hygraph (formerly GraphCMS)](https://hygraph.com/) a tool that allows you to define the GraphQL API. Create structures, relationships, powerful permissions and manage your content with ease, generally speaking, build a hosted GraphQL back-end for your web project along with tools to manage its content.
3. [GraphQL Editor](https://graphqleditor.com/) makes it easier to understand the GraphQL schema. Create it by combining visual blocks and the editor will transform them into code! Features like loading schema from URL/file or a fake backend data can speed up the prototyping of your app.
4. Apollo Launchpad allows you to write a GraphQL schema in JavaScript making GraphQL code very accessible.
5. [[GraphiQL](/graphql-playground)](https://github.com/graphql/graphiql) is a simple IDE tool for testing and documenting GraphQL APIs with a nice graphical interface.
6. [[GraphQL Playground](/graphql-playground)](https://github.com/graphql/graphql-playground) a [GraphiQL](/graphql-playground) alternative.
7. [Apollo Elements](https://github.com/apollo-elements/apollo-elements) a library for building GraphQL-backed UIs without UI frameworks.

### Blogs

1. https://www.apollographql.com/blog/
2. https://www.robinwieruch.de/
3. https://learning.atheros.ai/
4. https://graphqleditor.com/blog/
5. https://graphql.org/blog/
6. https://hasura.io/blog/tagged/graphql/

### Video tutorials

1. [How to build a GraphQL Server](https://www.youtube.com/playlist?list=PLillGF-RfqbYZty73_PHBqKRDnv7ikh68&utm_source=notify_mailer&utm_medium=email&utm_campaign=new_reply_email)

### Communities

1. https://www.reddit.com/r/graphql
2. [ReactiFlux Discord (#graphql)](https://discord.com/invite/0ZcbPKXt5bYZVCkR)

### Let's build this directory together!

Do you know any other useful tools, tutorials or blogs for GraphQL?
Maybe you are running your own blog or developing a GraphQL tool?

Send me a link to tomek@graphqleditor.com and I will post it here :)


### Introduction

This article covers the basic introduction and advantages of GraphQL and [GraphQL Editor](https://app.graphqleditor.com) for business users.

### What is GraphQL?

Have you heard tech terms like frontend, backend or API? Well, those are essential components of every web application. The front end is what you see; the backend is the hidden engine that powers every action of your visual interface. API is a connector in between those two which allows them to communicate. It’s a set of clearly defined methods, definitions and routines how apps communicate with each other.

![Design Schema](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/design-schema.webp "Design Schema")

### GraphQL is a query language to describe an API

So far REST API was the most popular standard of creating API’s. GraphQL was introduced in 2015 by Facebook as an alternative to REST. Back then It wasn’t just an experiment - it was already in production inside facebook mobile apps since 2012. Just after public release, It became extremely popular, and around that time many companies were working on similar solutions. This technology started to gain attention since it can be used with many other languages and there’re many ready to go libraries to most popular styles. Right now according to Stackshare there’re nearly 2k companies using it. Early adopters included Coursera, Github, ProductHunt, Yelp or Twitter.

![Design Schema](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/design-schema2.webp "Design Schema")

### Visual tool for app prototyping

GraphQL from its core name is something more than new API standard. Some users describe it as a tool for the specification of new solutions. Thanks to graph sourcing we can visualise existing database schema and show existing solutions on the screen. From the other side, you can prototype new business applications. With visualised graph possibilities are endless. Think about the potential advantages of giving access to internal systems for a business manager at company meeting or speeding up onboarding of new developers. Some companies have significant and complex systems; therefore it slows down digital transformation. Check below how Github’s schema in action.

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

### Easy to learn

GraphQL is easy to learn. You have to learn 15-20 definitions to start understanding it. Not joking! Check below a list of the most important ones. Don’t get overwhelmed by too many definitions at the start. Start by checking object type - in definition is a group of fields.

![add node type](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/add-node-type.webp "add node type")

Basic type definitions

* Type - it's a group of object.
* Input - it's used to create or update objects in database.
* Scalar types - add characteristics for type object.
* Interface - it's a type object that has certain set of the same fields.
* Union - mostly used for search purpose.
* Enum - specific scalar user mostly when dealing with allowed values.

![add node input](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/add-node-input.webp "add node input")

Graphql is strongly typed, which means that each definition must have a particular type. The Type System comes with the help, which provides several possibilities for defining elements of our API. Another exciting thing about strongly typed is the visual part.

### Communication with all developers

The most important feature of GraphQL for business users is that it’s language agnostic. It’s not created to work with a specific technology. It’s a query language with its own rules which for most popular programming languages. There’re many supportive libraries on the internet for C#/.NET, PHP. Javascript, Java, Python, Ruby and many more. Therefore learning a little bit of schema definition language, you’re able to communicate with all kind of developers.

### Flexibility

GraphQL is flexible and efficient. In traditional REST approach developers had to send many requests to show data on one screen. It’s not super efficient when it comes to mobile apps - it slows them down and needs more internet data transfer. GraphQL allows a user to create only one endpoint and get exactly required data. Thanks to technology introduced by Facebook engineers communication between client and a server is better optimised.

That’s the power of GraphQL - flexibility. You don’t need to create endpoints for different screens. Various clients can use a once defined schema in a way that they need to.

Is GraphQL Editor a right tool for business users?

One of biggest [GraphQL](https://graphql.org/) flaws is missing of some basic implementation know from which are crucial for application performance. A simple [GraphQL server](https://graphql.org/graphql-js/running-an-express-graphql-server/) comes without a built-in caching or batching mechanism. This might cause some problems for you apps.

### Redundant calls ... lots of redundant calls

GraphQL is about querying for specific fields on objects. The `fields` are intended to be stand-alone functions which means that unsophisticated GraphQL server might produce redundant calls to issue new database requests each time a `field` is resolved.

Let’s take a simple [GraphQl Blog](https://graphqleditor.com/blog/) as an example. Our blog will use pagination to load faster, let’s say that we want to display 5 at once.

We want to get our posts along with their authors names. Our author’s details is a standard ‘user’ fields that has its own resolver so we need:

* 1 call for list of our blog posts
* 5 calls to get authors for each post (we need to get user for each resolver)

But what if these posts have comments? Let’s say that each blog post has 2 comments and of course each comment has its author, this gives as:

* 1 call for list of blog posts
* 5 calls for authors of each post
* 5 calls to get lists of comments of each post
* 10 calls to get the comments’ authors

This gives us 21 calls. What if we have 10 or 20 comments under each posts? The number of calls will skyrocket and this will cause serious issue with the application loading time.

![Redundat calls](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/2v9ltl.webp)

### Batching & Caching

Fortunately there is a solution! [Dataloader](https://github.com/graphql/dataloader) is a utility developed by Facebook dev team that lets you batch and cache database calls.

**Batching** is DataLoader's primary feature. When Dataloader sees that you’re hitting same table multiple times, it’ll batch all calls together i.e. 5 blog posts’ authors & 10 comments’ authors would be batched in a one call.

To get started you need to create loaders by providing a batch loading function.

```ts
var DataLoader = require('dataloader');

var userLoader = new DataLoader((keys) => myBatchGetUsers(keys));
```

The function accepts an Array of keys and returns a Promise which resolves to an Array of values. You need to load individual values from the loader. DataLoader will merge individual loads which occur the same time and then call your batch function with all requested keys.

```ts
userLoader
  .load(1)
  .then((user) => userLoader.load(user.invitedByID))
  .then((invitedBy) => console.log(`User 1 was invited by ${invitedBy}`));

// Elsewhere in your application
userLoader
  .load(2)
  .then((user) => userLoader.load(user.lastInvitedID))
  .then((lastInvited) => console.log(`User 2 last invited ${lastInvited}`));
```

**Caching** is another DataLoader’s feature. Each `DataLoader` instance represents a unique cache and when Dataloader detects that two blog posts, comments or their combination have the same author instead of making a new database call it will reuse the object it already has in memory.

If you want to make sure that your application running as smooth as possible I highly suggest trying DataLoader. Read more about the implemenation of DataLoader check its [GitHub repo](https://github.com/graphql/dataloader) or watch *"DataLoader - Source code walkthrough"* by [Lee Byron](https://twitter.com/leeb), one of the GraphQL creators.

[https://www.youtube.com/watch?v=OQTnXNCDywA\&feature=youtu.be](https://www.youtube.com/watch?v=OQTnXNCDywA\&feature=youtu.be)

GraphQL Performance issues and how to handle them

One of biggest [GraphQL](https://graphql.org/) flaws is missing of some basic implementation know from which are crucial for application performance. A simple [GraphQL server](https://graphql.org/graphql-js/running-an-express-graphql-server/) comes without a built-in caching or batching mechanism. This might cause some problems for you apps.

### Redundant calls ... lots of redundant calls

GraphQL is about querying for specific fields on objects. The `fields` are intended to be stand-alone functions which means that unsophisticated GraphQL server might produce redundant calls to issue new database requests each time a `field` is resolved.

Let’s take a simple [GraphQl Blog](https://graphqleditor.com/blog/) as an example. Our blog will use pagination to load faster, let’s say that we want to display 5 at once.

We want to get our posts along with their authors names. Our author’s details is a standard ‘user’ fields that has its own resolver so we need:

* 1 call for list of our blog posts
* 5 calls to get authors for each post (we need to get user for each resolver)

But what if these posts have comments? Let’s say that each blog post has 2 comments and of course each comment has its author, this gives as:

* 1 call for list of blog posts
* 5 calls for authors of each post
* 5 calls to get lists of comments of each post
* 10 calls to get the comments’ authors

This gives us 21 calls. What if we have 10 or 20 comments under each posts? The number of calls will skyrocket and this will cause serious issue with the application loading time.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/2v9ltl-1730809720606.webp)

### Batching & Caching

Fortunately there is a solution! [Dataloader](https://github.com/graphql/dataloader) is a utility developed by Facebook dev team that lets you batch and cache database calls.

**Batching** is DataLoader's primary feature. When Dataloader sees that you’re hitting same table multiple times, it’ll batch all calls together i.e. 5 blog posts’ authors & 10 comments’ authors would be batched in a one call.

To get started you need to create loaders by providing a batch loading function.

```jsx
var DataLoader = require('dataloader');

var userLoader = new DataLoader((keys) => myBatchGetUsers(keys));
```

The function accepts an Array of keys and returns a Promise which resolves to an Array of values. You need to load individual values from the loader. DataLoader will merge individual loads which occur the same time and then call your batch function with all requested keys.

```jsx
userLoader
  .load(1)
  .then((user) => userLoader.load(user.invitedByID))
  .then((invitedBy) => console.log(`User 1 was invited by ${invitedBy}`));

// Elsewhere in your application
userLoader
  .load(2)
  .then((user) => userLoader.load(user.lastInvitedID))
  .then((lastInvited) => console.log(`User 2 last invited ${lastInvited}`));
```

**Caching** is another DataLoader’s feature. Each `DataLoader` instance represents a unique cache and when Dataloader detects that two blog posts, comments or their combination have the same author instead of making a new database call it will reuse the object it already has in memory.

If you want to make sure that your application running as smooth as possible I highly suggest trying DataLoader. Read more about the implemenation of DataLoader check its [GitHub repo](https://github.com/graphql/dataloader) or watch *"DataLoader - Source code walkthrough"* by [Lee Byron](https://twitter.com/leeb), one of the GraphQL creators.

[https://www.youtube.com/watch?v=OQTnXNCDywA\&feature=youtu.be](https://www.youtube.com/watch?v=OQTnXNCDywA\&feature=youtu.be)


Let's explore second and last part of our tutorial of schemas and types

###Interfaces

Like many type systems, GraphQL supports interfaces. An interface exposes a specific set of fields that a type must include implementing the interface. For example, you could have an interface Actor that represents any humankind character in the Movies:

```gql
interface Actor {
  id: ID!
  name: String!
  friends: [Actor]
  appearsIn: [Movie]!
}
```

This means that any type that implements Actor needs to have these exact fields, with these arguments and return types. Look at the example:

```gql
type Arnold implements Actor {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Movie]!
}

type James implements Actor {
  id: ID!
  name: String!
  friends: [Character]
  appearsIn: [Movie]!
  wonOscar: Boolean!
}
```
You can see that both of these types have all of the fields from the Actor interface, but also bring in extra fields like wonOscar which is specific to this Actor.

### Union

An interesting mechanism is the Union type, which allows you to represent a group of objects that do not have the same fields. An excellent example is a query to a search engine that can search both the title of the Movie and the Actor's name. Union types are very similar to interfaces, but they don't get to specify any common fields between the types.

```gql
union SearchResult = Movie | Actor
  
type Query {
  search(text: String!): SearchResult
}

query {
  search(text: "Park") {
    ... on Book {
      title
    }
    ... on Author {
      name
    }
  }
}
```
```gql
  {
      "data": {
        "search": [
          {
            "name": "Jurassic Park",
          },
          {
            "name": "Jessica Park",
          }
        ]
      }
    }
```
Wherever we return a SearchResult type in our schema, we might get a Movie or an Actor. Note that members of a union type need to be concrete object types; you can't create a union type out of interfaces or other unions.

### Input type

To modify or create new elements in the application via GraphQL, a particular type input was created, which behaves very much like a regular object, with the difference that during the declaration input is used instead of the keyword type. This is particularly valuable in the case of mutations, where you might want to pass in a whole object to be created. In the GraphQL schema language, input types look exactly the same as regular object types, but with the keyword input instead of type:

```gql
schema {
  query: Query
  mutation: Mutation
}
  
type Mutation {
  createActor(input: ActorInput): Actor
  updateActor(id: ID!, input: ActorInput): Actor
}
  
input ActorInput {
  name: String!
  appearsIn: [Movie]!
}
```

In the above example, you can observe that the createActor and updateActor actions expect the ActorInput object as an argument and return the Actor object. For the declared scheme, creating a new book requires a similar action:

### Lists and Non-Null 

In your query variable declarations, you can apply additional type modifiers that affect the validation of those values.  In the example below we're using a String type and marking it as Non-Null by adding an exclamation mark, ! after the type name. This means that our server regularly requires to return a non-null value for this field, and if it ends up getting a null value that will trigger a GraphQL execution error, letting the client know that something has gone wrong.

```gql
type Actor {
  name: String!
  appearsIn: [Episode]!
}
```
The Non-Null type modifier can also be used when defining arguments for a field, which will cause the GraphQL server to return a validation error if a null value is passed as that argument, whether in the GraphQL string or in the variables.

Lsts work similarly: We can use a type modifier to mark a type as a List, which means that this field will return an array of that type. In the schema language, it's by wrapping the type in square brackets, [ and ]. It works the same for arguments, where the validation step will expect an array for that value. The Non-Null and List modifiers can be combined. 

```ts
myField: [String!]
```
```ts
myField: null // valid
myField: [] // valid
myField: ['a', 'b'] // valid
myField: ['a', null, 'b'] // error
```
```ts
myField: [String]!
```
```ts
myField: null // error
myField: [] // valid
myField: ['a', 'b'] // valid
myField: ['a', null, 'b'] // valid
```




GraphQL Tutorial - Schemas and types part 2

Welcome in another episode of our Code Academy series in which we present the most interesting code related things like tools, libraries, approaches etc. This week we will cover a GraphQL schema visualization topic.

As your probably already know [GraphQL was defined by npm as one of the technologies that will dominate 2019.](https://graphqleditor.com/blog/javascript-predictions-for-2019-by-npm/)
GraphQL is a technology you must learn this year to keep up the pace of the frontend and the backend evolution. As for now, [RESTful APIs](https://graphqleditor.com/blog/graphql-vs-rest/) are the most popular choice but this will change soon. The sooner you make a decision to start the transition from REST to GraphQL the less painful its going to be. There are many tools and libraries to make it easier to convert from [REST to GraphQL](https://graphqleditor.com/blog/graphql-vs-rest-caching/) and there is a huge reward waiting for you at the end of the road.

## Know your schema

#### What’s a GraphQL schema and why it's so important to know it well?

The [GraphQL schema](https://graphql.org/learn/schema/) is a centerpiece of your GraphQL project. GraphQL schema is nested in your GraphQL server and defines every functionality available to the clients. The main element of each schema is `type` which allows establishing relations between different types, define allowed GraphQL operations (Queries and Mutations) to be performed on the server and more.

To make it easier to understand the operation that a server can perform GraphQL defined a universal schema syntax know as SDL (Schema Definition Language). The SDL defines the elements of your project i.e. `type`:

```gql
type Movie {
  title: String
  Director: Director
}

type Director {
  name: String
  movies: [Movie]
}
```

or `query` (asking the server for the data) and `mutation` (manipulating the data):

```gql
type Query {
  getMovies: [Movie]
  getDirectors: [Director]
}
```

```gql
type Mutation {
  addMovie(title: String, director: String): Movie
}
```

So as you see the schema is indeed a centerpiece of any GraphQL project and it's important to be aware of what is what and where to find it. Big complicated schemas are really hard to comprehend. Let's take GitHib schema as an example, it has **9182** lines of code! It's really hard to follow... Fortunately, graphs are coming with help!

## Visualization is the key

A graph is an abstract data type. It's structure consists of a finite set of vertices, nodes or points linked together. Graphs are a great tool for shaping logic behind your app as they fit-in well for any IT project and at this point, we can agree that graphs are more accessible than code in terms of apprehending the schema.

#### Turning schema code into graphs

So how can we turn our schema code into a visual graph? It's simpler than you can imagine. We are going to use [GraphQL Editor](https://graphqleditor.com).

All you need to do is go to [app.graphqldditor.com](https://app.graphqleditor.com)and load your schema as below and ...

![Load your schema URL](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/schemaurl-1730850823599.webp)

... and that's it!

If you have provided editor a valid schema it will automatically turn its code into a visual graph. Cool, right?

![Your schema turned into a graph](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/blogpost/result-1730850820843.webp)

Code Academy - How to visualize your GraphQL schema?

Low-code development platforms (LCDP) is a booming market which is predicted to grow from USD 4.3 Billion in 2017 to almost USD 30.0 Billion by 2022. What exactly are LCDPs?  LCDPs are application development platforms that provide rapid app delivery with coding reduced to the minimum and easy deployment. The main idea behind LCDPs is to reduce the time required from an idea to prototype, which is related to decreased project cost overall.

### Market data and predictions

The report provided by [MarketsAndMarkets](https://www.marketsandmarkets.com/Market-Reports/low-code-development-platforms-market-103455110.html) identify that rising demand for customer-centric web and mobile applications fuels the rapid growth of the [Low-Code Development Platform](https://en.wikipedia.org/wiki/Low-code_development_platform) Market across the globe. Obviously, the largest geo-market for LCDPs is North America. Whereas, Asia Pacific (APAC) was identified as the fastest growing one. The rising demand for automation and innovation in many different industries requires:

* Faster development process (both web and mobile application),
* Easier Deployment,
* Cost reduction.

All the above is expected to push the low-code development trend into its highest high in the next couple of years.

![](https://graphqleditorcms.fra1.cdn.digitaloceanspaces.com/graphqleditorcms/media/grow-1730831146703.webp)Low-code development pros

#### Development time

LCDPs are visual-based design system which means that the amount of coding is often reduced to zero and that of most of it is replaced by a draw/drag-and-drop system. This allows building apps faster and results in shorter time-to-market.

#### Development cost

The ability to build an MVP faster means a cost decrease.  Moving further, LCDPs can reduce requisition for developers work. This results in lower personnel costs, directly and indirectly (office costs, HR personnel costs). The tricky part is that if the personnel cost reduction goes too far, it can easily turn into a clear disadvantage.

#### Cross-platform

As time users spend on their smartphones or tablets has closed the gap with desktop, the modern applications must have cross-platform functionality standard built-in in their design. Automatical deployment over multiple platforms with none or almost zero effort is one of the LCDPs biggest features.

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

### What about the cons?

#### Security

Security is one of the LCDPs main flaws. As by default, low-code development platforms aim for small or medium customers. The security provided by them is often fine for non-commercial or small commercial projects. Although some platforms claim to have enterprise-level security procedures and certifications, it’s most of the time not enough to be trusted by large-scale commercial projects.

#### Scalability & compliance

Along with security, LCDPs platforms scalability is often questioned. Applications built so quickly at high risk of lack of adequate management which might cause some serious compliance issues later on. Many IT professionals remain skeptical about that low-code development platforms as they don’t address the challenge of increasing complexity due to changes, therefore they shouldn't be a platform of choice for any large-scale enterprise applications.

### Summary

Low-code/no-code is a very strong trend in modern IT projects. Although it's becoming more & more popular across private or small commercial projects it will be hard to be popularized it across large-scale enterprise projects where security is a top priority.