Forem: Rossano D'Angelo

CAP Theorem: Consistency, Availability, Partition tolerance

Rossano D'Angelo — Wed, 30 Nov 2022 22:12:00 +0000

This theorem states that it is impossible for a distributed system to simultaneously provide more than two of these three guarantees:

Consistency: all clients see the same data at the same time no matter which "node" of the system they connect to
Availability: any client which requests data gets a response even if some of the "nodes" of the system are not available
Partition tolerance: the system continues to operate despite network partitions¹

Ideal situation

In an ideal world, network partition never occurs

Real world distributed system

In a distributed system, data is usually replicated multiple times because partitions cannot be avoided.
In the example below, node n3 becomes unavailable and cannot communicate with nodes n1 or n2. Also data cannot be propagated to n3 from n1 or n2.

If we choose consistency over availability (CP system) we must block all write operations to nodes n1 and n2 to avoid data inconsistency among these three nodes, and this makes the system unavailable.

However, if we choose availability over consistency (AP system) the system remains available and accepts read operations, even though it might return stale data. For write operations, nodes n1 and n2 will keep accepting them and data will be synced to node n3 when the network partition is resolved.

a partition indicates a communication break between two "nodes" ↩

Functional requirements vs Non-functional requirements

Rossano D'Angelo — Fri, 25 Nov 2022 16:30:00 +0000

In order to build a good software system it's usually recommended a good understanding of its requirements. These requirements can be divided into two groups: functional requirements and non-functional requirements.

Functional requirements

Functional requirements describe how the product must behave. For example: "the system sends a confirmation email when a new user account is created".

Non-functional requirements

Non-functional requirements specify the quality attributes of the system, that's why they are also called quality attributes. The key types of non-functional requirements are:

performance and scalability - How fast does the system return results? How much will this performance change with higher workloads?
portability and compatibility - Which hardware, operating systems, and browsers, along with their versions does the software run on? Does it conflict with other applications and processes within these environments?
reliability, maintainability, availability - How often does the system experience critical failures? How much time does it take to fix the issue when it arises? And how is user availability time compared to downtime?
security - How well are the system and its data protected against attacks?

These requirements are part of a format that is called SRS a.k.a. Software Requirement Specification.

Implementing optimistic UI with Apollo and ReactJS

Rossano D'Angelo — Wed, 13 Apr 2022 07:55:46 +0000

Optimistic UI is a pattern that you can use to simulate the results of a mutation and update the UI even before receiving a response from the server. Once the response is received from the server, the optimistic result is thrown away and replaced with the actual result.

This is the definition that Apollo gave to the term "optmistic user interface" on their official documentation.

I recently discovered this concept by attending a course about improving performances of Apollo Client by using caching.

But what kind of benefits does it bring? Does it come without downsides?

Apollo Client without Optimistic UI

Here's a visual example of what happens when we use Apollo Client without the optimistic UI pattern when the user wants to send data to our application (for example, toggling on/off a favourite contact in a cloud based address book).

This means that the user sees the UI updated only after the server computes the mutation and provides the results. If the datasource experiences delays, the user of our application will have to wait to see the result of his action.

Here's a visual example of what happens when we use Apollo Client without the optimistic UI pattern.

The user sees the UI updating right after the action without waiting for the server to compute the mutation. Apollo Client updates the caches providing an optimistic result: this means that we assume that the result of the mutation is positive and update the UI accordingly.

But what happens if, for any reason, the actual result of the mutation is different than the optimistic result provided? If the request fails, we need to rollback to the previous state because otherwise the user would remain in a non-consistent state.

Example

Here you can observe the delay between the HTTP call and the UI to be updated. That's a classic effect of the Apollo Cache being updated after receiving the data from the data source.

Now let's see how this changes applying the optimistic UI pattern - which is very easy to do with Apollo.

You can notice how the UI updates right after the click and there isn't any "loading time". In the example above, the communication client cache - server is fast because both are running on my machine. But imagine if the server is hosted somewhere else and there are delays.. The optimistic response "anticipate" the response the server will give you to make the user experience smoother to the user.

Theming with styled-components ThemeProvider

Rossano D'Angelo — Sat, 10 Apr 2021 15:00:00 +0000

If you are here probably you already know what styled-components is so let’s skip the small talk.

Prerequisites for this post is having a React-based application. If you have it, proceed reading. If you don’t, take a look at this before proceeding.

Installing styled-components

Run the following command to install the npm package (or use yarn, as you wish)

npm install styled-components
or
yarn add styled-components

Creating Theme.js component with ThemeProvider

Now, create Theme.js file. This file will be your application’s theme entry point.

import { ThemeProvider } from 'styled-components';

const theme = {};

const Theme = ({ children }) => {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export default Theme;

The theme object is where you’re going to define your theme variables like colours, font sizes and so on. As far as I know there isn’t a perfect way to define this object so it’s up to you to find your perfect way to do so.

I’ll give you an example below

const theme = {
  colour: {
    primary: '#3D315B',
    secondary: '#444B6E',
    background: '#708B75',
    link: '#9AB87A',
  },
  font: {
    size: {
      extraSmall: '14px',
      small: '16px',
      medium: '18px',
      large: '20px',
      extraLarge: '24px',
    },
    family: 'sans-serif',
  },
  breakpoint: {
    mobile: '375px',
    tablet: '600px',
    laptop: '1200px',
    desktop: '1600px',
  },
};

So now your Theme.js file should be something like this

import { ThemeProvider } from 'styled-components';

const theme = {
  colour: {
    primary: '#3D315B',
    secondary: '#444B6E',
    background: '#708B75',
    link: '#9AB87A',
  },
  font: {
    size: {
      extraSmall: '14px',
      small: '16px',
      medium: '18px',
      large: '20px',
      extraLarge: '24px',
    },
    family: 'sans-serif',
  },
  breakpoint: {
    mobile: '375px',
    tablet: '600px',
    laptop: '1200px',
    desktop: '1600px',
  },
};

const Theme = ({ children }) => {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export default Theme;

Using Theme.js

Now that your Theme.js component is ready, you can wrap your React app with it. Go to your React entry point and wrap everything with <Theme>...</Theme>

import React from 'react';
import ReactDOM from 'react-dom';

import Theme from './Theme';

ReactDOM.render(
  <Theme>
    <header></header>
    <main>
      <p>Hello, there!</p>
    </main>
    <footer></footer>
  </Theme>,
  document.getElementById('root')
);

Great, now you need a styled component to see ThemeProvider in action.

// import styled-components
import styled, { css } from 'styled-components';

// create Text component
const Text = styled.p`
  ${({ theme }) => css`
    color: ${theme.colour.primary};
    font-family: ${theme.font.family};
    font-size: ${theme.font.size.medium};
  `}
`;

// use Text component created above
<main>
  <Text>Hello, there!</Text>
</main>;

As you can see, wrapping the whole application with ThemeProvider, the styled components receive theme in the props.

And this is the result

Powerful, eh? But there’s more. You can work with media queries in the same way.

Imagine that you want to change the style of Text component only for mobile devices.

const Text = styled.p`
  ${({ theme }) => css`
    color: ${theme.colour.primary};
    font-family: ${theme.font.family};
    font-size: ${theme.font.size.medium};

    // media query
    @media (max-width: ${theme.breakpoint.mobile}) {
      font-size: ${theme.font.size.small};
      background-color: ${theme.colour.background};
    }
  `}
`;

And this is how it should look like for 376px and 375px respectively.

You made it! You now have a basic theming setup for your React app!

What’s next?

From this point it would make sense improving this theming setup to allow multiple themes like, for example, dark and light theme.

How I monitor my blog

Rossano D'Angelo — Wed, 07 Apr 2021 22:00:00 +0000

What

I use different monitoring and analytics tools to monitor my blog: Google Analytics, Vercel Analytics and New Relic. Maybe is too much, given that my blog doesn’t have a lot of traffic and it’s not a “critical system” to be continuously monitored and kept online (if it goes down for a couple of minutes no one will complain!). But since these services are free to use and since I use New Relic at work, I decided to use it for my blog and maybe to learn more about it.

But.. what is New Relic? Well, this is what I understood so far: New Relic is a monitoring tool that provides real-time data, usage analytics and allows you to monitor your services and to set alarms for them (imagine you want to receive a notification when one of your services goes down to be able to promptly respond to the failures). If you want a more specific definition of it, visit the official documentation.

I don’t monitor any service for my blog - I don’t have any! - but only the front end performances. And I do so with New Relic One.

Why

I do monitor my blog because I want to understand its performances and what I can do to improve it.

How

My blog is built with GatsbyJS so I used the plugin gatsby-plugin-newrelic. I won’t write here what I did to set up New Relic because there’s nothing their README doesn’t say. And it explains how to do it so well!

What I can add is that I monitor only my production environment. Here’s my configuration to monitor production.

Here you can see a part of my dashboard where I see data coming through.

Here you can see my blog’s FID , First Input Delay.

To put it in simpler terms, the FID is the delay between when you click or tap on something like a link or a button, and the time that the browser responds to your action and starts processing it.

I want to be honest: I can’t understand all of these charts yet. But that’s why I choose to monitor my blog with New Relic: I want to learn and become more familiar with it.

So don’t blame me if I’m not saying anything really interesting in this article. More interesting stuff will come, with time.

Conclusion

I started monitoring my blog a few days ago so, for now, there’s not so much I can say but New Relic looks good and very easy to use. It offers a lot of charts, analytics and alerts… Which I didn’t try yet!!

If you are searching for a good monitoring tool for your application, New Relic is what you need.

What I like the most about styled-components

Rossano D'Angelo — Sun, 04 Apr 2021 21:00:00 +0000

When I started writing my first lines of React code, the first thing I did was setting up Sass and CSS modules because I liked working with well-structured stylesheets. Variables to define themes, files divided into groups - header, body, footer, etc. I remember it was so great renaming files from App.css to App.module.scss.

But like all the best things in this doomed world, there was an end. And the end of all that beauty happened when I discovered styled-components. Something far more beautiful than CSS modules, believe me.

I state that I never used PostCSS or CSS in JS so maybe I lost great things on the way. But I have no regrets because probably I’d ended up on styled-components anyway.

I won’t list here all the advantages that styled-components brings to the table but only what I think it’s worth mentioning. For the rest, check out the official documentation.

Unique class names

You can have two or more components with the same name until they are in different files. See the example below in which I have two styled components Container and I use them in different files. The clash won’t happen because styled-components will create a hash for each of them, something like Appstyles __Container-qk6y7u-9 and Profilestyles__ Container-awrt4d-2.

// App.js
import React from 'react';

import { Container, Text } from './App.styles.js';

const App = () => {
  <Container>
    ...
    <Text>Hello, there!</Text>
  </Container>;
};

export default App;

// Profile.js
import React from 'react';

import { Container } from './Profile.styles.js';

const Profile = () => {
  <Container>...</Container>;
};

export default Profile;

Passing props to components

In the example below you can see how I can easily change the background-color of the Container depending on a variable defined in the JavaScript code. This is a very powerful feature.

// App.js
import React from 'react';

import { Container } from './App.styles.js';

const App = () => {
  <Container isError={true}>
    ...
    <p>Hello, there!</p>
  </Container>;
};

export default App;

// App.styles.js
import styled, { css } from 'styled-components';

export const Container = styled.div`
  ${({ isError }) =>
    isError
      ? css`
          background-color: red;
        `
      : css`
          background-color: white;
        `}
`;

Styling inheritance

You’ll be able to create styled components which inherit the style from another component

// App.styles.js
import styled from 'styled-components';

export const Text = styled.p`
  font-family: sans-serif;
  font-size: 16px;
`;

export const ErrorText = styled(Text)`
  color: red;
`;

export const SuccessText = styled(Text)`
  color: green;
`;

Theming

syled-components allows you to easily work with different themes in you application. It provides you with a ThemeProvider ot be used as you can see below.

// App.js
import React from 'react';
import { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    lightBlue: "#AFDBD2",
  },
  ...
}

const App = () => (
  <ThemeProvider theme={theme}>
    <Container>
      ...
    </Container>
  </ThemeProvider>
);

export default App;

// App.styles.js
import React from 'react';
import styled from 'styled-components';

export const Container = styled.div`
  ...
  background-color: ${props => props.theme.colors.lightBlue};
`;

You can also create a Theme.js component, as follows

// Theme.js
import React from 'react';
import { ThemeProvider } from 'styled-components';

const theme = {
  colors: {
    lightBlue: "#AFDBD2",
  },
  ...
}

const Theme = ({ children }) => (
  <ThemeProvider theme={theme}>
    {children}
  </ThemeProvider>
);

export default Theme;

// App.js
import React from 'react';
import Theme from './Theme';

const App = () => (
  <Theme>
    <Container>...</Container>
  </Theme>
);

export default App;

App.styles.js doesn’t change.

And it’s not over!! You can also use higher-order components and React hooks to get the theme style.

import React from 'react';
import { withTheme } from 'styled-components';

class App extends React.Component {
  ...
  render () {
    ... // this.props.theme is available here
  }
}

export default withTheme(App);

import React, { useContext } from 'react';
import { ThemeContext } from 'styled-components';

const App = () => {
  const themeContext = useContext(ThemeContext);

  return (
    ...
  );
}

export default withTheme(App);

As I said, these are the things I personally found amazing about styled-components working with it everyday. I’m sure there are more that you may find interesting for your projects.

So.. what do you think? Worth taking a look?

I finally created my personal blog

Rossano D'Angelo — Thu, 01 Apr 2021 08:19:38 +0000

I finally created my personal blog.

I needed something more flexible than dev.to because it didn't feel right posting whatever I wanted here. And also I wanted something made by myself, something that I can change if I want.

So that I created www.rossanodan.me.

Technical details: I used Gatsby to create it. It's been funny because it's very customisable if you know where to put your hands to the code.

It's still pretty empty, I know, but it won't be forever. I promised myself I will add content constantly.

This looks like a goodbye to dev.to but it isn't. I will continue use it, maybe more as reader than as a write but here I am.

Let me know what you think about my new blog. I'm open to suggestions!!

Useful resources to learn more about Agile and Scrum

Rossano D'Angelo — Thu, 25 Mar 2021 22:00:00 +0000

If you work into software development - if you don’t, I have no idea how you ended up here - and especially in medium/big sized companies, you surely heard about Agile and Scrum. So probably you don’t need what follows.

For all the others instead, here’s a list of useful links where you can read about Agile, Scrum, Scrum roles and sprint ceremonies.

https://www.atlassian.com/agile - if you don’t know what Agile is, please read this first
https://www.atlassian.com/agile/scrum - Scrum framework. Here you can learn all about Scrum (sprints, agile ceremonies, standup, roles, etc)
https://agilemanifesto.org/principles.html - twelve general principles of the Agile Manifesto
https://www.youtube.com/watch?v=9TycLR0TqFA - Short but very useful video about Scrum

You can thank me later.

What are your favourite podcasts?

Rossano D'Angelo — Wed, 17 Feb 2021 00:32:49 +0000

At the moment I'm listening to Demoni Urbani, an Italian (Italian is my native language) podcast which tells about some of the worse crime episodes really happened in Italy. It intrigues me. It's available on Apple Podcasts and on Spotify.

Recently I discovered The Joe Rogan Experience podcast. It sounds interesting!! I started listening the episode with Elon Musk. It's amazing listening about all the stuff about space and Mars colonisation directly from him - who, I suspect, has to know a lot about it! This show is available on Spotify.

And what about you? What are your favourite podcasts? Anything to share? True Crime, Tech, Actuality.. I'm ready to listen! 🎧 Preferred languages: English 🇬🇧 and/or Italian 🇮🇹.

How to create a GraphQL server with ExpressJS and Apollo Server

Rossano D'Angelo — Sun, 31 Jan 2021 21:15:57 +0000

In this article, I'm going to show how to create a GraphQL Server using ExpressJS and Apollo Server.

Crete the project folder and install Apollo Server and Express

mkdir graphql-server-playground
cd graphql-server-playground
npm init -y

The package.json file should be something like this

{
  "name": "graphql-server-playground",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Add description, keywords and author if you want.

In order to setup Express and Apollo Server, install the following dev dependencies

npm install --save-dev @babel/cli @babel/core @babel/node @babel/preset-env nodemon

and the following dependencies

npm install apollo-server-express express graphql graphql-import graphql-tools

Now, in the root folder of your project, create the src folder and the index.js file in it

import express from 'express';
import { ApolloServer, gql } from 'apollo-server-express';

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

const app = express();
server.applyMiddleware({ app });

app.listen({ port: 4001 }, () =>
  console.log(`🚀 Server ready at http://localhost:4001${server.graphqlPath}`)
);

Update the package.json file

{
  ...
  "main": "src/index.js",
  "scripts": {
    "start": "nodemon --exec babel-node -- ./src/index.js"
  },
  ...
}

Nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

Before running the server, we have to create a .babelrc file in the root folder of the project

{
  "presets": ["@babel/preset-env"]
}

This file tells NodeJS we are using Babel 7 and that the code has to be transpiled for the browser.

Now start the server with npm start

npm start

> graphql-server-playground@1.0.0 start graphql-server-playground
> nodemon --exec babel-node -- ./src/index.js

[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `babel-node ./src/index.js`
🚀 Server ready at http://localhost:4001/graphql

The GraphQL server is now running on your machine at http://localhost:4001/graphql

The Playground

The Playground is where you can run your queries and check for the documentation or your schema.

The only query available now is the following

query {
  hello
}

as you can see in the code, it corresponds to this

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

Each query has to have a resolver. The resolver is a function that defines what the query returns

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

In this case, the resolver for the hello query returns a string, Hello world!

If you want to learn more about GraphQL queries and resolvers, take a look here.

Defining the schema

Before defining the schema, we have to decide what kind of data this server will provide to the client.

Let's say we want to store and serve information about our address book. So the data I exptect to have is a list of people whith names, phone numbers and email addresses. Since we don't have a real database for now, let's mock it in the index.js file

...
const persons = [
    {
        id: 1,
        name: "Ash Ketchum",
        phone_number: "+440000000000",
        email: "ash@gmail.com",
    },
    {
        id: 2,
        name: "Professor Oak",
        phone_number: "+441111111111",
        email: "proak@gmail.com",
    },
    {
        id: 3,
        name: "Gary Oak",
        phone_number: "+442222222222",
    },
];
...

This will be our temporary database.

Now the schema:

const typeDefs = gql`
  type Person {
      id: Int!
      name: String!
      email: String
  }
  type Query {
    person(id: Int!): Person
  }
`;

Let's have a closer look.

Since we already defined the structure of the data, we are pretty sure that what we will receive from the database will have this shape:

id: Int! (an integer, non nullable)
name: String! (a string, non nullable)
email: String (a string, nullable)

The query person(id: Int!): Person wants an id as parameter (note the id is non nullable - it can't be null or we won't be able to retrieve anything!) and it returns a Person (an object defined by the Person type). Since it may happen the person we search for is not present in the database, the return type of this query is nullable (it can returns null).

Let's run the query in the Playground

query {
  person(id: 1) {
    id
    name
    email
  }
}

Writing a new query

const typeDefs = gql`
  ...
  type Query {
    ...
    persons: [Person]!
  }
`;

const resolvers = {
  Query: {
    ...
    persons: (_, __, ___) => persons,
  },
};

Pretty straight-forward, right? The new query persons returns the whole persons array. Let's run the new query on the Playground

Writing a mutation

A Mutation is a function used to create, update and delete data in GraphQL. If you think at CRUD, mutations represent the C(reate) U(update) D(elete).

Let's create a new type PersonInput and another root type Mutation

const typeDefs = gql`
  ...
  input PersonInput {
    id: Int!
    name: String!
    email: String
  }
  type Mutation {
    createPerson(person: PersonInput!): Person
  }
`;

The function createPerson accepts a non nullable object of type PersonInput and returns another object of type Person. It's just a case the two types Person and PersonInput are the same.

The mutation then is something like

const resolvers = {
  ...
  Mutation: {
    createPerson(_, { person }, __) => {
      persons.push(person);
      return person;
    },
  },
};

For simplicity's sake we are entering manually the ID paying attention to not reuse the same ID twice (or the query person will unexpectedly return two results!).

Let's use the mutation on the Playground

mutation {
  createPerson(person: {id: 5, name: "Brock", email: "brock@gmail.com"}) {
    id
    name
    email
  }
}

We can also run the persons query to see how the list of people is updated

Please remember that we are using an object as temporary database and that you will lose the data you add/change/remove via mutations once you restart the server! If you want some persistency, think about connecting the GraphQL server to a data source. I won't do that in this article.

Improving the code style with Prettier

Install Prettier with

npm install prettier --save-dev

Update your package.json file as follows

"scripts": {
  ...
  "prettier": "prettier --write ."
},

Create a file .prettierrc.json in the root folder of your project

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

This file contains the configuration of Prettier and the rules it will apply to your code.

Create a second file, .prettierignore and copy-paste the content of your .gitignore. This file will simply tell Prettier which files to ignore while formatting the code.

Now when you run npm run prettier it will apply the formatting rules to all files in the root directory and sub-directories. You can change this replacing

"prettier": "prettier --write ."

with

"prettier": "prettier --write ./src/**"

In this case Prettier will format files in the src folder and in its sub-folders.

It's a wrap

That's it, you made it! Now you have a GraphQL server running locally and a very useful Playground to execute queries! 🚀

Here's the repository with all the code we wrote in this article https://github.com/rossanodan/graphql-server-playground. Feel free to fork it and use it as your own or as a template.

Apollo Server with Express, Babel 7 and ESLint

Rossano D'Angelo — Sat, 30 Jan 2021 20:54:37 +0000

In this repository you can find a simple Apollo Server created with Express, Babel 7 and ESLint

https://github.com/rossanodan/cinematheque-apollo-server-playground

As you can see, it's a playground. This means that I will probably change the code day by day as I do practice with GraphQL and Apollo.

Feel free to fork this repository and to use it as your own to do practice with them.

PS. To use this project you will need an API key for The Movie Database which I used to fetch some data from.

Create an account and you will be provided of an API key.

Resources

List of useful resources I used to setup my plauground:

Have fun! 😄

How to setup a minimal GraphQL server with Express and Apollo Server

Rossano D'Angelo — Sat, 23 Jan 2021 18:35:49 +0000

At the end of this article you will be able to create a minimal GraphQL from scratch using ExpressJS and Apollo Server.

If you're reading this article I expect you to have a basic knowledge of ExpressJS, GraphQL and Apollo. If not, this article won't help you so much but you can still take a look to it if you're interested.

To make up for it, I leave here some useful URLs where you can learn more about those topics:

Setting up and dependencies installation

mkdir graphql-server-express
cd graphql-server-express

npm init -y

npm install express apollo-server-express
npm install --save-dev @babel/core @babel/node @babel/preset-env babel-cli babel-preset-es2015 nodemon

Pretty straight-forward so far, right? Good.

Let's jump into the code

Create a .babelrc file in the root folder

{
  "presets": ["@babel/preset-env"]
}

This file will enable us to use some ES6 capabilities such as the use of import.

Create src folder and the index.js file in it as follows

import express from "express";
import { ApolloServer, gql } from "apollo-server-express";

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => "Hello world!",
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

const app = express();
server.applyMiddleware({ app });

app.listen({ port: 4001 }, () =>
  console.log(`Server listening on http://localhost:4001${server.graphqlPath}`)
);

A couple of things about this file:

This is the entry point of the server
I use one file for all the code just for simplicity - you can decide to split it into multiple files
I use the port 4001 but you can use another port if you want

How to start the server with `nodemon`

Now update the script command in the package.json file as follows

...
  "scripts": {
    "start": "nodemon --exec babel-node src/index.js"
  }
...

Now run npm start in the terminal. The GraphQL Playground will be available at http://localhost:4001/graphql (or any other address/port you used).

I published this little project on GitHub for future reference

rossanodan / graphql-server-express

A minimal GraphQL server developed with Express and Apollo Server

Setting up and dependencies installation

mkdir graphql-server-express
cd graphql-server-express

npm init -y

npm install express apollo-server-express
npm install --save-dev @babel/core @babel/node @babel/preset-env babel-cli babel-preset-es2015 nodemon

Pretty straight-forward so far, right? Good.

Let's jump into the code

Create a .babelrc file in the root folder

{
  "presets": ["@babel/preset-env"]
}

This file will enable us to use some ES6 capabilities such as the use of import.

Create src folder and the index.js file in it as follows

import express from "express";
import { ApolloServer, gql } from "apollo-server-express";

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => "Hello world!",
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

const app = express();
server.applyMiddleware({ app });

app.listen({ port: 4001 }, () =>
  console.log(`Server listening on http://localhost:4001${server.graphqlPath}`)
);

A couple of things about this file:

This is the entry point of…

View on GitHub

Forem: Rossano D'Angelo

CAP Theorem: Consistency, Availability, Partition tolerance

Ideal situation

Real world distributed system

Functional requirements vs Non-functional requirements

Functional requirements

Non-functional requirements

Implementing optimistic UI with Apollo and ReactJS

Apollo Client without Optimistic UI

Example

Theming with styled-components ThemeProvider

Installing styled-components

Creating Theme.js component with ThemeProvider

Using Theme.js

What’s next?

How I monitor my blog

What

Why

How

Conclusion

What I like the most about styled-components

Unique class names

Passing props to components

Styling inheritance

Theming

I finally created my personal blog

Useful resources to learn more about Agile and Scrum

What are your favourite podcasts?

How to create a GraphQL server with ExpressJS and Apollo Server

Crete the project folder and install Apollo Server and Express

The Playground

Defining the schema

Writing a new query

Writing a mutation

Improving the code style with Prettier

It's a wrap

Apollo Server with Express, Babel 7 and ESLint

Resources

How to setup a minimal GraphQL server with Express and Apollo Server

Setting up and dependencies installation

Let's jump into the code

How to start the server with nodemon

rossanodan / graphql-server-express

A minimal GraphQL server developed with Express and Apollo Server

Setting up and dependencies installation

Let's jump into the code

How to start the server with `nodemon`