My Zustand store code looks like this:
import create from "zustand";
import { persist } from "zustand/middleware";
const useProjectStore = create(
persist(
(set) => ({
selectedProject: null,
setSelectedProject: (project) => set({ selectedProject: project }),
}),
{
name: "food-storage", // unique item name in storage
// (optional) by default, 'localStorage' is used
}
)
);
export default useProjectStore;
I need to use this store on a page where I will retrieve the state of the current selected project and then update the Prisma query using the project ID from the state:
import { prisma } from "@/lib/prismaDb";
import ImageList from "@/app/dashboard/components/imageList";
import ImageTable from "@/app/dashboard/components/imageTable";
import useProjectStore from "@/stores/currentProject-store";
import useServerStore from "@/stores/useServerStore";
const imagesPage = async () => {
const useProjectStore = useServerStore((state) => state.useProjectStore);
console.log("useProjectStore", useProjectStore);
const imageList = await prisma.facebookImage.findMany({
where: {
projectId: "f2b78a6f-160f-4b2c-9cd5-b98c2f04d0d0",
},
});
console.log("imageList2222");
console.log("superaman", imageList);
return (
<div>
<ImageTable imageList={imageList} />
{/* <ImageList imageList={imageList} /> */}
</div>
);
};
export default imagesPage;
The issue I'm facing is that local storage cannot be accessed from the server. Is there any way to resolve this?
I have explored this solution - mentioned in the Zustand documentation, but it resulted in an error stating that hooks cannot be used on the server side.
If you have any questions, feel free to ask. Thank you.