DEV Community: Mishael Dada

Everything You Need To Know About ARRAYS

Mishael Dada — Sat, 23 Jul 2022 15:17:29 +0000

INTRODUCTION

The array is the most common data structure in computer programming. Every programming language includes some form of array. Arrays are commonly used in computer programs to organize data so that a related set of values can be easily sorted or searched.

So for most of my code snippet I will be using the JavaScript language which I am most comfortable with but, I'll also make sure to write the code so that other programmers from other languages can understand.

DEFINITION OF AN ARRAY

An array is a data structure that contains a group of elements. Typically, these elements are all the same data type, such as an integer or string.

For example, imagine that a score table in a game needs to record ten scores. One way to do this is to have a variable for each score:

score_0
score_1
score_2
score_3
score_4
score_5
score_6
score_7
score_8
score_9

This would work, but there is a better way. It is much simpler to keep all the related data under one name. We do this by using an array.
Instead of having ten variables, each holding a score, there could be one array that holds all the related data:
score(9)

Well, you might be wondering why score(9)? When we have 10 scores, that is because arrays are zero-indexed; that is - when elements are stored in an array, an index/key is assigned to each element of the array to enable us to access or mutate this element in the future.

Here's an illustration:

It helps to think of an array as a row of cells, like the ones found in a table. Each cell represents an element. The individual values, or array elements, are numbered 0 to 9 because arrays start counting at 0.

In another example, a search engine may use an array to store Web pages found in a search performed by the user. When displaying the results, the program will output one element of the array at a time. This may be done for a specified number of values or until all the values stored in the array have been output. While the program could create a new variable for each result found, storing the results in an array is a much more efficient way to manage memory.

The syntax for storing and displaying the values in an array typically looks something like this:

arrayname[0] = "This ";
arrayname[1] = "is ";
arrayname[2] = "pretty simple.";

console.log(arrayname[0]);
console.log(arrayname[1]);
console.log(arrayname[2]);

The above commands would print the first three values of the array, or "This is pretty simple."

By using a "while" or "for" loop, the programmer can tell the program to output each value in the array until the last value has been reached. So not only do arrays help manage memory more efficiently, they make the programmer's job more efficient as well.

USING ARRAYS

There are several ways to create arrays, access array elements, and perform tasks such as searching and sorting the elements stored in an array. In this section, we'll discuss several array methods and properties.

Creating an Array

The simplest way to create an array is by declaring an array variable using the [] operator:

var numbers = [];

When you create an array in this manner, you have an array with length of 0. You can verify this by calling the built-in length property:

console.log(numbers.length); // displays 0

Another way to create an array is to declare an array variable with a set of elements inside the [] operator:

var numbers = [1,2,3,4,5];
console.log(numbers.length); // displays 5

You can also create an array by calling the Array constructor:

var numbers = new Array();
console.log(numbers.length); // displays 0

You can call the Array constructor with a set of elements as arguments to the constructor:

var numbers = new Array(1,2,3,4,5);
console.log(numbers.length); // displays 5

Finally, you can create an array by calling the Array constructor with a single argument specifying the length of the array:

var numbers = new Array(10);
console.log(numbers.length); // displays 10

Unlike many other programming languages, but common for most scripting languages,
JavaScript array elements do not all have to be of the same type:

var objects = [1, "Joe", true, null];

We can verify that an object is an array by calling the Array.isArray() function, like
this:

var numbers = 3;
var arr = [7,4,1776];
console.log(Array.isArray(number)); // displays false
console.log(Array.isArray(arr)); // displays true

We’ve covered several techniques for creating arrays. As for which function is best, most JavaScript's experts recommend using the [] operator, saying it is more efficient than calling the Array constructor.

Accessing and Writing Array Elements

Data is assigned to array elements using the [] operator in an assignment statement.
For example, the following loop assigns the values 1 through 100 to an array:

var nums = [];
for (var i = 0; i < 100; ++i) {
  nums[i] = i + 1;
}

Array elements are also accessed using the [] operator. For example:

var numbers = [1,2,3,4,5];
var sum = numbers[0] + numbers[1] + numbers[2] + numbers[3] +
numbers[4];
console.log(sum); // displays 15

Of course, accessing all the elements of an array sequentially is much easier using a for
loop:

var numbers = [1, 2, 3, 5, 8, 13, 21];
var sum = 0;
for (var i = 0; i < numbers.length; ++i) {
  sum += numbers[i];
}
console.log(sum); // displays 53

Notice that the for loop is controlled using the length property rather than an integer literal. Because JavaScript arrays are objects, they can grow beyond the size specified when they were created. By using the length property, which returns the number of elements currently in the array, you can guarantee that your loop processes all array elements.

Creating Arrays from Strings

(Split method)

Arrays can be created as the result of calling the split() function on a string. This
function breaks up a string at a common delimiter, such as a space for each word, and
creates an array consisting of the individual parts of the string.

The following short program demonstrates how the split() function works on a simple
string:

var sentence = "the quick brown fox jumped over the lazy dog";
var words = sentence.split(" ");
for (var i = 0; i < words.length; ++i) {
  console.log("word " + i + ": " + words[i]);
}

The output from this program is:

word 0: the
word 1: quick
word 2: brown
word 3: fox
word 4: jumped
word 5: over
word 6: the
word 7: lazy
word 8: dog

(Array.from() method)

The Array.from() function is an inbuilt function in JavaScript which creates a new array instance from a given array. In case of a string, every alphabet of the string is converted to an element of the new array instance and in case of integer values, the new array instance simple take the elements of the given array.

var sentence = "the quick brown fox jumped over the lazy dog";
var words = Array.from(sentence);
console.log(words)

[
  't', 'h', 'e', ' ', 'q', 'u', 'i',
  'c', 'k', ' ', 'b', 'r', 'o', 'w',
  'n', ' ', 'f', 'o', 'x', ' ', 'j',
  'u', 'm', 'p', 'e', 'd', ' ', 'o',
  'v', 'e', 'r', ' ', 't', 'h', 'e',
  ' ', 'l', 'a', 'z', 'y', ' ', 'd',
  'o', 'g'
]

Aggregate Array Operations

There are several aggregate operations you can perform on arrays. First, you can assign one array to another array:

var nums = [];
for (var i = 0; i < 10; ++i) {
  nums[i] = i+1;
}
var samenums = nums;

However, when you assign one array to another array, you are assigning a reference to the assigned array. When you make a change to the original array, that change is reflected in the other array as well. The following code fragment demonstrates how this works:

var nums = [];
for (var i = 0; i < 100; ++i) {
  nums[i] = i+1;
}
var samenums = nums;
nums[0] = 400;
console.log(samenums[0]); // displays 400

This is called a shallow copy. The new array simply points to the original array’s elements. A better alternative is to make a deep copy, so that each of the original array’s elements is actually copied to the new array’s elements. An effective way to do this is to create a function to perform the task:

function copy(arr1, arr2) {
  for (var i = 0; i < arr1.length; ++i) {
    arr2[i] = arr1[i];
  }
}

Now, the following code fragment produces the expected result:

var nums = [];
for (var i = 0; i < 100; ++i) {
  nums[i] = i+1;
}
var samenums = [];
copy(nums, samenums);
nums[0] = 400;
console.log(samenums[0]); // displays 1

Accessor Functions

JavaScript provides a set of functions you can use to access the elements of an array. These functions, called accessor functions, return some representation of the target array as their return values.

Searching for a Value

One of the most commonly used accessor functions is indexOf(), which looks to see if the argument passed to the function is found in the array. If the argument is contained in the array, the function returns the index position of the argument. If the argument is not found in the array, the function returns -1. Here is an example:

var names = ["David", "Cynthia", "Raymond", "Clayton", "Jennifer"];
putstr("Enter a name to search for: ");
var name = readline();
var position = names.indexOf(name);
if (position >= 0) {
  console.log("Found " + name + " at position " + position);
}
else {
  console.log(name + " not found in array.");
}

If you run this program and enter Cynthia, the program will output:

Found Cynthia at position 1

If you enter Joe, the output is:

Joe not found in array.

If you have multiple occurrences of the same data in an array, the indexOf() function will always return the position of the first occurrence. A similar function, lastIndexOf(), will return the position of the last occurrence of the argument in the array, or -1
if the argument isn’t found.

Here is an example:

var names = ["David", "Mike", "Cynthia", "Raymond", "Clayton", "Mike", "Jennifer"];
var name = "Mike";
var firstPos = names.indexOf(name);
console.log("First found " + name + " at position " + firstPos);
var lastPos = names.lastIndexOf(name);
console.log("Last found " + name + " at position " + lastPos);

The output from this program is:

First found Mike at position 1
Last found Mike at position 5

String Representations of Arrays

There are two functions that return string representations of an array: join() and toString(). Both functions return a string containing the elements of the array delimited by commas.

Here are some examples:

var names = ["David", "Cynthia", "Raymond", "Clayton", "Mike", "Jennifer"];
var namestr = names.join();
console.log(namestr); // David,Cynthia,Raymond,Clayton,Mike,Jennifer
namestr = names.toString();
console.log(namestr); // David,Cynthia,Raymond,Clayton,Mike,Jennifer

Creating New Arrays from Existing Arrays

There are two accessor functions that allow you create new arrays from existing arrays: concat() and splice().

The concat() function allows you to put together two or more arrays to create a new array, and the splice() function allows you to create a new array from a subset of an existing array.
Let’s look first at how concat() works. The function is called from an existing array, and its argument is another existing array. The argument is concatenated to the end of the array calling concat(). The following program demonstrates how concat() works:

var cisDept = ["Mike", "Clayton", "Terrill", "Danny", "Jennifer"];
var dmpDept = ["Raymond", "Cynthia", "Bryan"];
var itDiv = cis.concat(dmp);
console.log(itDiv);
itDiv = dmp.concat(cisDept);
console.log(itDiv);

The program outputs:

Mike,Clayton,Terrill,Danny,Jennifer,Raymond,Cynthia,Bryan
Raymond,Cynthia,Bryan,Mike,Clayton,Terrill,Danny,Jennifer

The first output line shows the data from the cis array first, and the second output line shows the data from the dmp array first.

The splice() function creates a new array from the contents of an existing array. The arguments to the function are the starting position for taking the splice and the number of elements to take from the existing array.

Here is how the method works:

var itDiv = ["Mike","Clayton","Terrill","Raymond","Cynthia","Danny","Jennifer"];
var dmpDept = itDiv.splice(3,3);
var cisDept = itDiv;
console.log(dmpDept); // Raymond,Cynthia,Danny
console.log(cisDept); // Mike,Clayton,Terrill,Jennifer

There are other uses for splice() as well, such as modifying an array by adding and/or removing elements. See the Mozilla Developer Network website for more information.

Mutator Functions

JavaScript has a set of mutator functions that allow you to modify the contents of an array without referencing the individual elements. These functions often make hard techniques easy, as you’ll see below.

Adding Elements to an Array

There are two mutator functions for adding elements to an array: push() and unshift(). The push() function adds an element to the end of an array:

var nums = [1,2,3,4,5];
console.log(nums); // 1,2,3,4,5
nums.push(6);
console.log(nums); // 1,2,3,4,5,6

Using push() is more intuitive than using the length property to extend an array:

var nums = [1,2,3,4,5];
console.log(nums); // 1,2,3,4,5
nums[nums.length] = 6;
console.log(nums); // 1,2,3,4,5,6

Adding data to the beginning of an array is much harder than adding data to the end of an array. To do so without the benefit of a mutator function, each existing element of the array has to be shifted up one position before the new data is added. Here is some code to illustrate this scenario:

var nums = [2,3,4,5];
var newnum = 1;
var N = nums.length;
for (var i = N; i >= 0; --i) {
  nums[i] = nums[i-1];
}
nums[0] = newnum;
console.log(nums); // 1,2,3,4,5

This code becomes more inefficient as the number of elements stored in the array increases. The mutator function for adding array elements to the beginning of an array is unshift(). Here is how the function works:

var nums = [2,3,4,5];
console.log(nums); // 2,3,4,5
var newnum = 1;
nums.unshift(newnum);
console.log(nums); // 1,2,3,4,5
nums = [3,4,5];
nums.unshift(1,2);
console.log(nums); // 1,2,3,4,5

The second call to unshift() demonstrates that you can add multiple elements to an array with one call to the function.

Removing Elements from an Array

Removing an element from the end of an array is easy using the pop() mutator function:

var nums = [1,2,3,4,5,9];
nums.pop();
console.log(nums); // 1,2,3,4,5

Without mutator functions, removing elements from the beginning of an array requires shifting elements toward the beginning of the array, causing the same inefficiency we see when adding elements to the beginning of an array:

var nums = [9,1,2,3,4,5];
console.log(nums);
for (var i = 0; i < nums.length; ++i) {
  nums[i] = nums[i+1];
}
console.log(nums); // 1,2,3,4,5,

Besides the fact that we have to shift the elements down to collapse the array, we are also left with an extra element. We know this because of the extra comma we see when we display the array contents.

The mutator function we need to remove an element from the beginning of an array is shift(). Here is how the function works:

var nums = [9,1,2,3,4,5];
nums.shift();
console.log(nums); // 1,2,3,4,5

You’ll notice there are no extra elements left at the end of the array. Both pop() and shift() return the values they remove, so you can collect the values in a variable:

var nums = [6,1,2,3,4,5];
var first = nums.shift(); // first gets the value 9
nums.push(first);
console.log(nums); // 1,2,3,4,5,6

Adding and Removing Elements from the Middle of an Array

Trying to add or remove elements at the end of an array leads to the same problems we find when trying to add or remove elements from the beginning of an array—both operations require shifting array elements either toward the beginning or toward the end of the array. However, there is one mutator function we can use to perform both operations—splice().

To add elements to an array using splice(), you have to provide the following arguments:

• The starting index (where you want to begin adding elements)

• The number of elements to remove (0 when you are adding elements)

• The elements you want to add to the array

Let’s look at a simple example. The following program adds elements to the middle of an array:

var nums = [1,2,3,7,8,9];
var newElements = [4,5,6];
nums.splice(3,0,newElements);
console.log(nums); // 1,2,3,4,5,6,7,8,9

The elements spliced into an array can be any list of items passed to the function, not necessarily a named array of items.

For example:

var nums = [1,2,3,7,8,9];
nums.splice(3,0,4,5,6);
console.log(nums);

In the preceding example, the arguments 4, 5, and 6 represent the list of elements we want to insert into nums.
Here is an example of using splice() to remove elements from an array:

var nums = [1,2,3,100,200,300,400,4,5];
nums.splice(3,4);
console.log(nums); // 1,2,3,4,5

Putting Array Elements in Order

The last two mutator functions are used to arrange array elements into some type of order. The first of these, reverse(), reverses the order of the elements of an array.

Here is an example of its use:

var nums = [1,2,3,4,5];
nums.reverse();
console.log(nums); // 5,4,3,2,1

We often need to sort the elements of an array into order. The mutator function for this task, sort(), works very well with strings:

var names = ["David","Mike","Cynthia","Clayton","Bryan","Raymond"];
nums.sort();
console.log(nums); // Bryan,Clayton,Cynthia,David,Mike,Raymond

But sort() does not work so well with numbers:

var nums = [3,1,2,100,4,200];
nums.sort();
console.log(nums); // 1,100,2,200,3,4

The sort() function sorts data lexicographically, assuming the data elements are strings, even though in the preceding example, the elements are numbers. We can make the sort() function work correctly for numbers by passing in an ordering function as the first argument to the function, which sort() will then use to sort the array elements. This is the function that sort() will use when comparing pairs of array elements to determine their correct order.

For numbers, the ordering function can simply subtract one number from another number. If the number returned is negative, the left operand is less than the right operand; if the number returned is zero, the left operand is equal to the right operand; and if the number returned is positive, the left operand is greater than the right operand.

With this in mind, let’s rerun the previous small program using an ordering function:

function compare(num1, num2) {
  return num1 - num2;
}
var nums = [3,1,2,100,4,200];
nums.sort(compare);
console.log(nums); // 1,2,3,4,100,200

The sort() function uses the compare() function to sort the array elements numerically rather than lexicographically.

Iterator Functions

The final set of array functions we examine areiterator functions. These functions apply a function to each element of an array, either returning a value, a set of values, or a new array after applying the function to each element of an array.

Non–Array-Generating Iterator Functions

The first group of iterator functions we’ll discuss do not generate a new array; instead, they either perform an operation on each element of an array or generate a single value from an array. The first of these functions is forEach(). This function takes a function as an argument and applies the called function to each element of an array.

Here is an example of how it works:

function square(num) {
  console.log(num, num * num);
}
var nums = [1,2,3,4,5,6,7,8,9,10];
nums.forEach(square);

The output from this program is:

The next iterator function,** every()**, applies a Boolean function to an array and returns true if the function can return true for every element in the array.

Here is an example:

function isEven(num) {
  return num % 2 == 0;
}
var nums = [2,4,6,8,10];
var even = nums.every(isEven);
if (even) {
  console.log("all numbers are even");
}
else {
  console.log("not all numbers are even");
}

The program displays:

all numbers are even

If we change the array to:

var nums = [2,4,6,7,8,10];

the program displays:

not all numbers are even

The some() function will take a Boolean function and return true if at least one of the elements in the array meets the criterion of the Boolean function.

For example:

function isEven(num) {
  return num % 2 == 0;
}
var nums = [1,2,3,4,5,6,7,8,9,10];
var someEven = nums.some(isEven);
if (someEven) {
  console.log("some numbers are even");
}
else {
  console.log("no numbers are even");
}
nums = [1,3,5,7,9];
someEven = nums.some(isEven);
if (someEven) {
  console.log("some numbers are even");
}
else {
  console.log("no numbers are even");
}

The output from this program is:

some numbers are even
no numbers are even

The reduce() function applies a function to an accumulator and the successive elements of an array until the end of the array is reached, yielding a single value. Here is an example of using reduce() to compute the sum of the elements of an array:

function add(runningTotal, currentValue) {
  return runningTotal + currentValue;
}
var nums = [1,2,3,4,5,6,7,8,9,10];
var sum = nums.reduce(add);
console.log(sum); // displays 55

The reduce() function, in conjunction with theadd() function, works from left to right,
computing a running sum of the array elements, like this:

add(1,2) -> 3
add(3,3) -> 6
add(6,4) -> 10
add(10,5) -> 15
add(15,6) -> 21
add(21,7) -> 28
add(28,8) -> 36
add(36,9) -> 45
add(45,10) -> 55

We can also use reduce() with strings to perform concatenation:

function concat(accumulatedString, item) {
  return accumulatedString + item;
}
var words = ["the ", "quick ","brown ", "fox "];
var sentence = words.reduce(concat);
console.log(sentence); // displays "the quick brown fox"

JavaScript also provides a reduceRight() function, which works similarly to reduce(), only working from the righthand side of the array to the left, instead of from left to right. The following program uses reduceRight() to reverse the elements of an array:

function concat(accumulatedString, item) {
  return accumulatedString + item;
}
var words = ["the ", "quick ","brown ", "fox "];
var sentence = words.reduceRight(concat);
console.log(sentence); // displays "fox brown quick the"

Iterator Functions That Return a New Array

There are two iterator functions that return new arrays: map() and filter().

The map() function works like the forEach() function, applying a function to each element of an array. The difference between the two functions is that map() returns a new array with the results of the function application.

Here is an example:

function curve(grade) {
  return grade += 5;
}
var grades = [77, 65, 81, 92, 83];
var newgrades = grades.map(curve);
console.log(newgrades); // 82, 70, 86, 97, 88

Here is an example using strings:

function first(word) {
  return word[0];
}
var words = ["for","your","information"];
var acronym = words.map(first);
console.log(acronym.join("")); // displays "fyi"

For this last example, the acronym array stores the first letter of each word in the words array.

However, if we want to display the elements of the array as a true acronym, we need to get rid of the commas that will be displayed if we just display the array elements using the implied toString() function. We accomplish this by calling thejoin() function with the empty string as the separator.

The filter() function works similarly to every(), but instead of returning true if all the elements of an array satisfy a Boolean function, the function returns a new array consisting of those elements that satisfy the Boolean function.

Here is an example:

function isEven(num) {
  return num % 2 == 0;
}
function isOdd(num) {
  return num % 2 != 0;
}
var nums = [];
  for (var i = 0; i < 20; ++i) {
  nums[i] = i+1;
}
var evens = nums.filter(isEven);
console.log("Even numbers: ");
console.log(evens);
var odds = nums.filter(isOdd);
console.log("Odd numbers: ");
console.log(odds);

This program returns the following output:

Even numbers:
2,4,6,8,10,12,14,16,18,20
Odd numbers:
1,3,5,7,9,11,13,15,17,19

Here is another interesting use of filter():

function passing(num) {
  return num >= 60;
}
var grades = [];
for (var i = 0; i < 20; ++i) {
  grades[i] = Math.floor(Math.random() * 101);
}
var passGrades = grades.filter(passing);
console.log("All grades: );
console.log(grades);
console.log("Passing grades: ");
console.log(passGrades);

This program displays:

All grades:
39,43,89,19,46,54,48,5,13,31,27,95,62,64,35,75,79,88,73,74
Passing grades:
89,95,62,64,75,79,88,73,74

Of course, we can also use filter() with strings. Here is an example that applies the spelling rule “i before e except after c”:

function afterc(str) {
if (str.indexOf("cie") > -1) {
  return true;
}
  return false;
}
var words = ["recieve","deceive","percieve","deceit","concieve"];
var misspelled = words.filter(afterc);
console.log(misspelled); // displays recieve,percieve,concieve

At this point, i think i've been able to explain what arrays are how we use them and how to use the several inbuilt functions in Javascript to perform some Array operations.

In a later part of this article we shall be looking into Two-dimensional and Multi-dimensional forms of arrays, Arrays of objects and Arrays in objects.

See you next time.

Simple GraphQL Query Using ExpressJs

Mishael Dada — Sat, 23 Jul 2022 15:13:55 +0000

Introduction

In this article, I'm going to explain the basics of making a simple query request to an API using GraphQL, and ExpressJs.

We will look at concepts like:

Making an express server
Creating our schema
Testing queries using graphiql.

So first create a folder and give it any name of your choice, I'll name mine simple-graphql-project
Inside your newly created folder, open the terminal and run the command

npm init -y

This will initialize our project with npm so that we can install packages that'll be needed for the tutorial.

Before we start writing the code, let's install all the dependencies we'll be needing for this project.

In your terminal, run the command

npm i express graphql express-graphql lodash axios

or

yarn add express graphql express-graphql lodash axios

Now with all our packages installed, let's write some code:

Create a file named app.js – this will be our main file
Paste the following code inside the app.js file, then I'll explain what the code means:

const express = require('express')
const {graphqlHTTP} = require('express-graphql')
const schema = require('./schema/schema')

const app = express()
app.use('/graphql', graphqlHTTP({
    schema,
    graphiql: true
}))

app.listen(4000, ()=> {
    console.log('Started server on port 4000');
})

So, from the code above:

In line 1: We imported our express package which is our backend framework for node js to create servers and endpoints for our project.

In line 2: graphqlHTTP—is a module from express-graphql that provides a simple way to create an Express server that runs a GraphQL API.

In line 3: schema file – this is a file we're yet to create, but I can tell you what this file will contain, in our schema file is where we'll write all the query(ies) we'll make to an API endpoint or an internal JSON file.

For instance, in this query/ies, we will extract the exact data we want to get when we make a call to an API endpoint, and also what kind of data type those data would be.

For example: if we're making a request to get a list of blog posts from an API, we expect that an ID for each post would be returned as part of the data, right? Also, we want to attribute the data type of the ID we're expecting, either it's a string or a number or maybe a boolean value.

fields: () => ({
    id: {type: GraphQLString},
    flight_number: { type: GraphQLInt },
    name: { type: GraphQLString },
    details: { type: GraphQLString },
    success: { type: GraphQLBoolean },
  }),

This is what i meant by that explanation. In this project we will make a request to a SpaceX API and the results we want from the huge chunk of data we will be receiving from the API are: id of type string, flight_number of type int, name and details of type string and success of type boolean.

In line 7-10: We will pass 2 arguments into our express app function, the first is our endpoint where we will be making all the queries from.

The second argument is graphqlHTTP function which we will pass our schema file containing our query so that express can interact with the GraphQL API, the second parameter graphiql is the tool we will be using to test our queries.

In line 13-15: This is the port where we will be starting up our express server from.

So, let's jump into our schema file now, create a folder named schema and create a file inside that folder named schema.js.

Paste the following code inside the schema.js file:

const graphql = require("graphql");
const {
  GraphQLObjectType,
  GraphQLInt,
  GraphQLString,
  GraphQLSchema,
  GraphQLList,
  GraphQLBoolean,
} = graphql;
const axios = require("axios");

const LaunchType = new GraphQLObjectType({
  name: "Launch",
  fields: () => ({
    id: {type: GraphQLString},
    flight_number: { type: GraphQLInt },
    name: { type: GraphQLString },
    details: { type: GraphQLString },
    success: { type: GraphQLBoolean },
  }),
});

The first 21 lines of our code contains our import statement statements. Our LaunchType variable, is a graph object type which will contain the selected fields we want to get from our API call.

Let's continue with the code:

const RootQuery = new GraphQLObjectType({
  name: "RootQueryType",
  fields: {
    launch: {
      type: LaunchType,
      args: { id: { type: GraphQLString } },
      resolve(parent, args) {
        return axios
          .get(`https://api.spacexdata.com/v5/launches/${args.id}`)
          .then((res) => res.data);
      },
    },
    launches: {
      type: new GraphQLList(LaunchType),
      resolve(parent, args) {
        return axios
          .get("https://api.spacexdata.com/v5/launches")
          .then((res) => res.data);
      },
    },
  },
});

The RootQuery object will contain 2 queries that we'll be making, firstly we want to get details about a particular launch by passing the id as a query string to the API URL and the second query request is to get details of all the launch that had been made.

So for the first query which is launch: we passed in a type “LaunchType” and also an “args” which is the argument/query string we will be using to fetch the details for a particular launch detail. In the resolve function we also pass two arguments parent and args, we won't be talking about the parent argument for now. Inside the resolve function, we return the data we get from querying our API endpoint.

The second query which is launches: if you notice we used a type GraphQLList because we're getting not just one data but multiple data, so we pass our results into a list/array.

After we're done writing all our query functions, then we export our schema file, so we can use it in our app.js file.

So include this code inside your schema.js file:

module.exports = new GraphQLSchema({
  query: RootQuery,
});

Now we can test our queries by going to our terminal and running the command:
node app.js
You should see Started server on port 4000in your terminal

Now open your browser and navigate to localhost:4000/graphql if you remember, that's the endpoint we created for our GraphQL API.

On your browser, you should see something like this:

This is graphiql, the tool we will be using to test our endpoints:

So let's get the details of all the launches that have been made at SpaceX:

Copy the id of any data, then we use it to make the second query to get details of an individual launch.

So we've successfully made our query requests and have got our desired outcome.

Link to source code:

Conclusion

From this tutorial we made API request to external API, we can also use GraphQL to fetch data from a JSON file in our project and also more advanced functionalities.

If you like to know more about GraphQL use the comment section to tell me what you'll like me to write on next, you can also check out my previous articles, you'll like them.

Thank you till next time.

How To Get Started in the Tech Industry

Mishael Dada — Tue, 31 May 2022 05:32:50 +0000

Getting Started in Tech

I'll like to start this article by introducing myself and what I did before I eventually transitioned into tech, and in this article, I'll be explaining how you can transition into the tech world without facing the same challenges I faced.
So let's get right into it.

Introduction

My name is Mishael Dada, I'm from Nigeria, and I'm a graduate of Biochemistry who transitioned to be a Front-end Developer and a UI Designer.
My journey into tech started in the year 2019 after graduating from the university, I launched out to learn Cyber Security after watching a movie called hackers, well I'm sure this movie has pushed a lot of people into the cyber security field than any other movie except maybe you've watched matrix too. So I joined a cyber security community Diary of Hackers (DoH) I started learning python, shell(bash) but I wasn't really getting the hang of it, I couldn't understand some of the basic concepts like TCP/IP model, HTTPS Methods and so on, the journey at first is always really stressful (as a beginner put this at the front of your mind), so I contacted a friend of mine Teddy from my university days who I know was into programming then (currently a Data Engineer), so after a long chat with him he introduced me to another coursemate of ours Ebube(aka Busko).
Now, this whole article would never exist without the two guys I've mentioned above (Teddy and Ebube), I'll like to use this medium to appreciate them for dragging me fully into the tech field cause if they didn't probably I'll be sitting in the corner of a room right now washing test tubes.
So, it's time to show you how to transition into tech fully based on my own experience it might probably not be the right way for some people but it might work for you, so sit tight and let's get started.

Transitioning into the Tech Industry

What exactly is Tech Industry?

Dr Myles Munroe once said:

"When purpose is not known, abuse is inevitable!"

So therefore I can say that

"When the definition of a thing is not known, misunderstanding is inevitable"

Most times when you ask people what the tech industry means, their answer has to do with the full name "Technology" they're not wrong at all but there's a keyword missing there and that keyword is innovation, so, the Tech Industry can simply be defined as an industry, focused mainly on innovation, bringing ideas to life using different technologies. So I guess we know what the tech industry means now, so next up is Steps to getting into the Tech Industry.

Steps to getting into the Tech Industry

Don't forget what I said earlier this is just my own opinion of how to get into the tech field yours might be different but if it happens that you are a complete noob then this will work for you, so let's take a deep dive into it.

Step 1: Finding a Niche of Choice

For many of us at first, we thought the Tech Industry was just about writing hundreds and thousands of lines of codes and because of that we rushed into learning one programming language or the other (just like I did in the beginning) but here's the good new - the Tech industry isn't just about writing codes and sitting in front of a PC with a black background and green text.

The industry also has a category of non-coding skills you can adopt I'll be giving you a list of those non-coding skills below, but if you're interested in finding out more and their roles you can find that information here.

UI/UX Design
Graphics Design
Technical Writer
Tech Support Specialist
Project management
Product Management
Digital Marketing

and so.
There are thousands of freelancers who earn millions monthly just from these skills, you can do that too pick up a course today on platforms like Youtube, Udemy, Udacity and many more. As a kind gesture, at the end of this article, I'll be sharing links to some resources where you can learn most of these above-mentioned skills for free as well as some paid Udemy courses I have.

So with that said the coding aspect of the Tech Industry is a massive one and it can be likened to the width of the sky and I'm sure you know that's really really massive.
Below is a list of the categories in the coding aspect of the Tech Industry:

Software Engineering
Web Development
Game Development
Mobile App Development
Cyber Security
Artificial Intelligence
Machine Learning
Data Science
Cloud Engineering
BlockChain Development

and many more, Note: Most of these categories listed above have sub-categories for example a Web Developer can either be a Frontend, a Backend or a FullStack Developer.

Now after going through this list, DYOR (Do Your Own Research), find a niche or a category you're interested in or where you're passion-driven to go into because with time the only thing that'll keep you moving against all odds is your passion.
Are you someone who is very good with colours and very creative with designs (e.g. students good in architecture, building tech) you can give UI/UX a try, are you a cashier who's having difficulty keeping track of daily transactions cause of the large influx of customers? try building an app that'll help you do that. I believe everyone has a space in the tech industry, as one of my mentors Danny Thompson(even though he doesn't know I exist) would say "It's never too late to learn how to code and there's a space for everyone", so, find your passion then, what next?

Step 2: Find a Roadmap

After you must have decided to go into one of the categories, the next question on your mind is so where do I start from?, what do I learn?, how do I learn what I need to learn? well, that's the essence of a roadmap.
A roadmap is a visualization of a strategic plan. You need a bold vision for what you want to achieve and a solid plan for how you will turn your aspirations into reality. Let's take for example you're going to see a relative who lives in another state, you don't just get into your car and start driving in any direction right? you follow a path that leads to your destination right? well lucky for us thousands of people have gone down the paths you've chosen and they've laid down a path for us to follow to get to our destination.
I almost forgot to say this, different career paths here use different stacks of programing language but a programming language can also be used in multiple stacks for example Javascript and Python can be used in more than 60% of the stacks you'll find, I'll attach an image below for better understanding.

As you can see each sector has a stack of languages, one mistake I made and I see new developers making today is "Learning all the languages in a stack at the same time", please don't do that you're only going to waste your time and gain nothing at the end, learn one language at a time if your stack is "*Javascript, Java, Python" pick one language let's say you pick "Java", find a roadmap for learning java you can find one here stick to learning it well then move to the next, in a later section we'll talk about how to learn how to code efficiently.
Below are links to a list of roadmaps to different career paths you might have chosen, if you don't find any relating to the path you've chosen, do well to inform me so I can add it up later.

FreeCodeCamp Web Developer Roadmap
Developer Roadmaps includes -- Frontend -- Backend -- Andriod -- Python -- Java -- Go -- DevOps

Now you've picked the languages you want to learn and you've found a roadmap for it next is "Where do I learn from?"

Step 3: Find Learning Resources

Getting the right tutorial video for you to kick off your journey can prove to be quite difficult especially if you're transitioning into tech with no CS background. So, I've made available a compilation of youtube channels, videos and files for different categories which you can check out, and if you find your desired career path then you start learning but, I must say this Do not watch too many tutorial videos at a time, get one video stick to it till the end before moving to the next on, we'll talk about challenges you'll face while learning in another section of this article.
So below is a list of resources worth hundreds of dollars and I'll be sharing it for free cause I also got it for free, finally if you don't find a video of your choice let me know so I can share other materials with you.

List of Youtube Channels

Google Drive and Mega Files

I guess with this we're ready for the last step of our transition into tech.

Step 4: Start

Well as simple as it may sound this happens to be the most difficult step to take when it comes to transitioning into the tech industry. You've found your passion-driven career, you know the stack of programming languages to learn, you've gotten the roadmap for a specific language you've decided to start with, and you have all your learning materials available next thing to do is START and as you're starting always remember it takes TIME to become good at any programming language and it might seem as if you can't do it but keep trying.

Things To Do To Enable You to Start Well

Make a timetable: This I think is one of the effective ways of starting well, create time for yourself and be ready to sacrifice a lot of your time to learn, as a beginner when I started learning how to code it was during the COVID-19 pandemic I spend approximately 14+ hours daily in front of my PC, yours doesn't have to be 14 hours yours can be 4 hours, 2 hours daily depending on your daily schedule.
Get a Mentor: This is one of the things I wasn't opportune to have during my early days of learning, a good mentor is able to impact knowledge worth 10 hours in 40 minutes, he's able to see your mistake at a glance and tell you how to correct it immediately and this I can tell you from experience will save you lot of hours of debugging. So go on Twitter or LinkedIn check through profiles and get yourself a mentor, i'm still a junior dev so I can't be anyone's mentor yet, but if you happen to run into any form of bug in your code you can reach out to me.
Get a Learning Partner: While this might not work for everyone, it works really well for others, getting someone who is starting out like you and connect with him/her.
Set Goals: This is my favourite part, I do this very very often and it has proved to be more effective in boosting productivity than any other method. Set targets for yourself - for me personally I set daily, weekly, monthly and yearly targets. By the beginning of the year, I have a plan for projects I wanna work on, tasks I'll like to accomplish and so on for example one of my plan for the year was (using was cause Its no longer a plan) to get a full-time role which currently I've achieved. So I urge you as you are starting out to make plans for yourself.

Well with these few points i wish you good luck in your journey.
In case of any suggestions to improve this article or if you have any questions, please reach out to me.

How Do I implement Web Scraping With NodeJS

Mishael Dada — Wed, 25 May 2022 06:28:51 +0000

Hello everyone,

I have a task to scrape an instagram URL (https://www.instagram.com/{username}/?__a=1) and get the graphql data it returns. I've tried few methods some worked and later on stopped working.
Please if you know any 100% working method, i'll be happy to learn.

Thank you