macrbe
macrbe
PostsComments
SSolidJS
Created by macrbe on 9/14/2024 in #support
App Structure
Hey, I am struggeling a bit with solid.js as it is new for me. I was hoping to get some guidance when it comes to project structure The project is a simple shop app (without login/auth) that uses and loads .json files along the way. So what I have done is create a cache inside products.store.js which caches the product json files: 
...
const createProductFetcher = () => {
  const cache = new Map<
    string,
    { data: Resource<FullProduct>; refetch: () => void }
  >();
  const getFullProduct = (category: string, productSlug: string) => {
    const key = category + "_" + productSlug;

    if (!cache.has(key)) {
      const [data, { refetch }] = createResource(
        () => ({ category, productSlug }),
        fetchProduct //fetches the json file
      );
      if (data) {
        cache.set(key, { data, refetch });
      }
    }
    return cache.get(key) as {
      data: Resource<FullProduct>;
      refetch: () => void;
    };
  };
  return { getFullProduct };
};
export const { getFullProduct } = createProductFetcher();
...
const createProductFetcher = () => {
  const cache = new Map<
    string,
    { data: Resource<FullProduct>; refetch: () => void }
  >();
  const getFullProduct = (category: string, productSlug: string) => {
    const key = category + "_" + productSlug;

    if (!cache.has(key)) {
      const [data, { refetch }] = createResource(
        () => ({ category, productSlug }),
        fetchProduct //fetches the json file
      );
      if (data) {
        cache.set(key, { data, refetch });
      }
    }
    return cache.get(key) as {
      data: Resource<FullProduct>;
      refetch: () => void;
    };
  };
  return { getFullProduct };
};
export const { getFullProduct } = createProductFetcher();
so in the ProductDetails page component I use getFullProduct() to get the resource: 
function ProductDetail({ category, slug }: { category: string; slug: string }) {
  const productResource = () => {
    return getFullProduct(category, slug);
  };
...
function ProductDetail({ category, slug }: { category: string; slug: string }) {
  const productResource = () => {
    return getFullProduct(category, slug);
  };
...
Now that works as aspected but I have no clue how to reuse that logic in a way that I can: 1. iterate over the cart items of localstorage on page load (no problem with this) 2. somehow load all the related Product json files of the cart in one go and wait for them to be loaded. 3. have those product json/data also being added to the above cache so they do not need to be loaded again when needed elsewhere. Meaning if after the cart is loaded I click on a cart item and navigate to the corresponding productDetail page, that data is retrieved from the cache, as with getFullProduct() Can anyone point me towards a working/cleaner solution? Much appriciated, Matt
5 replies