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()

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()

getFullProduct()

Can anyone point me towards a working/cleaner solution?

Much appriciated,

Matt

App Structure

...
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()

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);
  };
...

getFullProduct()

getFullProduct()

Can anyone point me towards a working/cleaner solution?

Much appriciated,

Matt

App Structure

App Structure

Similar Threads

Similar Threads

Similar Threads