I’m currently working on a project using Next 14 with server actions. I want to manage global app parameters (such as cities, countries, opening hours, banks list) that need to be fetched from the server once a user logs in. These parameters should be stored in local storage since they don’t change frequently and need to be available globally throughout the app for the user session.

My current stack is: next-auth v5, tailwind, react-hook-form, zod and Im planning to use Zustand with React Query.

Here is what im trying to achieve:

1. Fetch the app data once the user is logged in.
2. Store this data globally so it can be accessed across multiple components.
3. Persist this data in local storage to avoid unnecessary refetching.
4. Clean data when user logs out.

Here is my current approach:

Zustand Store (with Local Storage Persistence)

// lib/store/appParamsStore.ts
import create from 'zustand';
import { persist } from 'zustand/middleware';

type AppParamsState = {
  // example
  openHours: string[];
  banks: string[];
  regionData: string[];
  setOpenHours: (openHours: string[]) => void;
  setBanks: (banks: string[]) => void;
  setRegionData: (regionData: string[]) => void;
};

export const useAppParamsStore = create<AppParamsState>(
  persist(
    set => ({
      openHours: [],
      banks: [],
      regionData: [],
      setOpenHours: (openHours: string[]) => set({ openHours }),
      setBanks: (banks: string[]) => set({ banks }),
      setRegionData: (regionData: string[]) => set({ regionData }),
    }),
    {
      name: 'app-params',
      getStorage: () => localStorage
    }
  )
);

Example Component Usage

// components/FormWithCities.tsx
"use client";
import React from 'react';
import { useAppParams } from '@/hooks/useAppParams';
// https://docs.pmnd.rs/zustand/integrations/persisting-store-data#usage-in-next.js
import useStore from "@/lib/store/useStore";

export default function FormWithCities() {
  const regionData = useStore(useAppParams, (state) => state.regionData));

  const FormSchema = z.object({
    region: z.string().refine(value => regionData.includes(value), {
      message: 'Invalid region',
    }),
  });
  
  return (
    <Form {...form}>
      {/* Form ... */}
    </Form>
  );
}

I was planning to use something like this:

// hooks/useAppParams.ts
import { useAppParamsStore } from "@/lib/store/appParamsStore";
import { useQuery } from "@tanstack/react-query";
import { getProtectedParams } from "@/actions/common/getProtectedParamsAction";

export const useAppParams = () => {
  const {
    openHours,
    banks,
    regionData,
    setOpenHours,
    setBanks,
    setRegionData,
  } = useAppParamsStore();

  const isStoreEmpty = openHours.length === 0 && banks.length === 0 && regionData.length === 0;

  useQuery(
    ['app-params'],
    getProtectedParams,
    {
      enabled: isStoreEmpty,
      onSuccess: (data) => {
        setOpenHours(data.openHours);
        setBanks(data.banks);
        setRegionData(data.regionData);
      },
    }
  );

  return { openHours, banks, regionData };
};

Is this a good approach to manage and persist this kind of data?

Thank you