How to initialize store with data from an async data source in a client-side React app?

[szimek]

Hi!

I'm sure some version of this question has been asked and answered already, but here it is.

The first part of the question is store initialization with data from the server (or any async source). I have a client-side rendered React app and I want to initialize the store with some ids from query params. However, before I do it, I need to validate these ids with user's data that I need to fetch from the server first. In my case this means using TanStack Query and either useQuery hook (what we use at the moment) or queryClient.fetchQuery call (if needed to be done outside our a React component).

The second part is syncing store state with query params. Whenever these validated ids in the store change (e.g. during the initialization or later when they are added or removed by the user), I want to update query params as well.

Regarding the store initialization - what's the best way to do it? Are async actions the recommended way to do it? This is close to the example from the docs:

const useItemStore = create((set) => ({
  itemIds: [],
  initialize: async () => {
    const { itemIds: itemIdsFromSearch } = getSearchParams()
    const { data: itemIdsFromServer } = await queryClient.fetchQuery({ queryKey, queryFn })
    const validItemIds = validateItemIds(itemIdsFromSearch, itemIdsFromServer)
    set({ itemIds: validItemIds })
  },
}))

How to ensure it happens only once? Where to put it - in the function that creates the store, or in some useEffect that ensures everything runs only once?

What about any other action that might be called and try to modify the store state while the store is being initialized - should it be allowed, ignored, queued? Should there be an additional status prop that indicates if the initialization is pending, successful or failed that other actions take into account? I probably could put the async initialization call in the route loader, but I don't necessarily want to block loading of the page while the data needed to validate these ids is fetched from the server.

Regarding syncing store state with query params - what's the best way to do it? Middleware similar to persist? Maybe use the usePrevious hook to compare the previous and current state? Or maybe subscribe to the whole store in useEffect and update params there?

[CHAOSdonut]

I'm running into a similar issue in my Next.js app.
I want to create my store with data that I fetch from an API, but this seems impossible.

The closest I've come is a solution similar to yours where I have a store action that does the fetching. 
The store has a bool "isInitialized" that is set to true after that init action is done.
This is so I can disable subscribers until after the init function is finished, as they caused multiple unnecessary reloads.

I am, however, still looking for a cleaner solution, as this feels very messy. It would be great if you could just await store creation so you could call await directly in the store. This way you always know that if your store exists, it has the initial data it needs. And you also would not have to track some sort of "isInitialized" value anymore. 

[CHAOSdonut]

@szimek
I have found a solution that works for me, i followed the example for creating a store provider from the ReadMe
So i can pass props to my store creation

inside the provider i can then use an useEffect hook to fetch data and create the store.

The provider ends up looking something like this

const storeRef = useRef<StoreType | null>(null);
useEffect(() => {
    const fetchData = async () => {
            const fetchedData = await fetchMyData();
      ]);
      
      storeRef.current = createMyStore(fetcheddata);
    };

    fetchData();
  }, []);

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