Theo's Typesafe Cult•2y ago

getting data from TRPC vs Zustand store

I need my component to prioritize data from a zustand store. If there's no data in the store, then fetch it from the server. I'm not sure if this is the correct way to do it? Curious if this the best way to check if there's data in a Zustand store vs fetching and setting the data?

const fetchRequestedProduct =
    api.requestedProduct.getRequestedProductByTransactionIdAndProductId.useQuery(
      {
        transactionId,
        productId,
      },
      {
        enabled: requestedProductsInStore.get(productId) === undefined,
      }
    );

  useEffect(() => {
    const requestedProductsFromStore = requestedProductsInStore.get(productId);
    if (requestedProductsFromStore !== undefined) {
      setCurrentRequestedProducts(requestedProductsFromStore);
      return;
    }
    if (fetchRequestedProduct.data) {
      const requestedProducts: RequestedProductForTable[] =
        fetchRequestedProduct.data;
      setCurrentRequestedProducts(requestedProducts);
    }
  }, [
    fetchRequestedProduct.data,
    productId,
    requestedProductsInStore,
    setCurrentRequestedProducts,
  ]);

const fetchRequestedProduct =
    api.requestedProduct.getRequestedProductByTransactionIdAndProductId.useQuery(
      {
        transactionId,
        productId,
      },
      {
        enabled: requestedProductsInStore.get(productId) === undefined,
      }
    );

  useEffect(() => {
    const requestedProductsFromStore = requestedProductsInStore.get(productId);
    if (requestedProductsFromStore !== undefined) {
      setCurrentRequestedProducts(requestedProductsFromStore);
      return;
    }
    if (fetchRequestedProduct.data) {
      const requestedProducts: RequestedProductForTable[] =
        fetchRequestedProduct.data;
      setCurrentRequestedProducts(requestedProducts);
    }
  }, [
    fetchRequestedProduct.data,
    productId,
    requestedProductsInStore,
    setCurrentRequestedProducts,
  ]);

6 Replies

Neto•2y ago

trpc includes rq why prioritise zustand over it?

DYELbrahOP•2y ago

So the page this component is on is represents a "Quote" where one can open the view of many different types of products inside a modal. Whenever the modal is closed, I need to store the current data somewhere in memory so that if the user reopens the modal, any changes they made are still available. Once they hit save, I'll ultimately save to the db. So I fetch using TRPC, set the state, do any modifications to the state and eventually will save. While I make modifications however, if I close the modal, I don't want to lose these chages.

Neto•2y ago

you can fetch with trpc and the result is sent directly to zustand and remember to disable the refetch options on the query handle zustand as you would then call the trpc mutation and if you want, resync the zustand store overall "hydrate" the zustand store with trpc data

DYELbrahOP•2y ago

Yeah exactly, I want to hydrate the zustand store with the products initial data. Then want to mutate the store, and eventually use a TRPC mutation to save the changes into the db @Neto Would you possibly be open to reviewing how I'm doing this in my project? I could offer to pay you for your time?

Neto•2y ago

Sure Hit me up in the dms

DYELbrahOP•2y ago

Sweet!

Gaming

Programming

getting data from TRPC vs Zustand store