DEV Community: Boluwatife Ajayi

Rest API VS GraphQL API with react

Boluwatife Ajayi — Wed, 23 Aug 2023 13:38:42 +0000

Let's compare a REST API and a GraphQL API using a practical example and demonstrate how they differ when fetching data from a frontend client, such as React.

Scenario: Consider a simple application for a library that stores information about books and authors.

REST API Example:

Server (Node.js with Express):
Assuming you have a RESTful API for books and authors:

const express = require('express');
const app = express();

// Define routes for books and authors
app.get('/api/books', (req, res) => {
  // Logic to fetch a list of books from a database
  const books = /* ... */;
  res.json(books);
});

app.get('/api/authors', (req, res) => {
  // Logic to fetch a list of authors from a database
  const authors = /* ... */;
  res.json(authors);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Frontend (React):
In a React component, you would make separate HTTP requests to fetch books and authors:

import React, { useEffect, useState } from 'react';

function App() {
  const [books, setBooks] = useState([]);
  const [authors, setAuthors] = useState([]);

  useEffect(() => {
    // Fetch books
    fetch('/api/books')
      .then((response) => response.json())
      .then((data) => setBooks(data));

    // Fetch authors
    fetch('/api/authors')
      .then((response) => response.json())
      .then((data) => setAuthors(data));
  }, []);

  return (
    <div>
      <h1>Library App</h1>
      <h2>Books</h2>
      <ul>
        {books.map((book) => (
          <li key={book.id}>{book.title}</li>
        ))}
      </ul>
      <h2>Authors</h2>
      <ul>
        {authors.map((author) => (
          <li key={author.id}>{author.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

In this REST API example, you have separate endpoints for books and authors. You make two separate requests from the frontend, one for books and one for authors.

GraphQL API Example:

Server (Node.js with Express and Apollo Server):

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
const app = express();

// Define GraphQL schema
const typeDefs = gql`
  type Book {
    id: ID
    title: String
  }

  type Author {
    id: ID
    name: String
  }

  type Query {
    books: [Book]
    authors: [Author]
  }
`;

// Define resolvers
const resolvers = {
  Query: {
    books: () => {
      // Logic to fetch a list of books from a database
      const books = /* ... */;
      return books;
    },
    authors: () => {
      // Logic to fetch a list of authors from a database
      const authors = /* ... */;
      return authors;
    },
  },
};

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

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Frontend (React with Apollo Client):
In a React component, you would use Apollo Client to fetch data via a single GraphQL query:

import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, useQuery, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: '/graphql', // GraphQL endpoint
  cache: new InMemoryCache(),
});

const GET_BOOKS_AND_AUTHORS = gql`
  query {
    books {
      id
      title
    }
    authors {
      id
      name
    }
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_BOOKS_AND_AUTHORS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const { books, authors } = data;

  return (
    <div>
      <h1>Library App</h1>
      <h2>Books</h2>
      <ul>
        {books.map((book) => (
          <li key={book.id}>{book.title}</li>
        ))}
      </ul>
      <h2>Authors</h2>
      <ul>
        {authors.map((author) => (
          <li key={author.id}>{author.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default function ApolloApp() {
  return (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );
}

In this GraphQL API example, you have a single GraphQL endpoint. The frontend sends a single GraphQL query **(GET_BOOKS_AND_AUTHORS) **to request both books and authors data in one request.

Key Differences:

Endpoint: REST typically has multiple endpoints for different resources, while GraphQL has a single endpoint for all queries and mutations.
Over-fetching and Under-fetching: In REST, you might over-fetch data (get more than needed) or under-fetch data (get less than needed). In GraphQL, the client specifies exactly what data it needs, avoiding over-fetching or under-fetching.
Multiple Requests vs. Single Request: In REST, you often make multiple requests to different endpoints. In GraphQL, you make a single request with multiple queries to fetch related data.
Versioning: REST APIs often require versioning to handle changes. GraphQL allows clients to request only the fields they need, reducing the need for versioning.

GraphQL offers more flexibility and efficiency by allowing clients to request precisely the data they require in a single query, reducing over-fetching and under-fetching, and eliminating the need for multiple endpoints or versioning.

The Javascript higher order array methods with reactjs examples

Boluwatife Ajayi — Sun, 25 Dec 2022 22:17:01 +0000

JavaScript higher order array methods are functions that operate on arrays, and they can be very useful for working with data in a React application. Here are some examples of how you can use some common higher order array methods in a React functional component using the useState hook:

map: The map method iterates over an array and applies a function to each element, returning a new array with the transformed elements. Here is an example of how you might use the map method to render a list of items in a React component:

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([1, 2, 3, 4, 5]);

  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

export default App;

filter: The filter method iterates over an array and returns a new array with only the elements that pass a test implemented by a provided function. Here is an example of how you might use the filter method to filter a list of items in a React component:

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([1, 2, 3, 4, 5]);

  const evenItems = items.filter(item => item % 2 === 0);

  return (
    <ul>
      {evenItems.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

export default App;

reduce: The reduce method is a useful higher order array method that can be used to reduce an array to a single value by applying a function to each element. Here is an example of how you might use the reduce method in a React functional component to calculate the average value of an array of numbers:

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([1, 2, 3, 4, 5]);

  const sum = items.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
  const average = sum / items.length;

  return <div>The average value is {average}</div>;
}

export default App;

In this example, the reduce method is used to sum the values in the items array, and the resulting sum is divided by the length of the array to calculate the average.

You can also use the reduce method to perform other types of calculations or transformations on an array. For example, you might use it to count the number of occurrences of a particular value in an array, or to create a new object by combining the values of multiple objects in an array.

Here is an example of how you might use the reduce method to count the number of occurrences of a particular value in an array:

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5]);

  const count = items.reduce((accumulator, currentValue) => {
    if (currentValue === 3) {
      accumulator++;
    }
    return accumulator;
  },

some: The some method is a higher order array method that iterates over an array and returns true if at least one element in the array passes a test implemented by a provided function. Here is an example of how you might use the some method in a React functional component to determine if at least one element in an array meets a certain condition:

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([1, 2, 3, 4, 5]);

  const hasEven = items.some(item => item % 2 === 0);

  return <div>{hasEven ? 'There is at least one even number' : 'There are no even numbers'}</div>;
}

export default App;

In this example, the some method is used to check if at least one element in the items array is even. If at least one element is even, the component will render the message "There is at least one even number". If no elements are even, the component will render the message "There are no even numbers".

You can use the some method to check for any type of condition that you specify in the provided function. For example, you might use it to check if an array contains a particular value, or if an array of objects contains an object with a certain property.

every: The every method is a higher order array method that iterates over an array and returns true if every element in the array passes a test implemented by a provided function. Here is an example of how you might use the every method in a React functional component to determine if all elements in an array meet a certain condition:

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([1, 2, 3, 4, 5]);

  const allEven = items.every(item => item % 2 === 0);

  return <div>{allEven ? 'All numbers are even' : 'Not all numbers are even'}</div>;
}

export default App;

In this example, the every method is used to check if all elements in the items array are even. If all elements are even, the component will render the message "All numbers are even". If any elements are not even, the component will render the message "Not all numbers are even".

You can use the every method to check for any type of condition that you specify in the provided function. For example, you might use it to check if an array contains only a particular type of value, or if an array of objects contains only objects with a certain property.

flat: The flat method is a higher order array method that flattens an array up to a specified depth. Here is an example of how you might use the flat method in a React functional component to flatten an array of arrays:

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([[1, 2], [3, 4], [5, 6]]);

  const flattened = items.flat(1);

  return <div>The flattened array is: {flattened.join(', ')}</div>;
}

export default App;

In this example, the flat method is used to flatten the items array one level deep. The resulting array will contain all of the elements from the original items array in a single, flat array: [1, 2, 3, 4, 5, 6].

You can use the flat method to flatten arrays of any depth, by specifying the depth as an argument. For example, you might use it to flatten an array two levels deep, or to flatten an array of arrays of arrays.

flatMap: The flatMap method is a higher order array method that maps each element in an array to a new array, then flattens the resulting arrays into a single array. Here is an example of how you might use the flatMap method in a React functional component to flatten an array of arrays:

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([[1, 2], [3, 4], [5, 6]]);

  const flattened = items.flatMap(item => item);

  return <div>The flattened array is: {flattened.join(', ')}</div>;
}

export default App;

In this example, the flatMap method is used to map each element in the items array (which is itself an array) to a new array, and then flatten the resulting arrays into a single array. The resulting array will contain all of the elements from the original items array in a single, flat array: [1, 2, 3, 4, 5, 6].

You can use the flatMap method to perform other types of transformations on an array as well. For example, you might use it to map each element in an array to a new array of values, and then flatten the resulting arrays into a single array of all the values.

find: The find method is a higher order array method that iterates over an array and returns the first element that passes a test implemented by a provided function. Here is an example of how you might use the find method in a React functional component to search for a particular element in an array:

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([1, 2, 3, 4, 5]);

  const three = items.find(item => item === 3);

  return <div>The element is: {three}</div>;
}

export default App;

In this example, the find method is used to search the items array for the element 3. If the element is found, it is returned by the find method and rendered by the component. If the element is not found, the find method will return undefined and the component will render nothing.

You can use the find method to search for any type of element that you specify in the provided function. For example, you might use it to search for an object with a particular property value, or to find the first element in an array that meets a certain condition.

sort: The sort method is a higher order array method that sorts the elements in an array in place and returns the sorted array. Here is an example of how you might use the sort method in a React functional component to sort an array of numbers:

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState([5, 3, 1, 4, 2]);

  const sorted = items.sort((a, b) => a - b);

  return <div>The sorted array is: {sorted.join(', ')}</div>;
}

export default App;

In this example, the sort method is used to sort the items array in ascending order. The sort method takes a compare function as an argument, which is used to determine the order of the elements. In this case, the compare function subtracts b from a, which results in a sorted array of [1, 2, 3, 4, 5].

You can use the sort method to sort arrays of other types of elements as well. For example, you might use it to sort an array of strings alphabetically, or to sort an array of objects based on a particular property.

Conclusion
I appreciate you reading this post; I hope you found it interesting. Any comment, whether positive or negative, will be much valued.

Top Reasons for Learning Javascript

Boluwatife Ajayi — Sun, 25 Dec 2022 21:43:43 +0000

It is a widely used programming language: JavaScript is one of the most popular programming languages in the world, and it is used on a large percentage of websites and web-based applications. Knowing JavaScript can help you to develop skills that are in demand in the job market.
It is a widely used programming language: JavaScript is one of the most popular programming languages in the world, and it is used on a large percentage of websites and web-based applications. Knowing JavaScript can help you to develop skills that are in demand in the job market.
It is versatile: JavaScript can be used to build a wide range of applications, including web-based applications, mobile apps, desktop apps, and more. It can also be used to create interactive elements on websites, such as forms, games, and animations.
It is easy to learn: JavaScript has a relatively simple syntax, and it is a good language for beginners to learn. There are also many resources available to help you learn JavaScript, including online tutorials, books, and courses.
It is constantly evolving: JavaScript is an actively developed language, and new features are being added all the time. Learning JavaScript can help you to stay up-to-date with the latest developments in the field and to build modern, cutting-edge applications.
It is used in many different industries: JavaScript is used in a wide range of industries, including finance, healthcare, education, and more. Knowing JavaScript can open up new career opportunities in these industries and others.

Overall, learning JavaScript can be a valuable skill for anyone interested in programming and web development, as it is a widely used, versatile, and constantly evolving language that is used in many different industries.

Understanding the useRef hook in react

Boluwatife Ajayi — Sun, 25 Dec 2022 21:24:37 +0000

The useRef hook in React is a way to access the properties of a DOM element in a functional component. It allows you to create a mutable object that persists across re-renders of the component.

Imagine that you are a painter and you are creating a new painting. You have a canvas and a paintbrush, and you want to keep track of the current color of the paint and the position of the paintbrush on the canvas. To do this, you can use the useRef hook like a palette and a paint tray.

Here is an example of how you might use the useRef hook to access the properties of a DOM element in a functional component:

import { useRef } from "react";

function Painting() {
  const canvasRef = useRef(null);
  const paintbrushRef = useRef(null);

  function handlePaintbrushMove(event) {
    const { x, y } = event.target.getBoundingClientRect();
    paintbrushRef.current.style.top = y + "px";
    paintbrushRef.current.style.left = x + "px";
  }

  function handleColorChange(event) {
    paintbrushRef.current.style.backgroundColor = event.target.value;
  }

  return (
    <div>
      <canvas ref={canvasRef} />
      <div
        ref={paintbrushRef}
        className="paintbrush"
        onMouseMove={handlePaintbrushMove}
      />
      <input type="color" onChange={handleColorChange} />
    </div>
  );
}

In this example, the useRef hook is used to create a canvasRef and a paintbrushRef object. The ref attribute is used to assign the DOM element to the ref object, and the current property is used to access the properties of the DOM element.

The handlePaintbrushMove function uses the getBoundingClientRect method to get the position of the paintbrush element on the canvas, and the style property is used to update the top and left CSS properties. The handleColorChange function uses the value property of the input element to update the backgroundColor CSS property of the paintbrush element.

I hope this helps to clarify the concept of the useRef hook in React.

Promises in javascript simply explained

Boluwatife Ajayi — Sun, 25 Dec 2022 21:21:26 +0000

JavaScript promises are a way to handle asynchronous code in a more organized and predictable way. They allow you to write code that is executed after a certain action has been completed, without blocking the rest of the code from running.

Imagine that you are at a restaurant and you order a meal. You are hungry and want to eat your meal as soon as possible, but the chef has to cook it first. While you are waiting for your meal to be ready, you might do other things, such as chatting with your friends or checking your phone.

In this analogy, the process of cooking your meal is like an asynchronous action. It takes some time to complete, and you can't control when it will be done. However, you can still do other things while you are waiting.

Promises are like a promise from the chef to let you know when your meal is ready. When you order your meal, the chef might say "I promise to let you know when your meal is ready." This is like creating a promise in JavaScript.

Here is an example of how you might use a promise in JavaScript to handle an asynchronous action:

function orderMeal() {
  return new Promise((resolve, reject) => {
    // simulate the process of cooking a meal
    setTimeout(() => {
      const meal = {
        name: "Spaghetti Bolognese",
        temperature: "hot",
        served: true
      };
      resolve(meal); // the meal is ready, so resolve the promise
    }, 2000); // it takes 2 seconds to cook the meal
  });
}

// order the meal and wait for it to be ready
orderMeal()
  .then(meal => {
    console.log(`Your ${meal.name} is ready! It is ${meal.temperature} and it has been served.`);
  })
  .catch(error => {
    console.error(error);
  });

In this example, the orderMeal function returns a promise that is resolved when the meal is ready. The then method is used to specify a callback function that is executed when the promise is resolved, and the catch method is used to handle any errors that might occur.

Here is another example using promises to fetch data from an api since that where promises are mostly applied

function getUser() {
  return new Promise((resolve, reject) => {
    // make an HTTP request to a server to get the user's information
    fetch("https://my-api.com/users/123")
      .then(response => response.json())
      .then(data => {
        const user = {
          id: data.id,
          name: data.name,
          email: data.email
        };
        resolve(user); // the user data has been retrieved, so resolve the promise
      })
      .catch(error => {
        reject(error); // there was an error, so reject the promise
      });
  });
}

// get the user's information and wait for it to be retrieved
getUser()
  .then(user => {
    console.log(`Hello, ${user.name}! Your email is ${user.email}.`);
  })
  .catch(error => {
    console.error(error);
  });

In this example, the getUser function returns a promise that is resolved when the user's information has been retrieved from the server. The then method is used to specify a callback function that is executed when the promise is resolved, and the catch method is used to handle any errors that might occur.
hope you enjoyed reading ! happy coding

How to use light mode and dark mode colors web development

Boluwatife Ajayi — Sun, 25 Dec 2022 21:09:42 +0000

offering light and dark mode options in web design and app development can help to improve the accessibility, user preference, and energy efficiency of a website or app, which can enhance the user experience.

So When creating a light and dark mode for a website or application, it is common to use different colors for each mode to provide a visually distinct experience for the user. Here are some examples of colors that you might use for light and dark modes:

Light mode:

White
Light grey
Pale blue
Light yellow
Pale green
Dark mode:

Dark mode:

Black
Dark grey
Dark blue
Dark purple
Dark green

Of course, these are just a few examples, and you can use any colors that you like for your light and dark modes. It is also a good idea to consider the color contrast between different elements in your design to ensure that they are easily readable for users.

To switch between light and dark modes in CSS, you can use the prefers-color-scheme media query. This media query allows you to apply different styles based on the user's preferred color scheme, as set in their operating system or browser settings.

Here is an example of how you might use the prefers-color-scheme media query to apply different colors for light and dark modes:

/* Light mode colors */
body {
  color: black;
  background-color: white;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background-color: black;
  }
}

In this example, the light mode colors are applied by default, and the dark mode colors are applied when the user's preferred color scheme is set to "dark".

How to manually implement it in your html document

To apply light and dark mode options to your HTML document, you can follow these steps:

Create two CSS stylesheets, one for light mode and one for dark mode. In each stylesheet, define the styles for the various elements in your HTML document, such as the background color, text color, and other styles as needed.
In your HTML document, link to the two stylesheets using the link element. You can set the rel attribute to "stylesheet" and the href attribute to the URL of the stylesheet.
Create a toggle button or other element in your HTML document that will be used to switch between light and dark mode. You can use the button element or any other element that is suitable for your needs.
Add an onclick event handler to the toggle button or element, which will be called when the user clicks the button. In the event handler, you can use JavaScript to switch between the two stylesheets by adding or removing the link elements from the DOM.

<!-- Link to the light mode stylesheet -->
<link rel="stylesheet" href="/css/light-mode.css" id="light-mode">

<!-- Link to the dark mode stylesheet -->
<link rel="stylesheet" href="/css/dark-mode.css" id="dark-mode" disabled>

<!-- Toggle button to switch between light and dark mode -->
<button onclick="toggleMode()">Toggle Mode</button>

<script>
  function toggleMode() {
    // Get the light and dark mode stylesheets
    const lightMode = document.getElementById("light-mode");
    const darkMode = document.getElementById("dark-mode");

    // Toggle the disabled attribute of the stylesheets
    lightMode.disabled = !lightMode.disabled;
    darkMode.disabled = !darkMode.disabled;
  }
</script>

the link elements for the light and dark mode stylesheets are added to the HTML document, and the toggle button has an onclick event handler that switches between the two stylesheets by toggling the disabled attribute of the link elements.