mizark Comments - Answer Overflow

mizark

Posts Comments

SSolidJS

•Created by mizark on 8/5/2024 in #support

CSS dropping on navigation to nested [id] route

Figured it out, if you are importing 1 css file to multple locations it causes this, fixed

3 replies

SSolidJS

•Created by mizark on 8/5/2024 in #support

CSS dropping on navigation to nested [id] route

it is my app.css file, could it be because some weird suspense behavior?

3 replies

SSolidJS

•Created by mizark on 8/3/2024 in #support

<For> throws Cannot access 'product2' before initialization

Yeah I had to get rid of that and just use the data() from createAsync(). I guess if I want to destructure data() and use in context I should just use a store?

7 replies

SSolidJS

•Created by mizark on 8/3/2024 in #support

<For> throws Cannot access 'product2' before initialization

Product.jsx

import AppContext from "../../context/appContext";
import { useContext, For, createSignal } from "solid-js";

const Product = () => {
  const { addToCart, products, product } = useContext(AppContext);

...

import AppContext from "../../context/appContext";
import { useContext, For, createSignal } from "solid-js";

const Product = () => {
  const { addToCart, products, product } = useContext(AppContext);

...

7 replies

SSolidJS

•Created by mizark on 8/3/2024 in #support

<For> throws Cannot access 'product2' before initialization

Hmm I had to do product() && and it at least moved through the error but nothing loads just goes to my fallback even though the data is there on the server side before responding to the client on initial request... product is a signal set on initial render from result of a create async/ route data. I inject it in context and import it into this file and the parent like this: (layout).jsx:

const getProductData = cache(async (pathname) => {
  "use-server";
  const productPages = [
    "/",
    "/login",
    "/sign-up",
    "/exercise",
    "/food",
    "/sleep",
    "/supplements",
    "/water",
  ];

  const splits = pathname.split("/");
  const isProduct = splits[1] === "product";
  if (productPages.includes(pathname)) {
    const allProds = await getAllProducts(pathname);
    return { product: false, ...allProds };
  } else if (isProduct) {
    const id = splits[2];
    const prod = await getProduct(id);
    return { ...prod, products: false, category_tags: false };
  } else {
    return { products: false, product: false, category_tags: false };
  }
});

export const route = {
  preload: ({ params, location, intent }) => {    getProductData(location.pathname);
  },
};

export default function Layout(props) {
  const data = createAsync(async () => {
    let pathname = useLocation().pathname;
    let p = await getProductData(pathname);
    return { ...u, ...p };
  });

  let initialProduct = {};

  if (isServer) {
    if (data()) {
      initialProduct = data().product;
    }
  }

  const [product, setProduct] = createSignal(initialProduct);

const getProductData = cache(async (pathname) => {
  "use-server";
  const productPages = [
    "/",
    "/login",
    "/sign-up",
    "/exercise",
    "/food",
    "/sleep",
    "/supplements",
    "/water",
  ];

  const splits = pathname.split("/");
  const isProduct = splits[1] === "product";
  if (productPages.includes(pathname)) {
    const allProds = await getAllProducts(pathname);
    return { product: false, ...allProds };
  } else if (isProduct) {
    const id = splits[2];
    const prod = await getProduct(id);
    return { ...prod, products: false, category_tags: false };
  } else {
    return { products: false, product: false, category_tags: false };
  }
});

export const route = {
  preload: ({ params, location, intent }) => {    getProductData(location.pathname);
  },
};

export default function Layout(props) {
  const data = createAsync(async () => {
    let pathname = useLocation().pathname;
    let p = await getProductData(pathname);
    return { ...u, ...p };
  });

  let initialProduct = {};

  if (isServer) {
    if (data()) {
      initialProduct = data().product;
    }
  }

  const [product, setProduct] = createSignal(initialProduct);

(layout)/(page)/product/[id].jsx

import AppContext from "../../../../context/appContext";
import { useContext } from "solid-js";

export default function ProductRoute() {
  const { product } = useContext(AppContext);
  return (
    <>
      <Show when={product().name} fallback="loading">
        <Product />
      </Show>
    </>
  );
}

import AppContext from "../../../../context/appContext";
import { useContext } from "solid-js";

export default function ProductRoute() {
  const { product } = useContext(AppContext);
  return (
    <>
      <Show when={product().name} fallback="loading">
        <Product />
      </Show>
    </>
  );
}

7 replies

SSolidJS

•Created by mizark on 8/2/2024 in #support

<For> throws hydradtion error with a <span> as fallback element

Yeah that worked

4 replies

SSolidJS

•Created by mizark on 4/19/2023 in #support

Noob question: createRenderEffect vs createEffect or onMount

So is there a way to update one on client prior to being rendered with init val being localstorage

5 replies

SSolidJS

•Created by mizark on 4/19/2023 in #support

Noob question: createRenderEffect vs createEffect or onMount

Hmm so here I notice the difference between them here: https://discord.com/channels/722131463138705510/1098872623762526339/1098872623762526339 Not sure why though as I do not think itemsCount is a ref, right?

5 replies

SSolidJS

•Created by mizark on 4/16/2023 in #support

routedata not updating on A tag navigation

location is available in routdata params

3 replies

SSolidJS

•Created by mizark on 4/16/2023 in #support

routedata not updating on A tag navigation

I solved this by just adding a key:

{ key: () => ["path", location.pathname] }

{ key: () => ["path", location.pathname] }

3 replies

SSolidJS

•Created by beganovich on 2/21/2023 in #support

Manually refetching server data, causes double request

Did you get an answer to this?

2 replies

Gaming

Programming