DEV Community: daniel knowles

Async/Await

daniel knowles — Mon, 26 Apr 2021 14:50:10 +0000

Promises let us create asynchronous code that is a lot easier to read and understand, and a lot less repetitive to write. This is great because we can avoid nested callbacks.
A promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.
They look like this...

When we create a Promise we pass in a function. This function will always accept two parameters, 'resolve' , and 'reject'.
Both of these parameters are actually functions. if the resolve() function is called our promise will be resolved. If the reject() function is called then our promise will be rejected. We then use .then() and .catch() methods to handle the data that is returned, or the error in the case that our promise is rejected.

Async/await

Async/await is a fairly newer way to deal with promises.

An async function is a function declared with the async keyword, and the await keyword is permitted within them. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains. -MDN

Async keyword

The Async keyword is a nice and easy way to work with promises.

We can use Async in front of a function expression or declaration. With the Async keyword added the function will then return a promise and in turn it becomes a asynchronous function. The promise will be resolved with the value that is returned from the function. If there is an error the promise will then be rejected.

Function declared without the Async keyword. Returns the string 'hey there'.

Now here is the same function with the async keyword included.

In this example we do not just get a string returned when we call the function, but a we actually get a promise that has been resolved with the value 'hey there'.

So the async keyword creates a promise that resolves with whatever value is being returned by the function.

Await keyword

Thats not all though. There is also another keyword involved to complete the package. The Await keyword will pause the execution of a function while it waits for the promise to be resolved. This means that we can run code after an asynchronous operation without having to nest things with callbacks. So let's say we have an axios call to an api that holds a list of cats, and we want to log all of the cats in that list. Usually we would use .then() and console.log our result and data.
So our axios.get() will return a promise, we use the .then() method and wait until the callback is executed.

The data will then get passed to our .then() and we can use console.log(res.data) to log it to the console.

This is all good and fine, but with the Async/Await keywords this becomes even easier.

First we can we can make our function asynchronous by adding the Async keyword.
We do an axios.get() and pass int he url.
Then we use the await keyword to pause the function until the promise is resolved.
We can then take that value and save it to the variable called 'res' and the crazy thing is we will have access to that variable on the very next line.

With the await keyword in place the console.log will run only after the promise has been resolved. So we no longer need to use a .then() to accomplish this. axios.get returns a promise, if you run it without the await keyword you will get undefined. This is because there is no data property because a promise is returned and it is not yet resolved when the console.log runs, but when we add the await keyword javaScript will not move on until that promise is resolved. Then it will take that value that the promise is resolved with and instead of storing it in a .then() the value gets stored in our 'res' variable. We can then use it on the very next line. So we are basically still using promises behind the scenes but the Async/Await keywords will hide this from us. This way the the function appears to be just a normal synchronous function. This makes things easier to write and easier to keep track of what is happening. The Await keyword is a simple way for use to tell javaScript to wait for the promise to complete before running the next line.

Rejected promises

In a Async function if we want to return a rejected promise,
we just have to create a condition, or an exception. So if we throw an error, that promise will be rejected. So what if the async operation is not resolved and something goes wrong with our request and the promise gets rejected. Right now if we run our above function and something goes wrong (maybe the url is wrong, or our internet goes down) we get an error. Something like 'Error, uncaught in promise'. This is because we don't have any code to handle the error.
So in this case we have options. We could chain a .catch() at the end of our function to catch and handle the error.

Try, catch block

In our async function we can add a try and catch block.

First we try the call to the api. That data then gets saved to the variable is then logged on the next line. Otherwise, if something goes wrong we can catch that error in the catch block, and it will run the error. So now when we call getCats first it will run the axios call and if not successful we will then have a place to catch our error.

So with .then() and .catch() it's more of a backup way to catch and handle our data. you can have multiple functions returning promises and the callback for .catch() will run for any of them if the promise is rejected. With Async/Await we are calling only one function so we can be more specific to with what we are trying to do. We are also able handle it in more detailed ways.

REST API

daniel knowles — Mon, 19 Apr 2021 05:13:58 +0000

Most of the internet is based on the transference of data between the client and the server...

Requests

First the client makes a request to the server.
Usually this is done with a HTTP request, but HTTP is not the only language the server can speak. They can also speak FTP. So make sure you are using the right language.
There is also HTTPS. The 's' stands for secure. HTTPS uses cryptography to encrypt your request. This we if they are intercepted they wont be understood.
If the request to the server is valid then they will get a response in the form of data. If the request is not valid then they will receive an error message such as 404. In order for for the server to give back reply it may have to work out the results first or it may need to communicate with the database. Or it may do both. So the client needs to go through the server if they want something from the database.

Apis

'An API is an interface through which one program or web site talks to another.
They are used to share data and services, and they come in many different
formats and types.' - google
The server will have apis that are services that it can use for the client to get information from. The apis determine what is available to the client.

REST is a architectural style for designing apis. It was created by Roy Fielding as part of his research for his phd.
REST gives developers a set of rules they can follow when building their apis.

Make an api restful

there are lots of rules to follow to make an api restful. The two most important ones are using http request verbs, and using specific patterns of routes/Endpoint URLs.

HTTP verbs to follow

GET
GET is like read from CRUD, everytime we want our server to serve up some data, we can use GET. GET lates a callback that responds to the request and sends a result back.

app.get('/tapes', (req, res) => { Tape.find() .then(data => res.send(data)) .catch(err => console.err(err)); });

POST
corresponds to create in crud. Whenever you create a form on the website you use POST. When data is posted to the server you then create an entry in the database and save it for later. The request will contain the data, and the result will be either success or error.

app.post('/tapes', (req, res) =>{ Tape.insertMany(req.body) .then(data => res.send(data)) .catch(err => console.log('Danger in Post', err)); });

PUT & PATCH
both go into the database and update pieces of data.

PUT will update the database by sending a entire new entry to replace the previous.

PATCH will go in and replace only the piece of data that needs to be updated instead of replacing the entire entry.

DELETE
DELETE deletes or destroys a piece of data in the database.

Patterns of routes/Endpoint URLs

In order for the api to be restful we need to have a specific pattern for endpoints and routes.
If we create a route for /tapes when a client makes a get request it should retrieve all the tapes.
If they make a post request to /tapes it should make a single new tape and add it to the database.
And when they make a delete request to /tapes it should delete all tapes.

In restful routing you have rules for individual resources so with all the tapes you have every individual tape as well, so you are able to target a specific tape in the list. If you wanted tape #3306 you could target that specific tape with app.get(/tapes/3306
you can target this specific route with all of the five HTTP verbs. Using the one that fits best for the task.

GQL

daniel knowles — Mon, 15 Mar 2021 04:05:33 +0000

What is GraphQL?

"GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQl provides a complete understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time and enables powerful developer tools"
-graphql.org

GraphQL vs SQL

GraphQL often gets mistaken as SQL. GraphQL is not SQL and is in fact data-agnostic. It is not a replacement for SQL, but rather it works with SQL. GraphQL is mainly for your client to query the information they want to access inside your server. The server then will use resolvers to convert the query into SQL. That will then query your database.
So what is a Query Language? Query languages are used to request and retrieve data from databases. They do this by sending queries.

GraphQL vs REST

Rest works with endpoints or urls. You have specific url endpoint that you are hitting and that url determines what data you get back. You can pass in options to that url to try to change the shape of the data, but for the most part the API will decide more or less what you get back. So you fetch that url and that url returns data, typically in the form of JSON. Or an object full of data.
GQL allows you to ask for specific kinds of data. You can define the way your data looks.

Describe your data

type Cat {
    id: ID
    name: String
    age: Int
    tagline: String
}

Ask for exactly what you want

{
cat(name: "charlie") {
  tagline
  }
}

Get exactly what you asked for

{
  "cat": {
    "tagline": "A super loveable cat"
  }
}

Instead of getting back a bunch of information that you did not ask for you get exactly what you wanted. This means that there is no need to filter out all of the data that you did not care about.
GraphQl allows for excellent relational queries. Instead of requesting info from the API and then using that info to access more deeply nested info, you can just ask for the data you wanted right off the bat. This means you only have to make one trip to the API!

"GraphQL queries access not just the properties of one resource but also smoothly follow references between them. While typical REST APIs require loading from multiple URLs, GraphQL APIs get all the data your app needs in a single request".
-graphql.org

GraphQL supports multiple languages

GraphQL is a communication pattern, there are many tools that you can work with. It also supports all sorts of languages. So you can use the one that is more comfortable for you to work in. Here is a list of just a few languages supported by GraphQL

Javascript
Go
PHP
Python
Java / kotlin
c# / .NET
Ruby
Rust
Elixir
.. and the list goes on.

Where GQL comes from and implementations

GQL was created by fb. This does not mean that you have to use facebooks code. In fact one of the great things about GQL is that you can use your own code. This is because GQL is just a specification and not an implementation. You don't have to install GQL. Because it is just a spec you will need to use an implementation. Another great thing is that there are a lot of these available. GQL is two parts there is a server component and the client component. Lets look at some of the server component options for Javascript...

Relay: Facebooks framework for building react applications that talk to a grapQL backend.

Apollo Client (easier to get started):
A powerful javascript graph ql client, designed to work well with react, react native, angular 2, or just plain javascript.

Graphql-request: A simple and flexible javascript graphql client that works in all javascript environments.

Lokka: A simple javascript graphql client that works in a all javascript environments.

Nanogpi: Tiny graphql client library using template strings.

What the server does

the graphql server takes in your api, you write your api as a series of type definitions (designing the shape of your data).

const typeDef = [`
type Query {
  goodbye: String
}

schema {
  query: Query
}`];

Then you have your resolvers. Basically your query.

const resolvers = {
  Query: {
    goodbye(root) {
       return 'world';
      }
    }
 };

The server then takes all of your info in and shows your Api via an endpoint.

If you would like to get some practice with GPL i recommend trying Apollo to get you started.

resources for this blog:
graphicql.org

Styled components

daniel knowles — Mon, 08 Mar 2021 14:29:12 +0000

What are Styled Components?

Style components is a really cool library that lets you write css in javascript. You can do pretty much anything that you could do in a regular cascading style sheet, without needing to switch back and forth from file to file. Mapping between components and styles is no longer needed. When you define your styles you are actually creating a normal React component with your styles attached.

Setting up Styled Components

First you need to create your react app...
Type the following code into your console
you can call your file whatever you like as long as you use all lower cased letters.

$ create-react-app your file name

now open the file in vs code. Then type the following into the terminal to add the Styled Components library

$ npm install styled-components

You are now ready to start using this super fun library.
If you want synta hightlighting off the css you can install a vscode extension called vscode-styled-components.

Why use style components?

People use Styled Components for a number of reasons. Originally when you had react people would pass their styling as props.
Styled Components allows you to define all those files within the same component, you dont have to pass them as a prop and you can dynamically update them.
Here are some perks that makes Styling Components great to use.
Easy styling for react native.
Lets you avoid conflicts with 3rd party styling.
Comes ready with server side rendering.
typescript ready.
Makes it easy to extend existing styled components.
Lots of browser suppport and documentation.

Styled Components is also used by some really notable companies, and is a very hirable skill these days.

Using Style Components...

In this blog we will take a look at some cool things you can do with Style Components. Lets start with setting up our component.
Add the "import styled-components" to the top of your near the code where import react.

Here we have a normal react component with a div, with the className "App", We have added an h1 for a title.
Now we can create elements, create a h1 and a button element. You can use any html element you want for this. The syntax is as follows. First declare a new element and save it to a variable, you then start a tagged template literal, calling a function and then passing it an argument as a template string. Inside this template literal is where you can list the styles for that element. You use what looks like basic css for this. You can do anything that you can do using regular css.

Next we need to render our elements. Wrap them In the element tag that you choose and render them to your page. They must start with a capital letter and match the name that you gave your variable above.

Using Hooks...

We can also import hooks to update are code dynamically.
To do this you add { useState } next to your import React from "react" tag.

Then you set the states. Call use state and set a boolean of false.
Move to the a tag and set the primary to a prop. Define an onlclick handler then set an array function that will call set primary and call the reversal of what it currently is. Now you have a element that react to your onclick.

This has been short look at styled components and what they can do. Be sure to visit https://styled-components.com/docs
to learn more.

Resources: https://styled-components.com/docs

An introduction to Promises

daniel knowles — Mon, 01 Mar 2021 07:34:51 +0000

What are Promises?

Promises let us create asynchronous code that is a lot easier to read and understand, and a lot less repetitive to write.
MDN Web Docs says "A promise is an object that represents the eventual completion or failure of a asynchronous operation".
It is a way of promising a value that you do not possess at the moment that promise is made.

How to create a promise ...

A promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.

Here is an example of a new Promise saved to a variable named myNewPromise ...

const myNewPromise = new Promise((resolve ,reject) => {

});

By examining myNewPromise in the dev console ...

myNewPromise
Promise {<pending>}
    __proto__: Promise
    [[PromiseState]]: "pending"
    [[PromiseResult]]: undefined

you can see that its status at the moment is pending.
Notice that it has one property set to promise state and that it is currently pending. A promise will remain pending by default until it is either reject or fulfilled. If we are making a request and it takes 5 seconds then the response we get back will be pending, until that 5 seconds is over and we are given response in the form of data.

So if we execute one of the functions in the the parameters of the Promise 'reject' or 'resolve', we will get a corresponding answer for each.

const myNewPromise = new Promise((resolve ,reject) => {
    resolve(); 
});

Notice how if we pass in resolve then we look at myNewPromise in the dev console we will see that it is no longer pending.

Promise {<fulfilled>: undefined}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined

The promise has been fulfilled.

How to interact with Promises ...

Every promise has a .then() method and a .catch() method. These methods are chained to the function call and execute at run time.
Below we created a myNewPromise function that uses Math.random() to randomly decide if our Promise will be resolved or rejected. We have also chained on a .then() and a .catch() method to the end of our function call.

 const myNewPromise = new Promise((resolve, reject) => {
    const rand = Math.random(); 
    if ( rand < 0.5 ) {
        resolve(); 
    } else {
        reject(); 
    }

}).then(() => {
    console.log("the promise was fulfilled"); 
}).catch(() => {
    console.log("your promise was rejected Dx")
})

The Promise function is executed and if the Promise is resolved then our .then() method will execute and the message "the promise was fulfilled" will be logged to our console. If the Promise is rejected, the .catch() method will be executed and we will get "your promise was rejected Dx" logged to the console.

Rejecting or Resolving with a value

We use promises when we want to send a requests to the Api. This request will generally take time so we use Promises. The point of these requests is to usually get some sort of data back.
When you reject or resolve a promise you can reject or resolve it with a value, obtaining access to that value in your callback. That value gets passed into the .then() or .catch() methods which is very useful because we usually want to know why something was rejected. If it is resolved then we want to be able to access the data that we get back.

So lets demonstrate that by writing a fake request to the server.

const ourRequest = (url) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {

                 const pages = {
                    '/users' : [
                        {id: 1, username: "Hannah"},
                        {id: 5, username: "Beth"}
                    ],
                    "/about" : "this is the about page"
                }; 
                const data = pages[url];    
                if(data){
                    resolve({status: 202, data}); 
                }
                else {
                    reject({status: 404}); 
                }

        }, 1000); 
    }); 
}; 

ourRequest("/users")
.then((response) => {
    console.log(`${response.status}`);
    console.log('Data', response.data)
    console.log("REQUEST WORKED!"); 
})
.catch((response) => {
    console.log(response.status); 
    console.log("REQUEST FAILED")
})

Above we have a function ourRequest() that returns a new Promise. It takes in a url. Its going to take some amount of time before we get a response back from our server. For this we have implemented a setTimeOut() function.
For reject we have passed in a status code that is a object with a key of status and a value of 404. We have added a response parameter to our .catch that will catch and log
our response.
For resolve we have passed in a status code that is a object with a key of status and a value of 202, and a object with a key of data and a value of data.
When we call ourRequest() if the url we pass into the request matches the url in our data then our Promise is resolved and we get access to the data we have requested.

This has been a quick introduction to understanding promises. To understand more in depth uses for Promises more i recommend taking a look at Promise Chaining.