Shopping Basket Query And Mutation Hooks And State Management

May 2, 2025 by ADMIN 62 views

===========================================================

Introduction

In e-commerce applications, managing the shopping basket is a crucial aspect of providing a seamless user experience. A well-designed shopping basket system should allow users to easily add and remove products, update quantities, and clear their basket. In this article, we will explore how to implement shopping basket functionality using React hooks and context, with a focus on query and mutation hooks and state management.

Implementing Basket Hooks and Context

To implement the shopping basket functionality, we will use React hooks and context to manage the state of the basket. We will also utilize the @tanstack/react-query library as our state store. This library provides a simple and efficient way to manage data fetching and caching in our application.

Getting Started with React Query

Before we dive into implementing the shopping basket functionality, let's take a look at how to get started with React Query. We will create a new React Query client instance and use it to fetch data from our API.

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* Our application components here */}
    </QueryClientProvider>
  );
}

Implementing the Shopping Basket Context

Next, we will create a new context for our shopping basket. This context will hold the state of the basket and provide methods for adding, removing, and clearing products.

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

const BasketContext = createContext();

const BasketProvider = ({ children }) => {
  const [basket, setBasket] = useState(() => {
    const storedBasket = localStorage.getItem('basket');
    return storedBasket ? JSON.parse(storedBasket) : [];
  });

  useEffect(() => {
    localStorage.setItem('basket', JSON.stringify(basket));
  }, [basket]);

  const addProduct = (product, amount) => {
    const existingProduct = basket.find((item) => item.id === product.id);
    if (existingProduct) {
      existingProduct.amount += amount;
    } else {
      setBasket([...basket, { id: product.id, amount }]);
    }
  };

  const removeProduct = (productId, amount) => {
    setBasket(
      basket.map((item) =>
        item.id === productId ? { ...item, amount: item.amount - amount } : item
      ).filter((item) => item.amount > 0)
    );
  };

  const clearBasket = () => {
    setBasket([]);
  };

  return (
    <BasketContext.Provider value={{ basket, addProduct, removeProduct, clearBasket }}>
      {children}
    </BasketContext.Provider>
  );
};

Using the Shopping Basket Context

Now that we have implemented the shopping basket context, let's use it in our application. We will create a new component that displays the basket and allows users to add and remove products.

import React from 'react';
import { useContext } from 'react';
import { BasketContext } from './BasketProvider';

const Basket = () => {
  const { basket, addProduct, removeProduct, clearBasket } = useContext(BasketContext);

  return (
    <div>
      <h2>Shopping Basket</h2>
      <ul>
        {basket.map((item) => (
          <li key={item.id}>
            {item.amount} x {item.name}
            <button onClick={() => removeProduct(item.id, 1)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={clearBasket}>Clear Basket</button>
    </div>
  );
};

Adding Products to the Basket

To add products to the basket, we will create a new component that allows users to select products and add them to the basket.

import React from 'react';
import { useContext } from 'react';
import { BasketContext } from './BasketProvider';

const ProductList = () => {
  const { addProduct } = useContext(BasketContext);

  const products = [
    { id: 1, name: 'Product 1', price: 10.99 },
    { id: 2, name: 'Product 2', price: 9.99 },
    { id: 3, name: 'Product 3', price: 12.99 },
  ];

  return (
    <div>
      <h2>Product List</h2>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.name} ({product.price})
            <button onClick={() => addProduct(product, 1)}>Add to Basket</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

Conclusion

In this article, we have implemented a shopping basket system using React hooks and context, with a focus on query and mutation hooks and state management. We have used the @tanstack/react-query library as our state store and implemented a context for our shopping basket. We have also created components for displaying the basket, adding products to the basket, and removing products from the basket. This implementation provides a solid foundation for building a robust and scalable e-commerce application.

Future Improvements

There are several areas where we can improve our implementation:

Error Handling: We have not implemented error handling for cases where the basket is not loaded from local storage or when the API request fails.
Product Variants: We have not implemented support for product variants, which can be added to the basket separately.
Basket Totals: We have not implemented basket totals, which can be calculated based on the products in the basket.
Payment Gateway Integration: We have not integrated a payment gateway, which is necessary for processing payments.

By addressing these areas, we can improve the robustness and scalability of our shopping basket system.

References

Code

The complete code for this implementation can be found in the following repository:

Shopping Basket Implementation

Note: Replace your-username with your actual GitHub username.

===========================================================

Introduction

In our previous article, we implemented a shopping basket system using React hooks and context, with a focus on query and mutation hooks and state management. In this article, we will answer some frequently asked questions about the implementation.

Q&A

Q: What is the purpose of using React Query in this implementation?

A: React Query is a library that provides a simple and efficient way to manage data fetching and caching in our application. In this implementation, we use React Query to fetch the basket data from local storage and to cache the basket data in memory.

Q: Why did we choose to use local storage to store the basket data?

A: We chose to use local storage to store the basket data because it provides a simple way to persist the basket data even when the browser window closes. This is particularly useful in e-commerce applications where users may want to continue shopping across multiple sessions.

Q: How do we handle errors in this implementation?

A: We have not implemented error handling in this implementation. However, we can add error handling by using the try-catch block to catch any errors that may occur when fetching the basket data from local storage or when adding or removing products from the basket.

Q: Can we use a different state management library instead of React Query?

A: Yes, we can use a different state management library instead of React Query. However, React Query provides a simple and efficient way to manage data fetching and caching, so it may be a good choice for this implementation.

Q: How do we handle product variants in this implementation?

A: We have not implemented support for product variants in this implementation. However, we can add support for product variants by creating a new component that allows users to select product variants and add them to the basket.

Q: Can we integrate a payment gateway with this implementation?

A: Yes, we can integrate a payment gateway with this implementation. However, we would need to add additional code to handle payment processing and to update the basket data accordingly.

Q: How do we handle basket totals in this implementation?

A: We have not implemented basket totals in this implementation. However, we can add basket totals by calculating the total cost of the products in the basket and displaying it to the user.