DEV Community: Olufeyimi Samuel

Data Fetching with React Query and TypeScript using the Movie Database Api

Olufeyimi Samuel — Tue, 09 May 2023 14:00:59 +0000

A few years back when I started learning ReactJS, I was introduced to data fetching using React Hooks, specifically the useState and useEffect hooks. But every time the page paints/loads, the data is been re-fetched. This suffice for a while until I found a better way of handling data fetching using React Query. Data fetching with React Query was a game changer for me.

This article is targeted towards beginners like I was few years ago. To illustrate the usage of React Query better, we will be creating a single page movie page using the movie database api.

Please note: this article won’t cover how to setup an account on the movie database (TMDB). If needed, I will write on that in another article. For this project, I already have my api key from TMDB and that will be used in this example. To learn more about TMDB, kindly check out their official website

So let’s jump in…
To begin, let’s create a new React Project using Vite.

Open your VSCode or any other code editor, open the terminal and type in yarn create vite or npm create vite@latest then follow the prompts. I will be using React with TypeScript in this example.
You can checkout the official documentation page for more information on Vite.

Next, let’s install some dependencies. In your terminal, type in yarn add axios @tanstack/react-query. Then run yarn dev to start the project.

As stated above, I’ve setup my TMDB account. For this illustration, we will be using the discover movies api. This api have about 30 params for filtering. However, we will only use ‘sort_by’ and ‘page’ params in addition to the compulsory ‘api_key’. Our endpoint will look like this https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=${my_api_key}&page=${page}
The page will be controlled to allow for fetching of the next page.

Just to speed things up, I’ve implemented a simple movie page using the regular useState and useEffect. I’m displaying the movie title, movie thumbnail, movie rating and movie description which is seen on hover of each movie card.
The project structure looks something like this:

As seen in the directory above, there are 4 major files in the src folder, App.tsx, main.tsx, movie.tsx and index.css. I modified App.tsx and index.css and created a new movie.tsx. The main.tsx is as it were for now.

Using our useState and useEffect, we can fetch the data within the App.tsx component as seen below.

import { useEffect, useState } from "react";
import Movie from "./movie";

export interface Movies {
  id?: number;
  title: string;
  poster_path: string;
  overview: string;
  vote_average: number;
}

const my_api_key = import.meta.env.VITE_API_KEY;

function App() {
  const [loading, setLoading] = useState<boolean>(false);
  const [movies, setMovies] = useState<Movies[]>([]);
  const [page, setPage] = useState<number>(1);

  const FeaturedApi = `https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=${my_api_key}&page=${page}`;

  const getMovies = (API: string) => {
    setLoading(true);
    fetch(API)
      .then((res) => res.json())
      .then((data) => {
        setMovies(data.results);
        setLoading(false);
      });
  };

  useEffect(() => {
    getMovies(FeaturedApi);
  }, [FeaturedApi]);

  return (
    <div className="movie_app">
      <h1 className="header">
        Simple Movie App with React Query and TypeScript
      </h1>

      <div className="movie-container">
        {loading ? (
          <h1 className="loading">Loading...</h1>
        ) : (
          <>
            {movies.length > 0 &&
              movies.map((movie) => <Movie key={movie.id} {...movie} />)}
          </>
        )}
      </div>

      <div className="pagination">
        <button
          onClick={() => setPage((prev) => prev - 1)}
          disabled={page === 1 ? true : false}
        >
          Prev
        </button>
        <button
          onClick={() => setPage((prev) => prev + 1)}
          disabled={page === 100 ? true : false}
        >
          Next
        </button>
      </div>
    </div>
  );
}

export default App;

In the snippet above, the constant my_api_key is gotten from TMDB.
The movie.tsx component looks like this:

import { Movies } from "./App";

const Movie = ({ title, poster_path, overview, vote_average }: Movies) => {
  const ImagesApi = "https://image.tmdb.org/t/p/w1280";
  const setVoteClass = (vote: number) => {
    if (vote >= 8) {
      return "green";
    } else if (vote >= 6) {
      return "orange";
    } else {
      return "red";
    }
  };

  return (
    <div className="movie">
      <img
        src={
          poster_path
            ? ImagesApi + poster_path
            : "https://indianfolk.com/wp-content/uploads/2018/10/Movie.jpg"
        }
        alt={title}
      />
      <div className="movie-info">
        <h3>{title}</h3>
        <span className={`tag ${setVoteClass(vote_average)}`}>
          {vote_average}
        </span>
      </div>
      <div className="movie-over">
        <h2>Overview:</h2>
        <p>{overview}</p>
      </div>
    </div>
  );
};

export default Movie;

What we've simply done is declared a getMovies function that takes in 1 parameter which is the api. We then use the regular fetch function to call the api. Once there's a response, we convert to JSON and then store in the movies state. At the beginning of the call, we change the loading state to true and at the end of the process, we change the loading state back to false.

Within the body of the component, we display a loading message while data fetching is ongoing then we map out the new updated movies array once the data fetching process is completed.

We also have a pagination part with 2 buttons for increasing and decreasing the page state.

This implementation works perfectly fine. However, it is data consuming. Every time we increment or decrement pages, we are calling the endpoint over and over again. Also, we get a blink "Loading..." message every time the page changes.

What if we could cache or temporarily store the previously fetched data and only update it in the background when there's a new update? This and many more is what React Query allows us to do.

What exactly is React Query?
React Query is a JavaScript library that allows you fetch, cache, synchronize and update server state in your web application. In simple terms, that means with RQ, you can fetch data, temporarily store the data, update the data in the background and synchronize your display with the most updated data. You can read more here.

The fun part of RQ is that it is so easy to include in your codebase. We will cover that part right away.

In our main.tsx, we will import 2 functions from react-query and initialize it. We do:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

We then create a client by doing

const queryClient = new QueryClient();

Then we wrap our root App component with the QueryClientProvider like this

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

Next, we go back into our App.tsx and import 2 things

import axios from "axios";
import { useQuery } from "@tanstack/react-query";

We then modify our getMovies function to be

const getMovies = async () => {
    return await axios.get(FeaturedApi).then((res) => res.data.results);
  };

We can now make use of useQuery as such

const { isLoading, data } = useQuery<Movies[]>({
    queryKey: ["movies", page],
    queryFn: getMovies,
  });

What this will do is cache each page with a unique key, in this case as movies-(page). E.g. When page is 1, the unique key is movies-1. This way, you won't have to refetch page 1 as its already cached. Its important to note that the default cache time is 5mins, meaning your data can persist for 5 minutes. However,this option can be changed.

Going forward, we can remove the loading state and the movie state in the previous App.tsx component.

In the jsx, we update the map section to be

{isLoading ? (
          <h1 className="loading">Loading...</h1>
        ) : (
          <>
            {(data ?? []).length > 0 &&
              (data ?? []).map((movie) => <Movie key={movie.id} {...movie} />)}
          </>
        )}

And there you have it. You can view the demo of what we've done here

Since I found React Query, it has been my go to data fetching package. There are many other things we can do with React Query, but we won't touch on those in this article.

If this was helpful, do leave a like and if there's any part not clear, do drop a comment and I will be so glad to help.

Cheers!!!

How to use EmailJS for a Contact Us page

Olufeyimi Samuel — Sun, 07 May 2023 20:16:46 +0000

I remember some time ago while working on a side project. I was to implement a simple contact us page as part of the project. Initially, I used Google Firebase to store the responses. Then, I found EmailJS and it was so simple to use and very efficient.

In this article, you will learn how to set up a EmailJS account and integrate it into your ReactJS/NextJS application.

First, let’s start by creating a new React Project using Vite.
Open your VSCode or any other code editor, open the terminal and type in:
yarn create vite or npm create vite@latest then follow the prompts. I will be using React with Typescript in this example.

You can checkout the official vite website for more information on Vite.

Next, let’s install some dependencies. In your terminal, type in yarn add @emailjs/browser react-hook-form. Then run yarn dev to start the project.
You can get more info on react-hook-form here

I will delete some default files in the directory and change some styles as seen below.

Next, in my App.tsx, I will put up a basic contact us form.



import styles from "./app.module.css";
import { useForm } from "react-hook-form";
import { useState } from "react";

interface IFormInput {
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  message: string;
}
function App() {
  const [loading, setLoading] = useState(false);

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<IFormInput>();
  const onSubmit = async (data: IFormInput) => {
    console.log(data);
  };

  return (
    <div className={styles.contact_form}>
      <h1>Contact Form</h1>
      <p>Our friendly team would love to hear from you.</p>

      <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
        <div className={styles.group}>
          <div className={styles.input_group}>
            <label htmlFor="firstName">First Name</label>
            <input
              type="text"
              {...register("firstName", { required: true })}
              placeholder="Enter your first name"
            />
            {errors.firstName && (
              <span className={styles.error}>This field is required</span>
            )}
          </div>
          <div className={styles.input_group}>
            <label htmlFor="lastName">Last Name</label>
            <input
              type="text"
              {...register("lastName", { required: true })}
              placeholder="Enter your last name"
            />
            {errors.lastName && (
              <span className={styles.error}>This field is required</span>
            )}
          </div>
        </div>
        <div className={styles.input_group}>
          <label htmlFor="email">Email Address</label>
          <input
            type="email"
            {...register("email", { required: true })}
            placeholder="Enter your email address"
          />
          {errors.email && (
            <span className={styles.error}>This field is required</span>
          )}
        </div>
        <div className={styles.input_group}>
          <label htmlFor="phone">Phone Number</label>
          <input
            type="tel"
            {...register("phone", { required: true })}
            placeholder="+2348123456789"
          />
          {errors.phone && (
            <span className={styles.error}>This field is required</span>
          )}
        </div>
        <div className={styles.input_group}>
          <label htmlFor="message">Message</label>
          <textarea
            {...register("message", { required: true })}
            placeholder="Leave us a message..."
          />
          {errors.message && (
            <span className={styles.error}>This field is required</span>
          )}
        </div>

        <button disabled={loading} className={styles.button} type="submit">
          {loading ? "Sending..." : "Send Message"}
        </button>
      </form>
    </div>
  );
}

export default App;

In the code snippet above, I’m using CSS module for my component alongside react-hook-form for my form validation. I declared a loading state set to false by default.

Next, I want to go to the official EmailJS website and signup for a free account. The signup is straightforward.

Next, I will sign in to my account and setup a new email service. For this example, we will use only Gmail. On your dashboard, select Add New Service and select Gmail. Then select Connect Service. This will take you to your Gmail account to link together with Emailjs. Once done, select Create Service.

Next, we need to create an Email Template. On your dashboard, select Email Templates and select Create New Template. For the free version, you can only create 2 Email Templates.

You can configure your Email Template as you want.

In the image above, template body corresponds with the payload I’m sending from my app. You should also specify the receiver email and you can add extra Bcc and CC.

Next, we need to get 3 important credentials. The service ID, the template ID and your public key.

To get the template ID, navigate to the settings tab of the template and you will find the template key. You can as well modify the template name here.

Next, go to the Email Services screen and you will find the service ID for the service we connected earlier.

Next, go to Account and under the General tab, you will find your public and private keys. We only need the public key.

Lastly, we go back to our code and update our onSubmit function and integrate emailjs into our code.
To do this, in your App.tsx, import emailjs from "@emailjs/browser";

Then modify your onSubmit function as follow:

Finally, your App.tsx should look like this:



import styles from "./app.module.css";
import { useForm } from "react-hook-form";
import { useState } from "react";
import emailjs from "@emailjs/browser";

interface IFormInput {
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  message: string;
}
function App() {
  const [loading, setLoading] = useState(false);

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<IFormInput>();
  const onSubmit = (data: IFormInput) => {
    setLoading(true);

    const templateParams = {
      ...data,
    };

    emailjs
      .send(
        "your_service_id",
        "your_template_id",
        templateParams,
        "your_public_key"
      )
      .then(() => {
        reset();
        setLoading(false);
        alert("One of our agents will contact you soon!");
      });
  };

  return (
    <div className={styles.contact_form}>
      <h1>Contact Form</h1>
      <p>Our friendly team would love to hear from you.</p>

      <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
        <div className={styles.group}>
          <div className={styles.input_group}>
            <label htmlFor="firstName">First Name</label>
            <input
              type="text"
              {...register("firstName", { required: true })}
              placeholder="Enter your first name"
            />
            {errors.firstName && (
              <span className={styles.error}>This field is required</span>
            )}
          </div>
          <div className={styles.input_group}>
            <label htmlFor="lastName">Last Name</label>
            <input
              type="text"
              {...register("lastName", { required: true })}
              placeholder="Enter your last name"
            />
            {errors.lastName && (
              <span className={styles.error}>This field is required</span>
            )}
          </div>
        </div>
        <div className={styles.input_group}>
          <label htmlFor="email">Email Address</label>
          <input
            type="email"
            {...register("email", { required: true })}
            placeholder="Enter your email address"
          />
          {errors.email && (
            <span className={styles.error}>This field is required</span>
          )}
        </div>
        <div className={styles.input_group}>
          <label htmlFor="phone">Phone Number</label>
          <input
            type="tel"
            {...register("phone", { required: true })}
            placeholder="+2348123456789"
          />
          {errors.phone && (
            <span className={styles.error}>This field is required</span>
          )}
        </div>
        <div className={styles.input_group}>
          <label htmlFor="message">Message</label>
          <textarea
            {...register("message", { required: true })}
            placeholder="Leave us a message..."
          />
          {errors.message && (
            <span className={styles.error}>This field is required</span>
          )}
        </div>

        <button disabled={loading} className={styles.button} type="submit">
          {loading ? "Sending..." : "Send Message"}
        </button>
      </form>
    </div>
  );
}

export default App;

And that is it. You can now get new contact us messages directly in the receiver email you specified.

Thank you for reading. If this was helpful, leave a like.