DEV Community: FORHAD

Using Redux Toolkit Query to Create an Authentication API with ``injectEndpoints``

FORHAD — Fri, 05 Jul 2024 01:41:25 +0000

When working with modern web applications, managing API calls efficiently is crucial. Redux Toolkit Query (RTK Query) simplifies this process by providing powerful tools to define and interact with your APIs. In this blog post, we will explore how to use RTK Query to create an authentication API, focusing on the injectEndpoints method. Additionally, we'll cover how to handle cookies for session management and provide a crucial tip about enabling CORS.

Setting Up Your Base API

First, let's set up your base API using RTK Query. This base API is where you will inject your endpoints.

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const baseApi = createApi({
  reducerPath: "baseApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "http://localhost:5000/api/v1",
    credentials: "include", // Ensure cookies are included in requests
  }),
  endpoints: () => ({}),
});

Injecting Endpoints

To manage authentication, we will inject an endpoint for the login function. This is done using the injectEndpoints method provided by RTK Query.

import { baseApi } from "../../api/baseApi";

const authApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    login: builder.mutation({
      query: (userInfo) => ({
        url: "/auth/login",
        method: "POST",
        body: userInfo,
      }),
    }),
  }),
});

export const { useLoginMutation } = authApi;

In this example:

We call injectEndpoints on our baseApi.
Inside injectEndpoints, we define our endpoints using a function that receives a builder object.
We use builder.mutation to define a login mutation. This mutation sends a POST request to the /auth/login endpoint with the user information as the body.

Using the Login Mutation in Your Component

With the endpoint defined, you can now use the useLoginMutation hook in your React components to perform login actions.

import React, { useState } from 'react';
import { useLoginMutation } from './path-to-your-api-file';

const Login = () => {
  const [login, { isLoading, isError, isSuccess, data }] = useLoginMutation();
  const [userInfo, setUserInfo] = useState({ username: '', password: '' });

  const handleLogin = async () => {
    try {
      await login(userInfo).unwrap();
      // handle successful login
    } catch (error) {
      // handle login error
    }
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Username"
        value={userInfo.username}
        onChange={(e) => setUserInfo({ ...userInfo, username: e.target.value })}
      />
      <input
        type="password"
        placeholder="Password"
        value={userInfo.password}
        onChange={(e) => setUserInfo({ ...userInfo, password: e.target.value })}
      />
      <button onClick={handleLogin} disabled={isLoading}>
        {isLoading ? 'Logging in...' : 'Login'}
      </button>
      {isError && <p>Error logging in</p>}
      {isSuccess && <p>Login successful</p>}
    </div>
  );
};

export default Login;

In this component:

We use the useLoginMutation hook to get the login function and its state.
We manage user input using useState.
When the login button is clicked, we call the login function with the user information.

Important Tip: Enable CORS on the Backend

One common mistake beginners make is forgetting to enable Cross-Origin Resource Sharing (CORS) on the backend. CORS is essential when your frontend and backend are hosted on different domains or ports. Without it, your frontend will not be able to communicate with your backend, leading to errors.

Example of Enabling CORS in Node.js with Express

To enable CORS in an Express application, you can use the cors middleware:

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

app.use(cors({
  origin: 'http://localhost:3000', // Adjust this to your frontend's URL
  credentials: true, // This allows cookies to be included in requests
}));

Make sure to adjust the origin to match your frontend's URL and set credentials to true to allow cookies.

Conclusion

RTK Query makes it straightforward to manage API calls in your Redux application. By using injectEndpoints, you can easily define and use endpoints for various API operations, including authentication. Handling cookies during the login process ensures secure and persistent sessions, enhancing user experience. Remember to enable CORS on your backend to avoid common issues with cross-origin requests.

This blog post provides a quick overview of setting up an authentication API using RTK Query, handling cookies for session management, and the importance of enabling CORS. For more advanced use cases and configurations, refer to the Redux Toolkit Query documentation.

How to Initialize a Git Repository and Create a GitHub Repository Using the GitHub CLI

FORHAD — Tue, 02 Jul 2024 10:03:34 +0000

Setting up version control for your project is essential. This guide will help you initialize a Git repository locally and create a corresponding repository on GitHub using the GitHub Command Line Interface (CLI).

Step 1: Initialize a Git Repository

Open your terminal.
Navigate to your project directory.
Run the following command to initialize a Git repository:

   git init

Step 2: Install and Authenticate GitHub CLI

Install the GitHub CLI from GitHub CLI website.
If you are not logged in, authenticate the CLI with your GitHub account by running:

   gh auth login

Step 3: Create a Repository on GitHub

For a public repository, run:

   gh repo create <repository-name>

For a private repository, run:

   gh repo create <repository-name> --private

Replace <repository-name> with your desired repository name.

Step 4: Add Files and Make Initial Commit

Add your files and make an initial commit:

   git add .
   git commit -m "Initial commit"

Step 5: Push Your Local Repository to GitHub

Add the GitHub repository as a remote:

   git remote add origin https://github.com/your-username/<repository-name>.git

Replace your-username with your GitHub username and <repository-name> with the name of your repository.

Push your local commits:

   git push -u origin main

Bonus Features

1. Show Remote URL:

To check the remote URL of your repository:

git remote -v

2. Change Remote URL:

If you need to change the remote URL, use:

git remote set-url origin https://github.com/your-username/<new-repository-name>.git

Replace <new-repository-name> with your new repository name.

3. Rename a Branch:

By default, Git creates a branch named main. To rename the branch:

git branch -M new-branch-name

Replace new-branch-name with your desired branch name.

4. List All Branches:

To see a list of all branches in your repository:

git branch

5. Switch to a Different Branch:

To switch to a different branch:

git checkout branch-name

Replace branch-name with the name of the branch you want to switch to.

6. Create and Switch to a New Branch:

To create a new branch and switch to it immediately:

git checkout -b new-branch-name

7. View Commit History:

To view the commit history:

git log

8. Stash Changes:

If you need to switch branches but have uncommitted changes, you can stash them:

git stash

This command temporarily saves your changes. To apply the stashed changes later, use:

git stash apply

9. Check Repository Status:

To see the current status of your repository, including changes to be committed and untracked files:

git status

Conclusion

By following these steps and utilizing the bonus features, you can efficiently set up a Git repository locally and on GitHub, manage remote URLs, handle branches, stash changes, and keep track of your repository status. These practices will enable smooth version control and collaboration for your project, making it easier to manage and track your work. Happy coding!

Simplifying State Management and Data Fetching in React with Redux Toolkit Query

FORHAD — Mon, 01 Jul 2024 03:47:15 +0000

Efficient Data Fetching and Cache Management with RTK Query: A Comprehensive Guide

Managing state and data fetching in React can be challenging. Redux Toolkit Query (RTK Query) simplifies this process. In this post, we'll explore the useGetTodosQuery hook and its options, including polling and tagTypes.

Key Points for Using Options

pollingInterval: Use when you need to keep data updated at regular intervals.
refetchOnMountOrArgChange: Use when you need to refetch data upon component mount or when query arguments change.
refetchOnReconnect: Use when you want data to refresh after regaining network connectivity.
refetchOnFocus: Use when you need data to refresh when the browser window regains focus.
skip: Use to conditionally skip a query.
tagTypes: Use for more efficient data fetching and cache management.

What is Redux Toolkit Query?

RTK Query is a data fetching and caching tool built on top of Redux Toolkit. It helps manage API requests, caching, and state synchronization with your Redux store.

Setting Up RTK Query

Step 1: Install Redux Toolkit

npm install @reduxjs/toolkit react-redux

Step 2: Create an API Slice

Create an apiSlice.js file:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Todo'],
  endpoints: (builder) => ({
    getTodos: builder.query({
      query: () => 'todos',
      providesTags: ['Todo'],
    }),
    updateTodo: builder.mutation({
      query: (todo) => ({
        url: `todos/${todo.id}`,
        method: 'PUT',
        body: todo,
      }),
      invalidatesTags: ['Todo'],
    }),
  }),
});

export const { useGetTodosQuery, useUpdateTodoMutation } = apiSlice;

Step 3: Configure the Store

import { configureStore } from '@reduxjs/toolkit';
import { apiSlice } from './apiSlice';

const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
});

export default store;

Step 4: Provide the Store

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Using `useGetTodosQuery` with Options

Efficient Data Fetching with `tagTypes`

Using pollingInterval can lead to unnecessary API calls, especially when data doesn't change frequently. A more efficient approach is to use tagTypes and invalidating tags to refetch data only when necessary. This approach ensures the UI stays in sync without constant polling.

Example Usage

Here’s how to use useGetTodosQuery and useUpdateTodoMutation in a React component:

import React from 'react';
import { useGetTodosQuery, useUpdateTodoMutation } from './apiSlice';

const TodoList = () => {
  const { data: todos, isLoading, isError } = useGetTodosQuery();
  const [updateTodo] = useUpdateTodoMutation();

  const handleUpdate = async (todo) => {
    await updateTodo({ ...todo, completed: !todo.completed });
  };

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error loading todos</div>;

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.title}
          <button onClick={() => handleUpdate(todo)}>
            {todo.completed ? 'Mark Incomplete' : 'Mark Complete'}
          </button>
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

Complete Example with Options

Here’s a complete example using useGetTodosQuery with various options:

import React from 'react';
import { useGetTodosQuery } from './apiSlice';

const TodoList = () => {
  const { data: todos, isLoading, isError } = useGetTodosQuery(undefined, {
    refetchOnMountOrArgChange: true,
    refetchOnReconnect: true,
    refetchOnFocus: true,
    skip: false,
  });

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error loading todos</div>;

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

export default TodoList;

Polling Intervals vs. Tag Types

When to Use Polling Intervals

Polling intervals are useful when data changes frequently and needs to be updated in real-time. For example:

Live sports scores
Stock market data
Real-time chat messages

When to Use `tagTypes`

tagTypes are better suited for scenarios where data changes infrequently or when you want to minimize API calls. For example:

User profile information
Product details in an e-commerce app
Todo lists where updates are user-driven

Using tagTypes with invalidation tags ensures data is refetched only when necessary, reducing unnecessary network traffic and improving performance.

Conclusion

RTK Query makes data fetching in React applications simple and efficient. While polling is useful for frequently updated data, using tagTypes and invalidating tags is a better approach for efficient data fetching and cache management. This method ensures your UI stays up-to-date without unnecessary API calls. Happy coding!

How to Set Up ESLint and Prettier in a TypeScript Project

FORHAD — Fri, 28 Jun 2024 02:21:50 +0000

Setting up ESLint and Prettier in a TypeScript project can greatly enhance your development experience by automatically detecting and fixing various types of errors, ensuring a consistent code style, and reducing the likelihood of bugs. Here's a step-by-step guide to help you get started.

Step 1: Initialize Your Project

First, create a new project directory and initialize it with npm:

mkdir my-project
cd my-project
npm init -y

Step 2: Install Necessary Packages

Install the required dependencies. Some of these will be development dependencies (i.e., they are only needed during development):

npm install express mongoose cors dotenv --save
npm install typescript @types/node @types/express --save-dev
npm install -D nodemon ts-node-dev eslint @eslint/js @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier

Step 3: Set Up Your Project Structure

Create the following folder structure:

my-project
│   .env
│   .gitignore
│   eslint.config.mjs
│   tsconfig.json
├───dist
├───src
│   │   app.ts
│   │   server.ts
│   └───config
│           index.ts

Step 4: Configure TypeScript

Generate a TypeScript configuration file and modify it:

tsc --init

Update the tsconfig.json file with the following content:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

Step 5: Configure ESLint

Create an ESLint configuration file eslint.config.mjs and add the following content:

import eslint from "@eslint/js";
import tseslint from "@typescript-eslint/eslint-plugin";

export default {
  root: true,
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  rules: {
    "no-unused-vars": "error",
    "no-undef": "error",
    "prefer-const": "error",
    "no-console": "warn"
  },
  ignorePatterns: ["dist", "node_modules"]
};

Step 6: Set Up Prettier

Install Prettier:

npm install --save-dev prettier

Create a Prettier configuration file .prettierrc (optional, but recommended for customization):

{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true
}

Step 7: Update `package.json` Scripts

Add scripts to your package.json to automate tasks:

"main": "./dist/server.js",
"scripts": {
  "build": "tsc",
  "start:prod": "node ./dist/server.js",
  "start:dev": "ts-node-dev --respawn --transpile-only ./src/server.ts",
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  "prettier": "prettier --ignore-path .gitignore --write \"./src/**/*.+(js|ts|json)\"",
  "prettier:fix": "prettier --write src"
}

Step 8: Sample Files

app.ts

import express, { Request, Response } from 'express';

const app = express();

app.use(express.json());

app.get('/', (req: Request, res: Response) => {
  res.send('Hello from setup file');
});

export default app;

server.ts

import mongoose from 'mongoose';
import app from './app';
import config from './config';

async function main() {
  try {
    await mongoose.connect(config.db_url as string);
    app.listen(config.port, () => {
      console.log(`Example app listening on port ${config.port}`);
    });
  } catch (err) {
    console.log(err);
  }
}

main();

index.ts

import dotenv from 'dotenv';
dotenv.config();

export default {
  port: process.env.PORT,
  db_url: process.env.DB_URL,
};

.env

PORT=5000
DB_URL=your_mongodb_connection_string

.gitignore

node_modules
.env
dist

Step 9: Running Your Scripts

Use the following commands to run your scripts:

npm run build           # Build the project before deployment
npm run start:prod      # Start the server for production
npm run start:dev       # Start the server for development
npm run lint            # Find ESLint errors
npm run lint:fix        # Fix ESLint errors
npm run prettier        # Find Prettier format errors
npm run prettier:fix    # Fix Prettier format errors

By following these steps, you will have a fully set up TypeScript project with ESLint and Prettier, ensuring a smooth development experience with consistent code quality and style.

DEV Community: FORHAD

Using Redux Toolkit Query to Create an Authentication API with ``injectEndpoints``

Setting Up Your Base API

Injecting Endpoints

Using the Login Mutation in Your Component

Important Tip: Enable CORS on the Backend

Example of Enabling CORS in Node.js with Express

Conclusion

How to Initialize a Git Repository and Create a GitHub Repository Using the GitHub CLI

Step 1: Initialize a Git Repository

Step 2: Install and Authenticate GitHub CLI

Step 3: Create a Repository on GitHub

Step 4: Add Files and Make Initial Commit

Step 5: Push Your Local Repository to GitHub

Bonus Features

Conclusion

Simplifying State Management and Data Fetching in React with Redux Toolkit Query

Efficient Data Fetching and Cache Management with RTK Query: A Comprehensive Guide

Key Points for Using Options

What is Redux Toolkit Query?

Setting Up RTK Query

Step 1: Install Redux Toolkit

Step 2: Create an API Slice

Step 3: Configure the Store

Step 4: Provide the Store

Using useGetTodosQuery with Options

Efficient Data Fetching with tagTypes

Example Usage

Complete Example with Options

Polling Intervals vs. Tag Types

When to Use Polling Intervals

When to Use tagTypes

Conclusion

How to Set Up ESLint and Prettier in a TypeScript Project

Step 1: Initialize Your Project

Step 2: Install Necessary Packages

Step 3: Set Up Your Project Structure

Step 4: Configure TypeScript

Step 5: Configure ESLint

Step 6: Set Up Prettier

Step 7: Update package.json Scripts

Step 8: Sample Files

Step 9: Running Your Scripts

Using `useGetTodosQuery` with Options

Efficient Data Fetching with `tagTypes`

When to Use `tagTypes`

Step 7: Update `package.json` Scripts