DEV Community: koen de vulder

Simplifying Data Fetching with Zustand and Tanstack Query: One Line to Rule Them All

koen de vulder — Sat, 20 Jul 2024 09:21:54 +0000

In modern web development, managing data fetching, loading states, and error handling can quickly become complex and verbose. However, with the right tools and a bit of abstraction, we can significantly simplify this process. In this blog post, I'll show you how I used Zustand for state management and Tanstack Query (formerly React Query) to reduce all of this complexity to a single line of code in my React components.

The Problem

Typically, when fetching data in a React component, you need to manage several pieces of state:

The fetched data
Loading state
Error state

You also need to handle the actual data fetching logic, error handling, and potentially implement a way to refetch the data. This can lead to a lot of boilerplate code in your components.

The Solution

By leveraging Zustand for state management, Tanstack Query for data fetching, and creating a centralized toast notification system, we can encapsulate all of this logic and expose a simple, clean API to our components. Here's how we did it:

Step 1: Set Up Zustand Store

First, we create a Zustand store to manage our global loading state:

import { create } from 'zustand';

interface LoaderState {
    isLoading: boolean;
    setIsLoading: (isLoading: boolean) => void;
}

export const useLoaderStore = create<LoaderState>()((set) => ({
    isLoading: false,
    setIsLoading: (isLoading: boolean) => set({ isLoading }),
}));

We use Zustand because it provides a simple and lightweight solution for managing global state. In this case, we're using it to manage a global loading state that can be accessed and modified from anywhere in our application.

Step 2: Set Up ReactQueryProvider with Global Toast

We set up a ReactQueryProvider that includes a global toast system:

import React, { useRef } from 'react';
import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Toast } from 'primereact/toast';
import { TOAST_SEVERITY } from '@/app/ts/constants/ui';

let globalToast: React.RefObject<Toast> | null = null;

export const showToast = (severity: TOAST_SEVERITY, summary: string, detail: string, life: number = 5000) => {
    globalToast?.current?.show({ severity, summary, detail, life });
};

export function ReactQueryProvider({ children }: React.PropsWithChildren) {
    const toastRef = useRef<Toast>(null);
    globalToast = toastRef;

    const queryClient = new QueryClient({
        queryCache: new QueryCache({
            onError: (error: any, query) => {
                console.error(JSON.stringify(error));
            },
        }),
        mutationCache: new MutationCache({
            onError: (error: any, query) => {
                console.error(JSON.stringify(error));
            },
        }),
    });

    return (
        <QueryClientProvider client={queryClient}>
            <Toast ref={toastRef} />
            {children}
        </QueryClientProvider>
    );
}

This setup provides a global showToast function that can be used anywhere in the application to display toast notifications.

Step 3: Create Error Notification Function

We create a centralized error notification function:

import { TOAST_SEVERITY } from '@/app/ts/constants/ui';
import { showToast } from '@/providers/ReactQueryProvider';

export interface CustomError extends Error {
    status?: number;
}

export const errorNotification = (isError: boolean, title: string, error: CustomError | null = null) => {
    if (isError && error) {
        showToast(TOAST_SEVERITY.ERROR, `${error.status}: ${title}`, error.message, 5000);
    }
};

Step 4: Create a Custom Hook for Error Notifications

We create a custom hook to handle error notifications:

import { useEffect } from 'react';
import { errorNotification } from '@/app/functions/errorResponse';
import { CustomError } from '@/app/ts/interfaces/global/customError';

export const useErrorNotification = (isError: boolean, title: string, error: CustomError | null = null) => {
    useEffect(() => {
        errorNotification(isError, title, error);
    }, [isError]);
};

Step 5: Create a Custom Data Fetching Hook

We create a custom hook for data fetching, which combines our loading state management and error notification:

import { useLoaderStore } from '@/stores/store';
import { CustomError } from '@/app/ts/interfaces/global/customError';
import { useErrorNotification } from '@/hooks/useErrorNotification';
import { useLoading } from '@/hooks/useLoading';

interface UseDataFetchingParams {
    isLoading: boolean;
    isError: boolean;
    error: CustomError | null;
    errorMessage: string;
}

export const useDataFetching = ({ isLoading, isError, error, errorMessage }: UseDataFetchingParams) => {
    const { setIsLoading } = useLoaderStore();
    useErrorNotification(isError, errorMessage, error);
    useLoading(isLoading, setIsLoading);
};

This hook encapsulates the logic for updating the global loading state and handling error notifications.

Step 6: Create the CarApi

Next, we create an API service for handling car-related requests:

import { Car } from '@/app/ts/interfaces/car';

export const CarApi = {
    getActiveCars: async (): Promise<Car[]> => {
        const response = await fetch('/api/cars?active=true');
        if (!response.ok) {
            throw new Error('Failed to fetch active cars');
        }
        return response.json();
    },

    getCarsWithSpecificBrand: async (brandId: string, active: boolean = true): Promise<Car[]> => {
        const response = await fetch(`/api/cars?brandId=${brandId}&active=${active}`);
        if (!response.ok) {
            throw new Error('Failed to fetch cars for the specific brand');
        }
        return response.json();
    }
};

This API service provides methods for fetching active cars and cars of a specific brand.

Step 7: Create a Custom Hook for Fetching Cars

Now, we can create a custom hook that uses Tanstack Query to fetch car data:

import { useQuery } from '@tanstack/react-query';
import { CarApi } from '@/app/api/carApi';
import { CARS } from '@/app/ts/constants/process';
import { useDataFetching } from '@/hooks/useDataFetching';
import { useQueryProps } from '@/app/ts/interfaces/configs/types';
import { ERROR_FETCHING_CARS } from '@/app/ts/constants/messages';

export const useCars = ({ filterObject = undefined, active = false, enabled = true }: useQueryProps) => {
    const errorMessage = ERROR_FETCHING_CARS;
    const getFilteredCars = async () => {
        if (Object.keys(filterObject || {}).length === 0 || filterObject === undefined) return await CarApi.getActiveCars();
        return await CarApi.getCarsWithSpecificBrand(filterObject.id, active);
    };
    const {
        data: cars,
        isLoading: isLoadingCars,
        refetch: refetchCars,
        error: errorCars,
        isError: isErrorCars,
    } = useQuery({
        queryKey: [CARS],
        queryFn: getFilteredCars,
        retry: 0,
        enabled,
    });

    useDataFetching({ isLoading: isLoadingCars, isError: isErrorCars, error: errorCars, errorMessage });

    return { cars, isLoadingCars, refetchCars, errorCars };
};

Step 8: Use the Custom Hook in Your Component

Now, in your component, you can use the custom hook with a single line of code:

const { cars, refetchCars } = useCars({ filterObject: selectedBrand, active });

This one line gives you access to:

The fetched data (cars)
A function to refetch the data (refetchCars)
Automatic loading state management (using Zustand)
Automatic error handling and notification (using the global toast system)

The Benefits

By using this approach with Zustand and Tanstack Query, we've gained several benefits:

Simplified Component Code: Our components are now much cleaner and focused on rendering, not data management.
Global State Management: Zustand provides an easy way to manage global state, like our loading indicator.
Powerful Data Fetching: Tanstack Query handles caching, refetching, and background updates with minimal configuration.
Centralized Error Handling: Our global toast system provides a consistent way to handle and display errors.
Reusability: The useCars hook can be used in any component that needs to fetch car data.
Consistency: Error handling and loading states are managed consistently across all components using this hook.
Easy Refetching: If we need to refetch the data (e.g., after an update), we can simply call refetchCars().

Conclusion

By leveraging Zustand for state management, Tanstack Query for data fetching, and creating a centralized toast notification system, we've significantly simplified our data fetching process. This approach allows us to handle complex data management tasks with a single line of code in our components, leading to cleaner, more maintainable React applications.

Remember, the key to this simplification is moving the complexity into well-designed, reusable hooks and utilizing powerful libraries like Zustand and Tanstack Query. This way, we solve the problem once and benefit from the solution across our entire application.

First Full Stack App: Where do i start?

koen de vulder — Mon, 09 May 2022 11:47:12 +0000

Hi, community!

Intro

This is my first post on my neverending journey of becoming a true developer. In this post, I want to explain my current project and the steps/decisions I will be making to get this project to a great end.

I have little experience in creating and deploying full-stack apps. My knowledge is mostly situated backend.
Small disclaimer, I don't know what I'm doing :D.

So let's start coding!

What Is This Project About?

My mother runs a non-profit business where she has built a community where people can post their left-overs from that day on a Facebook Page. This allows people who are struggling to make it through the month to pick up those left-overs and save money on the actual food in the market.

This is not the only purpose of this initiative.
Sometimes activities are thrown and people can sign up for those activities.

Step 1: Get a Clear View of What You Are Going to Build

For me, it was quite easy to get everything down on paper. I just sat down with my mother for an hour and it got down to a pretty easy CRUD application.

Step 2: What Frameworks/Libraries Will I be Using?

Since I am currently using .NET and C# professionally, I chose to use this as my backend framework. I got the NextJS Framework recommended by a friend for my front end. Even though the little knowledge I have of a frontend framework lies with Angular, he got me to use this one instead.

Why? I wanted to get a taste of React as well, and since I don't have that much experience in Angular, it is not that big of a loss if I switched over to React.

The one dilemma I'm still stuck on is what type of database I should use. Currently, I am storing my project in Azure and will probably use that as a database because they have a relational database. I have some knowledge of document-based databases but not to the extent I feel comfortable using them.

Let's say I go for a relational DB now and want to switch it later to MongoDB or Firebase. Normally I would be needing to change A LOT of code because I changed the type of Database.

Well, there is a fix for that which I didn't know about before, and that is using an onion architecture in the backend (video with a very good explanation). I'm sure there are other solutions, but this is one-handed to me by my mentor.

Step 3: starting to design

Here I just made a simple Word Doc (there are way better approaches) set up my entities' layout.

I didn't plan any frontend layouts because I see it as an extra which isn't that important for now.

Step 3: Start Coding

I first want to get my backend up and running in my situation. This is where all my logic is going to go and where the front will call its requests to.

Once I have the endpoints set up, I will be setting up a frontend where I will make sure the connection is valid and I can fetch data from my backend to my frontend.

To have data, I will be using a simple cache database with some dummy data to fill that temporary database.

public List<Post> GeneratePosts()
        {
            List<Post> posts = new();
            posts.Add(new Post
            (
                "Activity one",  
                "Lorem Ipsum is simply dummied text of the printing and typesetting industry. " +
                "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, " +
                "when an unknown printer took a galley of type and scrambled it to make a type specimen book",
                "Lorem Ipsum is simply dummied text of the printing and typesetting industry.",
                DateTime.Now.AddDays(-20)
            ));
            posts.Add(new Post
           (
               "Activity two",
               "Lorem Ipsum is simply dummied text of the printing and typesetting industry. " +
               "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, " +
               "when an unknown printer took a galley of type and scrambled it to make a type specimen book",
               "Lorem Ipsum is simply dummied text of the printing and typesetting industry.",
               DateTime.Now.AddDays(-20)
           ));
            posts.Add(new Post
           (
               "Some other activity",
               "Lorem Ipsum is simply dummied text of the printing and typesetting industry. " +
               "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, " +
               "when an unknown printer took a galley of type and scrambled it to make a type specimen book",
               "Lorem Ipsum is simply dummied text of the printing and typesetting industry.",
               DateTime.Now.AddDays(-20)
           ));

            return posts;
        }

This method will be called upon launching the backend application and will place some dummy data inside of the cache.

And that's it for starting a full-stack application using .NET and NextJS.

From here on out it will be mainly updating and implementing features.

Thanks for reading this blog.