ali Posts - Answer Overflow

ali

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

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

Hello everyone, I have a question about fetching data. I want to fetch data from an api and send html based on what I fetch.

import { createResource } from "solid-js";

const fetchData = 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();
  console.log(res);
  return res;
};

export default function Home() {
  const data = createResource(fetchData);
  console.log(data);

  return <main>{data.toString()}</main>;
}

import { createResource } from "solid-js";

const fetchData = 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();
  console.log(res);
  return res;
};

export default function Home() {
  const data = createResource(fetchData);
  console.log(data);

  return <main>{data.toString()}</main>;
}

The way I have it set up now results in the console.log(res); in the async fetchData function giving me the correct result, but the console.log(data); returns this:

[
  [Function: read] { loading: true, error: undefined, state: 'pending' },
  { refetch: [Function: load], mutate: [Function: mutate] }
]

[
  [Function: read] { loading: true, error: undefined, state: 'pending' },
  { refetch: [Function: load], mutate: [Function: mutate] }
]

Question: How do I make the sending of the html to the frontend wait until the async function has completed What I have tried: I have already tried to make the function Home() async. This resulted in the whole component not rendering. Help would be appreciated!

11 replies

SSolidJS

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

noUiSlider rerenders when moving slider

Hello, I have an issue with noUiSlider(https://refreshless.com/nouislider/) i want to make a slider with 2 knobs. Everytime i move a knob on the slider, i get the following error message in the console. Uncaught Error: noUiSlider: Slider was already initialized. the code looks like this

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

function Slider() {
    const [sliderValue, setSliderValue] = createSignal<[number, number]>([
        20, 80,
    ]);
    let sliderContainer: HTMLDivElement | null = null;

    // Initialize the slider when the component mounts
    createEffect(() => {
        if (sliderContainer) {
            noUiSlider.create(sliderContainer, {
                start: sliderValue(),
                connect: true,
                range: {
                    min: 0,
                    max: 100,
                },
            });

            // Update sliderValue state when the slider changes
            sliderContainer.noUiSlider.on("update", (values: string[]) => {
                setSliderValue([parseFloat(values[0]), parseFloat(values[1])]);
            });
        }

        return () => {
            if (sliderContainer) {
                sliderContainer.noUiSlider.destroy();
            }
        };
    });

    return (
        <div class="slider">
            <div ref={(el) => (sliderContainer = el)}></div>
            <p>
                Slider Values: {sliderValue()[0]} - {sliderValue()[1]}
            </p>
        </div>
    );
}

export default Slider;

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

function Slider() {
    const [sliderValue, setSliderValue] = createSignal<[number, number]>([
        20, 80,
    ]);
    let sliderContainer: HTMLDivElement | null = null;

    // Initialize the slider when the component mounts
    createEffect(() => {
        if (sliderContainer) {
            noUiSlider.create(sliderContainer, {
                start: sliderValue(),
                connect: true,
                range: {
                    min: 0,
                    max: 100,
                },
            });

            // Update sliderValue state when the slider changes
            sliderContainer.noUiSlider.on("update", (values: string[]) => {
                setSliderValue([parseFloat(values[0]), parseFloat(values[1])]);
            });
        }

        return () => {
            if (sliderContainer) {
                sliderContainer.noUiSlider.destroy();
            }
        };
    });

    return (
        <div class="slider">
            <div ref={(el) => (sliderContainer = el)}></div>
            <p>
                Slider Values: {sliderValue()[0]} - {sliderValue()[1]}
            </p>
        </div>
    );
}

export default Slider;

Any idea what is wrong? Much appreciated.

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

SVG images can have a fill value in them, like so: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xmlns:v="https://vecta.io/nano"><path d="M26.528 82.964a7.14 7.14 0 0 0 2.113 5.063l.332.331c2.824 2.367 7.013 2.22 9.665-.44l32.78-32.878a7.15 7.15 0 0 0-.015-10.133l-32.879-32.78a7.15 7.15 0 0 0-9.329-.68l-.645.647c-2.612 2.62-2.781 6.724-.516 9.539L51.401 44.93a7.15 7.15 0 0 1 .015 10.133L28.361 78.187c-1.22 1.363-1.837 3.068-1.835 4.778z" fill="var(--bg-hover)"/></svg> In this case, the fill value is a css variable called --bg-hover. It is a medium gray color. This SVG image is not displayed as gray though, it is displayed as pitch black. If I use an rgb value instead (like fill="#7d7d7d") then it works normally. This only happens in SolidJS for me. If anyone knows a solution to this problem, I'd be very happy!

4 replies

Gaming

Programming