ali Comments - Answer Overflow

ali

Posts Comments

SSolidJS

•Created by ali on 6/9/2024 in #support

How to make fetch request on server before sending html to client?

Ah, I see now. Thanks for the replies!

11 replies

SSolidJS

•Created by ali on 6/9/2024 in #support

How to make fetch request on server before sending html to client?

Thanks for the reply. I replicated my problem here: https://codesandbox.io/p/devbox/naughty-villani-mpv54m?file=%2Fsrc%2Froutes%2Findex.tsx

11 replies

SSolidJS

•Created by ali on 6/9/2024 in #support

How to make fetch request on server before sending html to client?

It happens with all apis. Also, I have logged the response ( console.log(res);) and it is fine, but in the browser I get undefined

import { createAsync, cache } from "@solidjs/router";

const getData = cache(async () => {
  "use server";
  const response = await fetch("http://swapi.dev/api/planets/1/");
  const res = await response.json();
  console.log(res);
  return res;
}, "users");

export const route = {
  load: () => getData(),
};

export default function Home() {
  const data = createAsync(() => getData());
  return <main>{data()}</main>;
}

import { createAsync, cache } from "@solidjs/router";

const getData = cache(async () => {
  "use server";
  const response = await fetch("http://swapi.dev/api/planets/1/");
  const res = await response.json();
  console.log(res);
  return res;
}, "users");

export const route = {
  load: () => getData(),
};

export default function Home() {
  const data = createAsync(() => getData());
  return <main>{data()}</main>;
}

11 replies

SSolidJS

•Created by ali on 6/9/2024 in #support

How to make fetch request on server before sending html to client?

Thanks for the reply. I have changed my code now to this:

import { createAsync, cache } from "@solidjs/router";

const getData = cache(async () => {
  "use server";
  const response = await fetch(
    "http://localhost:5000/api/items?" +
      new URLSearchParams({
        type: "11",
        min: "0",
        max: "1000000",
        polygon:
          "29.00743125000136 59.284420699563725, 13.36290000000119 59.284420699563725, -2.2816312499989806 59.284420699563725, -2.2816312499989806 32.5773969429995, 13.36290000000119 32.5773969429995, 29.00743125000136 32.5773969429995, 29.00743125000136 59.284420699563725",
        polygon2: "",
        itemSort: "new",
      })
  );
  const res = await response.json();
  return res;
}, "users");

export const route = {
  load: () => getData(),
};

export default function Home() {
  const data = createAsync(() => getData());
  return <main>{data()}</main>;
}

import { createAsync, cache } from "@solidjs/router";

const getData = cache(async () => {
  "use server";
  const response = await fetch(
    "http://localhost:5000/api/items?" +
      new URLSearchParams({
        type: "11",
        min: "0",
        max: "1000000",
        polygon:
          "29.00743125000136 59.284420699563725, 13.36290000000119 59.284420699563725, -2.2816312499989806 59.284420699563725, -2.2816312499989806 32.5773969429995, 13.36290000000119 32.5773969429995, 29.00743125000136 32.5773969429995, 29.00743125000136 59.284420699563725",
        polygon2: "",
        itemSort: "new",
      })
  );
  const res = await response.json();
  return res;
}, "users");

export const route = {
  load: () => getData(),
};

export default function Home() {
  const data = createAsync(() => getData());
  return <main>{data()}</main>;
}

but instead of getting the rows from the DB, in <main>{data()}</main> I get: "undefinedundefinedundefinedundefinedundefined" In the api, I limited the rows to be returned to 5. So it seems it is giving me the right amount of results, but they are all undefined. Do you know why?

11 replies

SSolidJS

•Created by ali on 8/20/2023 in #support

noUiSlider rerenders when moving slider

I made it work with the help of chat gpt, lol. In case anybody is interested in the solution it looks like this:

import { createSignal, onCleanup, onMount } from "solid-js";
import noUiSlider from "nouislider";
import "./nouislider.css";

function DualSlider() {
    const [sliderValues, setSliderValues] = createSignal<[number, number]>([
        25, 75,
    ]);

    const sliderRef = (element: HTMLElement | null) => {
        if (element) {
            onMount(() => {
                noUiSlider.create(element, {
                    start: sliderValues(),
                    range: {
                        min: 0,
                        max: 100,
                    },
                    step: 1,
                    connect: true,
                });

                element.noUiSlider.on("update", (values) => {
                    const newValues = values.map((value) =>
                        parseFloat(value)
                    ) as [number, number];
                    setSliderValues(newValues);
                });
            });

            onCleanup(() => {
                element.noUiSlider.destroy();
            });
        }
    };

    return (
        <div class="slider">
            <div id="dual-knob-slider" ref={sliderRef}></div>
            <p>
                Slider Values: {sliderValues()[0]} - {sliderValues()[1]}
            </p>
        </div>
    );
}

export default DualSlider;

import { createSignal, onCleanup, onMount } from "solid-js";
import noUiSlider from "nouislider";
import "./nouislider.css";

function DualSlider() {
    const [sliderValues, setSliderValues] = createSignal<[number, number]>([
        25, 75,
    ]);

    const sliderRef = (element: HTMLElement | null) => {
        if (element) {
            onMount(() => {
                noUiSlider.create(element, {
                    start: sliderValues(),
                    range: {
                        min: 0,
                        max: 100,
                    },
                    step: 1,
                    connect: true,
                });

                element.noUiSlider.on("update", (values) => {
                    const newValues = values.map((value) =>
                        parseFloat(value)
                    ) as [number, number];
                    setSliderValues(newValues);
                });
            });

            onCleanup(() => {
                element.noUiSlider.destroy();
            });
        }
    };

    return (
        <div class="slider">
            <div id="dual-knob-slider" ref={sliderRef}></div>
            <p>
                Slider Values: {sliderValues()[0]} - {sliderValues()[1]}
            </p>
        </div>
    );
}

export default DualSlider;

4 replies

SSolidJS

•Created by ali on 8/15/2023 in #support

SVG images cannot use css variable as fill, they can only use rgb colors

im gonna have to take a closer look into this. Thanks a lot!

4 replies

SSolidJS

•Created by ali on 8/15/2023 in #support

SVG images cannot use css variable as fill, they can only use rgb colors

im still gonna be able to programmatically change the value of the variable right?

4 replies

SSolidJS

•Created by ali on 8/15/2023 in #support

SVG images cannot use css variable as fill, they can only use rgb colors

yes! i does take on the color!

4 replies

Gaming

Programming