What is best practice for fetching data in Zustand?

[dante01yoon]

Hi, I'm new to Zustand.
without using caching library like react-query or swr,
what would be best practice get and set zustand store for now? 🤔

Is there more suitable way than initialize store in useEffect?

[dai-shi]

What is best practice for fetching data in Zustand?

Async actions https://github.com/pmndrs/zustand#async-actions should be best practice?

[vaynevayne]

@dai-shi seems get store outside of component and call it when component file used.

Wait a minute, this means that your interface is executed only once when it enters the application. Very often, the data is real-time. When we re-enter the page, we need to retrieve it. I don't think it's a problem to load the data for the first time in useEffect, because it means: page display-> fetch, which fits useEffect.

[dbritto-dev]

@vaynevayne let's use react query

[vaynevayne]

@dbritto-dev Please don't, this is a client-side data request, this is not the problem that react-query wants to solve, using it forcibly, you will encounter a lot of trouble.

Before you use them, take a look at this article
https://juejin.cn/post/7223687532068077628
https://juejin.cn/post/7189518542780235836

[dbritto-dev]

@vaynevayne I didn't read it since isn't in english but that's the goal of having a data layer

[dante01yoon]

using react query is not a problem at all. it makes server data cache management in client side handy.

[ItsTarik]

@vaynevayne its not OK pointing to chinese docs !

[vaynevayne]

Help others: use English as much as possible, if nothing, do not force
Ask for help: English forums must be in English
That's what I think.

To borrow eveny's words:

why should I sacrifice my time with my wife and children to save you time learning Chinese?

@vaynevayne its not OK pointing to chinese docs !

[williammyuan]

小黑子,鸡脚露出来了吧

[Eireen]

@vaynevayne We do not require you to visit English-speaking programming communities. You are free to visit Chinese forums only.

[amoghkulkarnifr]

Hi all, I am also trying to find good resources about the same subject. I'm also new to Zustand and the best practices that one should follow for global state management. I was thinking of using SWR in addition to Zustand's persist middleware for getting the most out of it.

What are some of the widely followed patterns for combining Zustand, persist and SWR?

[upromeer]

im also interested to know more about this....

[steaks]

I built Leo Query to make integrating async data with Zustand easy. It handles caching, loading state, errors, stale data, etc. You may find it useful.

Here's a snippet from the docs:

import {create} from "zustand";
import {effect, query, hook} from "leo-query";

const useStore = create(() => ({
  increasePopulation: effect(increasePopulation),
  removeAllDogs: effect(removeAllDogs),
  dogs: query(fetchDogs, s => [s.increasePopulation, s.removeAllDogs]) // Re-fetch on populating increase or removal
}));

const useStoreAsync = hook(useStore, /*suspense*/false);

const YourComponent = () => {
  const dogs = useStoreAsync(s => s.dogs);
  
  if (dogs.isLoading) return <>Loading...</>;
  return <>{dogs.value}</>
};

[upromeer]

store.tsx

const createDataStore = () =>
    createStore<TypeStore>()(
        immer(
            persist(
                (set) => ({
                    data: [],
                    index: 0,
                    saved: {},
                    setIndex: (index: number) => set({ index }),
                    seData: (data: TypeData[]) => set({ data }),
                    setSaved: (value: string) =>
                        set((state) => {
                            state.saved[state.data[state.index]] = value;
                        }),
                }),
                {
                    name: "data",
                }
            )
        )
    );

provider.tsx

"use client";

import createDataStore from "./store";

const DataStoreContext = createContext<ReturnType<typeof createDataStore> | null>(null);

const DataStoreProvider = ({ children }: { children: ReactNode }) => {
    const storeRef = useRef<ReturnType<typeof createDataStore>>();
    
    if (!storeRef.current) {
        storeRef.current = createDataStore();
    }

    return (
        <DataStoreContext.Provider value={storeRef.current}>{children}</DataStoreContext.Provider>
    );
};


const useDataStore = <T,>(selector: (store: IDataStore) => T): T => {
    const dataStoreContext = useContext(DataStoreContext);

    if (!dataStoreContext) {
        throw new Error(`useDataStore must be use within DataStoreProvider`);
    }

    //// *useStoreWithEqualityFn for preventing re-rendring* ////
    return useStoreWithEqualityFn(dataStoreContext, selector);
};

layout.tsx

import DataStoreProvider from "./provider";

export default function RootLayout({
    children,
}: Readonly<{
    children: ReactNode;
}>) {
    return <DataStoreProvider>{children}</DataStoreProvider>;
}

page.tsx

"use client";

import useDataStore from "./provider";

export default function Home() {
  const setData = useDataStore((state) => state.setData);

  const { isLoading } = useQuery({
    queryKey: ["data"],
    queryFn: async () => {
      const response = await fetch("/data.json");
      return await response.json();
    },
    onSuccess(data) {
      setData(data);
    },
  });

  return <main>{isLoading ? <Supense /> : <Comp />}</main>;
}

[upromeer]

in provider.tsx there is useStoreWithEqualitFn for preventing re-render.

@dbritto-dev @dai-shi

is this correct implementation of zustand with react-query and nextjs?
or im doing something wrong?

[igortas]

@dai-shi
I'm trying to achieve very similar scenario as @upromeer, but I like to connect tanstack-query, zustand and router loaders.
My idea is, just working with setState and zustand do the rest, with providing queryClient as param.

My current implementation:

Routes:

     <Route
          path='/'
          element={<Home />}
          loader={async () => {
            await fetchUser(queryClient);
            return null;
          }}
        >

userstore

export const useUserStore = create<UserState>((set, get) => ({
  user: {},
  fetchUser: async (queryClient: QueryClient) => {
    const user = await queryClient.ensureQueryData<User>({
      queryKey: ['user'],
      queryFn: () => fetcher
    });
    set({ user });
  }
}));

I don't see network request in devtools from the loader, with just using the fetchUser setter and providing the queryClient instance.
Is it possible this scenario, or I need to set the fetch keyword exactly in zustand store, so will be fired on any set action?

[dai-shi]

I'm not super familiar with router nor tanstack-query, but the code looks good to me. How are you getting queryClient and fetchUser in <Route>?

I need to set the fetch keyword exactly in zustand store, so will be fired on any set action?

Not sure if I get it.

[igortas]

I'm not super familiar with router nor tanstack-query, but the code looks good to me. How are you getting queryClient and fetchUser in <Route>?
@dai-shi I've made it work, was issue from the ``router``` side, I was using different type of router option that was ignoring loader functions....

I need to set the fetch keyword exactly in zustand store, so will be fired on any set action?
I was thinking that the only way zustand will fetch some data, if u name the store function only as fetch, not fetchUser... But I was wrong...
Not sure if I get it.

[leookun]

It's useful for me.

const Com = () => {
  if (!state) {
    throw stateSetter();
  }
  return xxx;
};

<ErrorBoundary FallbackComponent={...}>
  <React.Suspense fallback={...}>
    <Com />
  </React.Suspense>
</ErrorBoundary>