DEV Community: CHIMDI

Beginners guide to react query

CHIMDI — Thu, 29 Jun 2023 13:34:16 +0000

This is you building the frontend of your million-dollar app: Fetch data from APIs, store resulting data in state, create a loading state, access data in multiple components, access loading state, update state after editing data on the backend, optimise API calls, etc. These and many more are the issues that many developers face when building their frontend apps. As developers, we almost always fetch data from APIs, handle state management, and optimise performance. These tasks can be a pain in the a** even for the smallest applications but I bring good news: React Query. React Query is a tool that was built to make the tasks listed earlier seem like a walk in the park.

On their website, they describe it as “the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronising and updating server state in your React applications a breeze.” In this article, I will be introducing you to react query and showing you how you can use it to make your life as a developer not as bad as it already is (that was a joke lol).

Prerequisites

To follow along with this article, it is expected that you have :

Basic react knowledge

Getting Started

In order to learn how react query works, we’re going to be building the classic todo app.

Let’s begin by initialising a new react app using vite. Open a new terminal session and run the following command:

yarn create vite todo-query --template react

I named my project todo-query, you can use whatever name you want.

Run the following set of commands to install the required dependencies and start the development server:

cd todo-query
yarn
yarn dev

After running these, you should have a project looking like this:

Now let’s install react-query using this command:

yarn add react-query

After installing these dependencies, proceed to open the project in any IDE of your choice. I will be using VSCode.

Navigate to the main.jsx file in your code editor and replace it with the following code:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import {
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";

// Create a client
const queryClient = new QueryClient();

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

In the piece of code above, we are importing the query client and query client provider, instantiating a new query client, and using the query client provider to make the query client accessible all through our app. (Think of it like providing a react context to your app with a context provider).

We now have a query client provided all through our app and can begin to use react query for our data fetching and caching needs.

Queries

Next, we want to fetch a list of todos and display them to the user when our app loads.
To do this, we make use of the useQuery hook. The useQuery hook accepts different parameters, but fundamentally, we want to pass it two important parameters:

queryKey: This is a unique string that will be used to “identify” your query. It is used by react query to manage the caching of your queries. It can be a string, an array of strings, or a nested object.
queryFunction: This is the function that the query would use to fetch data; it should return a promise.

Delete everything in index.css.

In the app.jsx file, write the following:

import { useQuery } from "react-query";

function App() {
  let getTodos = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos”);
    return response.json();
  };
  const { data } = useQuery("todos", getTodos);

  console.log(data)

  return (
    <>
      <h3>Awesome Todo</h3>
    </>
  );
}

export default App;

Let’s go through the code above.

import { useQuery } from "react-query";

We’re importing the necessary dependency which is react query.

let getTodos = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos);
    return response.json();
  };

We create a getTodos function that uses the fetch API to get fetch a list of todos from a third-party API.

const { data } = useQuery("todos", getTodos);
console.log(data)

We use react query here to make a query with the queryKey being "todos" and the query function being getTodos after which we log the results to the console.

If you have been following up to this point and you open up your console, you should see a JSON object that contains a list of todo items.

The next thing we want to do is display these todo items on the screen.
Replace your code with the code below, changing only what’s necessary.

import { useQuery } from "react-query";

function App() {
  let getTodos = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos");
    return response.json();
  };
  const { data, isLoading, isError } = useQuery("todos", getTodos);

  console.log(data);

  return (
    <>
      <h3>Awesome Todo</h3>
      {isError && <p>An Unexpected error has occured</p>}
      {isLoading && <p>Loading Todos</p>}
      {!isLoading &&
        data.map((todo) => (
          <div
            key={todo.id}
            style={{
              borderBottom: `1px solid gray`,
              color: `${todo.completed ? "green" : "red"}`,
            }}
          >
            <p>User:{todo.userId}</p>
            <p>Title:{todo.title}</p>
          </div>
        ))}
    </>
  );
}

Let’s go through the parts of the code that have changed.

const { data, isLoading, isError } = useQuery("todos", getTodos);

Here, in addition to extracting the data from the query, we can also extract the isLoading and isError states, which tell us if the query is still loading and if an error occurred respectively. Without react query, we would have had to manually create and manage these states but react query does this for us effortlessly.

return (
    <>
      <h3>Awesome Todo</h3>
      {isError && <p>An Unexpected error has occured</p>}
      {isLoading && <p>Loading Todos</p>}
      {!isLoading &&
        data.map((todo) => (
          <div
            key={todo.id}
            style={{
              borderBottom: `1px solid gray`,
              color: `${todo.completed ? "green" : "red"}`,
            }}
          >
            <p>User:{todo.userId}</p>
            <p>Title:{todo.title}</p>
          </div>
        ))}
    </>
  );

Here we are returning the jsx, where we display an error message or a loading message depending on their states, or we loop over the todo data and display them on the screen.
Now we should have something that looks like this; forgive the poor UI.

From the above, we can see how we got the loading state, error state, and data in just one line of code. How awesome is that?

React query allows us to do multiple other things, such as:

Deduping requests
Paginating queries
Auto-refetching / polling
Caching, and a lot more

Mutations

We now know how to get data from our server using react query; the next thing we’ll learn to do is to make changes/updates to our server state. In react query terminology, these are called mutations. We can read our list of todos, next thing we want to do is add a new todo item to our list of todos. To do this, we’ll make use of the useMutation hook, and our code will look like the one below:

import { useQuery, useMutation } from "react-query";

function App() {
  let getTodos = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos");
    return response.json();
  };
  const { data, isLoading, isError } = useQuery("todos", getTodos);

  let addTodo = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos", {
      method: "POST",
      body: JSON.stringify({
        title: "fodddddo",
        completed: "false",
        id: 1,
        userId: 1,
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8",
      },
    });
    return response.json();
  };
  const { mutate } = useMutation(addTodo, {
    onSuccess: (res) => {
      console.log(res);
    },
    onError: (error) => {
      console.log(error);
    },
  });

  return (
    <>
      <h3>Awesome Todo</h3>
      <button onClick={() => mutate()}>Add Todo</button>
      {isError && <p>An Unexpected error has occured</p>}
      {isLoading && <p>Loading Todos</p>}
      {!isLoading &&
        data.map((todo) => (
          <div
            key={todo.id}
            style={{
              borderBottom: `1px solid gray`,
              color: `${todo.completed ? "green" : "red"}`,
            }}
          >
            <p>User:{todo.userId}</p>
            <p>Title:{todo.title}</p>
          </div>
        ))}
    </>
  );
}

export default App;

Let’s go through the changes in the project.

 let addTodo = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos", {
      method: "POST",
      body: JSON.stringify({
        title: "fodddddo",
        completed: "false",
        id: 1,
        userId: 1,
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8",
      },
    });
    return response.json();
  };

In this block of code, we are creating our mutation function that is passed to the useMutation hook. The function should perform an asynchronous task and return a promise.

const { mutate ,isLoading: addingTodo } = useMutation(addTodo, {
    onSuccess: (res) => {
      console.log(res);
    },
    onError: (error) => {
      console.log(error);
    },
  });

Now, this is where we use our useMutation hook and destructure the mutate function and the isLoading function (we rename it to addingTodo because we’ve used isLoading before) from it. We also pass in an onSuccess and onError function to it so we can perform actions depending on what happens after the mutation. Because we aren’t using our own API, we will just be logging the results to the console for now, but in the onSuccess function for example, you’ll want to do something like invalidate the todos query so that react query can fetch the new list of todos with our updated todo and in the onError function, we can alert the user that an error occurred.

<button disabled={addingTodo} onClick={() => mutate()}>Add Todo</button>

In the above code, we simply pass a function that calls our mutation function into the onClick handler of our button, and we set the disabled value of our button to be equal to the value of addingTodo (i.e isLoading).

See how simple react-query makes fetching and changing server state look. We would have had to use different data states and loading states and also add side effects for when we change data on the server, but react-query allows us to handle all of this elegantly.

React Query Devtools

React query also has a devtool!! To add it to your project, replace your main.jsx with the code below

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

// Create a client
const queryClient = new QueryClient();

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

We import the ReactQueryDevtools and use it in our project. If you go back to your project you should see an icon in the bottom left corner.

If you click on it, you will see the dev tools panel

The devtools will help you picture your apps cache and everything that’s going on as far as react-query is concerned. It can be a very useful tool when debugging.

Conclusion

And that’s a wrap!! We just just went through using react query to make our interactions with our server state easier and smoother but there’s a whole lot more we can do with react query. This is just a tip of the iceberg with react query you can do a whole lot more ad I invite you to check out what you can do by taking a look at their documentation.

Creating Multilingual React Apps with i18n: A Step-by-Step Guide to Internationalisation

CHIMDI — Tue, 11 Apr 2023 10:42:59 +0000

With over 20 languages having more than 80 million speakers, if you are building software or a website for the global market and want it to be widely accepted, giving the users an opportunity to use the product in their native language would definitely lead to a better user experience. I18next is an internationalisation framework that can help with internationalising/localising your app.

What is internationalisation?

Internationalisation is a way of preparing and writing your apps so that they can be adapted to support certain local languages, cultures and regions. It enables localisation which is the adaptation of a product, application or document content to meet the language, cultural and other requirements of a specific target market (a locale). (https://www.w3.org/International/questions/qa-i18n)

In this article, we will go over how to perform internationalisation in our react app using the i18next framework.
I18next is an internationalisation framework written in JavaScript. It comes with everything you need to localise your web, desktop or mobile product such as user language detection, loading and caching translations, and file conversion etc More features can be found in their documentation. (https://www.i18next.com/)

Now let us proceed to use i18n in our react application.

Step1 - Initialise the Project

First let us create our React project using Vite. Open your terminal and run the following command to create a new react project using Vite.



yarn create vite my-i18n-app --template react

Change your current directory to that of the new project using



cd my-i18n-app

Proceed to open the newly created project in any code editor of your choice.

Step2 - Install dependencies

Add i18next to the project using the command below



yarn add i18next react-i18next

Start the react project to make sure that everything is working fine



yarn run dev

You should have the above when you navigate to your projects url.

Step3 - Change App content

Lets go ahead and replace the entire app.jsx with the following code:



import './App.css'

function App() {
  return (
    <div className="App">
      <h1>Welcome to my i18n project</h1>
      <h1>How is your day going?</h1>

    </div>
  )
}

export default App

Now our project should look like this:

Step4 - Add Translations

In order to maintain organisation in our code, let’s create translation files for each language in a translation folder. Our project will now have the following structure:

Now, add language jsons to the translation files.
For English.json:



{
    "line1":"Welcome to my i18n project",
    "line2":"How is your day going?"
}

For Italian.json:



{
    "line1":"Benvenuti nel mio progetto i18n",
    "line2":"Come sta andando la tua giornata?"
}

Step4 - Add i18next

Now let’s import i18next into our project and configure it.
In the root of the project, create an i18next.jsx file and write the following code:



import i18next from "i18next";
import { initReactI18next } from "react-i18next";

//Import all translation files
import English from "./Translation/English.json";
import Italian from "./Translation/Italian.json";

const resources = {
    en: {
        translation: English,
    },
    it: {
        translation: Italian,
    },
}

i18next.use(initReactI18next)
.init({
  resources,
  lng:"en", //default language
});

export default i18next;

In the code above, we are setting up and initialising i18n in our project. We provide the sources of the translations and also set english as the default language. Note that the ISO 639–1 standard language codes should be used when identifying/choosing languages.

Next, we import this i18n.jsx file inside our main.jsx file to connect it with our react app, It should look like this now:



import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

import './i18n'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Step5 - Create context for languages

Next step is to create a language context that we will use to provide our i18n functionality all through our app.

Create a new folder and a languageContext.jsx file in it, put the following code in the file:



import React, {
  createContext,
  useContext,
} from "react";
import { useTranslation } from "react-i18next";


export const LanguageContext = createContext(undefined);

export const LanguageContextProvider = ({ children }) => {
  const languages = {
    en: { nativeName: "English" },
    It: { nativeName: “Italian” },
  };
  const { t, i18n } = useTranslation();

  const onClickLanguageChange = (e) => {
    const language = e.target.value;
    i18n.changeLanguage(language); //change the language
  };

  return (
    <LanguageContext.Provider
      value={{ t, i18n, onClickLanguageChange, languages }}
    >
      {children}
    </LanguageContext.Provider>
  );
};

export const useLanguageContext = () => useContext(LanguageContext);

Let’s go through the code above



import React, {
  createContext,
  useContext,
} from "react";
import { useTranslation } from "react-i18next";

Here we import the necessary dependencies, createContext and useContext are used for context while the useTranslation is a hook from react-18next which provides us with the t function used to translate text in our app and the i8n instance that will be used to change language.



export const LanguageContext = createContext(undefined);

This line creates the language context



const languages = {
    en: { nativeName: "English" },
    It: { nativeName: “Italian” },
  };

Here we are creating a languages object containing our supported languages, it will be used in our languageSelect component.



const { t, i18n } = useTranslation();

Extracting t function and i18n instance with object destructuring



const onClickLanguageChange = (e) => {
    const language = e.target.value;
    i18n.changeLanguage(language); //change the language
  };

We create an Event handler to change the current language.



return (
    <LanguageContext.Provider
      value={{ t, i18n, onClickLanguageChange, languages }}
    >
      {children}
    </LanguageContext.Provider>)

Returning the language context provider and passing the necessary values

Now, go ahead and wrap the entire app with the language context provider in main.jsx



import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { LanguageContextProvider } from "./context/LanguageContext";

import "./i18n";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <LanguageContextProvider>
      <App />
    </LanguageContextProvider>
  </React.StrictMode>
);

Let’s check that this is working by using it in the app.jsx file



import "./App.css";

import { useLanguageContext } from "./context/LanguageContext";
function App() {
  const { t } = useLanguageContext();
  return (
    <div className="App">
      <h1>{t("line1")}</h1>
      <h1>{t("line2")}</h1>
    </div>
  );
}

export default App;

If you followed all the steps, there should be no change in the UI and this means that everything is working perfectly.

Finally, let us create a LanguageSelect component that we can use to switch between languages.

Create a LanguageSelect.jsx file and add the following code to it.



import { useLanguageContext } from "./context/LanguageContext";
const LanguageSelect = () => {
  const { languages, onClickLanguageChange } = useLanguageContext();
  return (
    <select
      style={{
        width: 200,
        position: "absolute",
        top: 10,
        left: 10,
        height: "40px",
      }}
      onChange={onClickLanguageChange}
    >
      {Object.keys(languages).map((lng) => (
        <option key={languages[lng].nativeName} value={lng}>
          {languages[lng].nativeName}
        </option>
      ))}
    </select>
  );
};

export default LanguageSelect;

In the code above we are getting the languages from the language context and mapping over them to create a select component that will trigger the onClickLanguageChange when its current value is changed.

Go ahead and include the LanguageSelect component in our main.js file so it’s available throughout our app



import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { LanguageContextProvider } from "./context/LanguageContext";

import "./i18n";
import LanguageSelect from "./LanguageSelect";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <LanguageContextProvider>
      <LanguageSelect/>
      <App />
    </LanguageContextProvider>
  </React.StrictMode>
);

Now our project should look like this

There you have it! You have successfully added internationalisation (i18n) functionality to your React app using i18next. Your app is now able to display text in different languages based on the user's preference.

By following the steps outlined in this tutorial, you have learned how to:

Install and configure i18next in a React app
Create translation files for multiple languages
Use the useTranslation hook to translate text in your app
Create a language context to provide i18n functionality throughout your app
Use the LanguageContextProvider to wrap your app with the language context
Create a LanguageSelect component to allow users to switch between languages

Remember that i18n is an ongoing process, and there may be more text that needs to be translated as your app grows. With i18next, you can easily add new translations and update existing ones as needed.

Thanks for following along, and happy internationalisation!

Setting Up a Vanilla TypeScript Project

CHIMDI — Thu, 23 Mar 2023 11:52:26 +0000

So you've just finished your JavaScript tutorial, and now you're hearing that there's a better way to write JavaScript - TypeScript. Depending on your previous programming experience, you may or may not be familiar with typing and type safety, which is what TypeScript adds to the already awesome JavaScript. TypeScript makes writing JavaScript easier and prevents a lot of common and unnecessary errors. In this article, you'll learn how to set up a vanilla TypeScript project.

Prerequisites

Before you proceed with this article, the following are assumed:

You know JavaScript (obviously lol)
The latest version of Node.js is installed on your system.
You are familiar with npm.

Step 1 - Initialise the TypeScript Project

First, you have to create a directory for your new project. Open the command line and type the following commands:

mkdir my-awesome-typescript-project
cd my-awesome-typescript-project

Once you're in the new directory, go ahead and install TypeScript:

npm i typescript --save-dev

The --save-dev flag saves TypeScript as a devDependency, so you know that TypeScript is needed for development.

After TypeScript is installed, initialise the project by using the following command:

npx tsc --init

The command above uses npx (a tool that allows you to execute any JavaScript package available on the NPM registry without even installing it) to run the command that initializes a TypeScript project.

Running this command creates a new tsconfig.json file, which defines how TypeScript and the tsc compiler should interact (what JavaScript version to produce, what files to compile, what directory to compile files to, amongst others). You can learn more about the tsconfig.json file in the official TypeScript handbook.

Go ahead and open the tsconfig.json file in any code editor of your choice. When you open it, you will notice a lot of defaults (mostly commented out), which may be overwhelming. But with time, you'll get to know which ones to modify to suit your use case.

Replace the entire tsconfig.json file with the following:

{
  "compilerOptions": {
    "lib": ["ES2015”],
    "module": "commonjs",
    "outDir": "dist",
    "strict": true,
    "target": "ES2015”,
  }
  "include": ["src"]
}

The above configuration specifies the following:

Lib: Specify which APIs TSC should assume exists in the target runtime environment
Module: Specify the module system tic should use to compile your code (commonJS,ES2015 etc)
OutDir: Specify an output folder for all emitted files.
Strict: Enable all strict type-checking options.
Target: Set the JavaScript language version for emitted JavaScript and include compatible library declarations.
Include: Specify which folders TSC should look in to find your TypeScript files

Once that is done, proceed to coding and compiling your typescript app

Step 2 - Code and compile your typescript project

Now that you have successfully setup your typescript project, the next step is to write your code and compile it.

From the tsconfig.json file above, we told the typescript compiler to compile code from the src folder so let us go ahead and create our first typescript file.
In our projects directory, let’s create a new src directory where all our typescript files will be written and Lets go into the directory

mkdir src
cd src

Create a typescript file

Touch index.ts

Now open the newly created file in your preferred code editor and add the following code

let isWorldSaved: boolean = false;

export function saveTheWorld(): string {
  if (isWorldSaved) {
    return `Too late, world has already been saved`;
  } else {
    isWorldSaved = true;
    return `Hurray, you just saved the world`;
  }
}

Once you’ve written this typescript code, go ahead and run the typescript compiler

npx tsc

Once you run this, you’d notice that a new index.js file will be added to the dist folder just like we want and it should look like this

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.saveTheWorld = void 0;
let isWorldSaved = false;
function saveTheWorld() {
    if (isWorldSaved) {
        return `Too late, world has already been saved`;
    }
    else {
        isWorldSaved = true;
        return `Hurray, you just saved the world`;
    }
}
exports.saveTheWorld = saveTheWorld;

You can also run the typescript compiler in watch mode so you don’t have to run the npx tsc command each time you make a change. Do this by running the following command

npx tsc -w

That’s it!! You’ve learnt how to setup and run your typescript project and now you can use typescript to avoid all the surprises and headache that comes with writing vanilla javascript. You can use this project to practice and learn more about typescript