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,
  ]);

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,
  ]);

Neto•3/3/23, 7:27 PM

trpc includes rq

Neto•3/3/23, 7:27 PM

why prioritise zustand over it?

juanvilladevOP•3/3/23, 7:35 PM

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•3/3/23, 7:53 PM

you can fetch with trpc

Neto•3/3/23, 7:53 PM

and the result is sent directly to zustand

Neto•3/3/23, 7:53 PM

and remember to disable the refetch options on the query

Neto•3/3/23, 7:54 PM

handle zustand as you would

Neto•3/3/23, 7:54 PM

then call the trpc mutation

Neto•3/3/23, 7:54 PM

and if you want, resync the zustand store

Neto•3/3/23, 7:55 PM

overall

Neto•3/3/23, 7:55 PM

"hydrate" the zustand store with trpc data

juanvilladevOP•3/3/23, 8:00 PM

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

juanvilladevOP•3/3/23, 8:00 PM

@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•3/3/23, 8:38 PM

Sure

Neto•3/3/23, 8:38 PM

Hit me up in the dms

juanvilladevOP•3/3/23, 8:38 PM

Sweet!

getting data from TRPC vs Zustand store

Similar Threads

Similar Threads

Similar Threads