External api for async inital state

[TorbjornHoltmon]

Hi!

I want to try to use zustand for a project where the inital state is always fetched from an external api.
I have tried to figure out how to do this without any luck, have anyone done anything like this before and can give any pointers in the right direction?

const useStore = create(set => ({
  // Fetch that gets the current bears from api
  bears: await getBearsAsync(),
  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 })
}))

[dai-shi]

The initial value has to be something in sync.

const useStore = create(set => ({
  bears: null,
  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 })
}))

// Fetch that gets the current bears from api
getBearsAsync().then((bears) => useStore.setState({ bears }))

[kenneropia]

Hello @dai-shi, please sir would the “ getBearsAsync().then((bears) => useStore.setState({ bears }))” be best placed in a useEffect in the parent component?

[dai-shi]

It depends. It's initialization of the store, so place it where you initialize it.

useEffect would be good if you want to delay the execution, but it feels unlikely.

[dai-shi]

#2488 is related.

[kenneropia]

thanks for the response

[steaks]

I built a third-party library called leo-query that makes this easier. It handles gotchas with loading state, errors, caching, retries, stale data, etc.

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

const useStore = create(set => ({
  // Fetch that gets the current bears from api
  bears: query(getBearsAsync),
  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 })
}));

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

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