anthy Posts - Answer Overflow

anthy

•Created by anthy on 2/20/2025 in #support

"Simulating" loading state with createAsync

Here's a very simplified example what I'm trying to achieve:

import { createAsync, query } from '@solidjs/router';
import { Suspense } from 'solid-js';

function DataDisplayer(props: { data: string | undefined }) {
  return <div>{props.data ?? 'Data still loading'}</div>;
}

const getData = query(async (): Promise<{ data: string }> => {
  return await new Promise((resolve) => {
    setTimeout(() => {
      resolve({ data: 'hello' });
    }, 1000);
  });
}, 'getData');

export default function Home() {
  const data = createAsync(() => getData());

  return (
    <main>
      <Suspense fallback="Loading">{Boolean(data())}</Suspense>
      <DataDisplayer data={data()?.data} />
    </main>
  );
}

import { createAsync, query } from '@solidjs/router';
import { Suspense } from 'solid-js';

function DataDisplayer(props: { data: string | undefined }) {
  return <div>{props.data ?? 'Data still loading'}</div>;
}

const getData = query(async (): Promise<{ data: string }> => {
  return await new Promise((resolve) => {
    setTimeout(() => {
      resolve({ data: 'hello' });
    }, 1000);
  });
}, 'getData');

export default function Home() {
  const data = createAsync(() => getData());

  return (
    <main>
      <Suspense fallback="Loading">{Boolean(data())}</Suspense>
      <DataDisplayer data={data()?.data} />
    </main>
  );
}

In my real application the <DataDisplayer /> is a table that I want always rendered and I don't want to enclose it in a <Suspense />. If I were using createResource I would just use .loading. I found this hacky way of using Suspense, but it is pretty dirty. Is there any better way I can do what I want to do?

6 replies

SSolidJS

•Created by anthy on 2/14/2025 in #support

Initial search params

Is there a way to set initial search parameters for a route? I'm building an application where users are able to save their table sorting/filters into local storage and the next time they visit the page, those are automatically populated to the search params.

function Route() {
  const defaultParams = getDefaultParamsFromStorage();
  // ???
  const [searchParams] = useSearchParams();
  const data = createAsync(() => getData(searchParams));

  return <div>{data()}</div>
}

function Route() {
  const defaultParams = getDefaultParamsFromStorage();
  // ???
  const [searchParams] = useSearchParams();
  const data = createAsync(() => getData(searchParams));

  return <div>{data()}</div>
}

I have tried some approaches all of them are either flawed or don't work.

function Route() {
  const defaultParams = getDefaultParamsFromStorage();
  window.location.replaceState(null, "", "?" + params)
  const [searchParams] = useSearchParams();
  const data = createAsync(() => getData(searchParams));

  return <div>{data()}</div>
}

function Route() {
  const defaultParams = getDefaultParamsFromStorage();
  window.location.replaceState(null, "", "?" + params)
  const [searchParams] = useSearchParams();
  const data = createAsync(() => getData(searchParams));

  return <div>{data()}</div>
}

Doesn't seem to work (which as a side note seems odd to me that useSearchParams doesn't get the initial state from the URL?)

function Route() {
  const defaultParams = getDefaultParamsFromStorage();
  const [searchParams, setSearchParams] = useSearchParams();
  setSearchParams(defaultParams);
  const data = createAsync(() => getData(searchParams));

  return <div>{data()}</div>
}

function Route() {
  const defaultParams = getDefaultParamsFromStorage();
  const [searchParams, setSearchParams] = useSearchParams();
  setSearchParams(defaultParams);
  const data = createAsync(() => getData(searchParams));

  return <div>{data()}</div>
}

This one does work but causes data to be fetched twice. Is that even possible or does anyone have any suggestions how to work around it? Router 0.15.3 Solid 1.9.4

6 replies

SSolidJS

•Created by anthy on 10/11/2024 in #support

How to use `cache.set`?

Tried as in the playground but that doesnt seem to do anything - https://playground.solidjs.com/anonymous/f7508168-0c32-46a0-8f3d-9731ce03d6e1

1 replies

SSolidJS

•Created by anthy on 10/10/2024 in #support

Input type="reset" clears out wrapped inputs

If the native input element is wrapped in a solid component, <input type="reset" /> does not reset it back to its initial value but clears it out. https://playground.solidjs.com/anonymous/0a32e8f4-fab8-4583-a9a0-32e73e0a837a

8 replies

SSolidJS

•Created by anthy on 9/9/2024 in #support

Retrigger fetcher in createResource on store change

https://playground.solidjs.com/anonymous/52b7a9be-3fe1-406a-8941-a3d0a4959bfe As in the example, if the source argument is the whole store the fetcher in createResource wont run. How can I make it re-run if any of the store's values change

6 replies

SSolidJS

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

Inconsistent prop logging between playground and local setup

When I run this code in the playground https://playground.solidjs.com/anonymous/4f22d50d-c034-42c4-8bc5-4b643a06731d the console logs:

Receiver
{staticProp: 'Hello', message: 'Hello'}

Receiver
{staticProp: 'Hello', message: 'Hello'}

Which is correct. But when I run the same exact code with vite from a local setup it prints:

Receiver
{staticProp: 'Hello'}

Receiver
{staticProp: 'Hello'}

Why is that? Using Solid 1.8.22

3 replies

SSolidJS

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

How to use preloaded data

The solid router docs do not give any example on how to use the data returned from the preload function - https://github.com/solidjs/solid-router?tab=readme-ov-file#preload-functions I don't want to use any wrappers such as cache. In the preload function I'm just doing a fetch call. I access the data as a component prop. It comes as a promise. How do I display that data in the component?

23 replies

SSolidJS

•Created by anthy on 2/20/2024 in #support

How do I use solid router in the solid playground?

I added solid router to the importmap, but whenever trying to import something it says “Cannot find module ‘@solidjs/router’ or it’s corresponding type declarations”

10 replies

SSolidJS

•Created by anthy on 2/24/2023 in #support

Is it possible to have generic children for a generic component?

I'm trying to create a type-safe form, with a generic component. I pass a generic type argument to the parent component and I want it's children to derive that generic type. Here's my attempt:

import { render } from "solid-js/web";
import { children, Component, JSX } from "solid-js";

interface MyForm {
  firstName: string;
  lastName: string;
  age: number;
}

function Input<T extends { name: string }>(props: T) {
  return <input name={props.name} />
}

function Form<T>(props: { children: Component<{ name: keyof T }>[] }) {
    // I'm a beginner, I'm not sure if I'm using this helper correctly, but let's not focus on that
    const c = children(() => props.children.map(child => child())); // child is not a function

    return (
        <form>
          {c()}
        </form>
    );
}

function Example() {
  return (
    <Form<MyForm>>
      <Input name="firstName" /> {/* OK */}
      <Input name="qwe" /> {/* error! */}
    </Form>
  );
}

render(() => <Example />, document.getElementById("app")!);

import { render } from "solid-js/web";
import { children, Component, JSX } from "solid-js";

interface MyForm {
  firstName: string;
  lastName: string;
  age: number;
}

function Input<T extends { name: string }>(props: T) {
  return <input name={props.name} />
}

function Form<T>(props: { children: Component<{ name: keyof T }>[] }) {
    // I'm a beginner, I'm not sure if I'm using this helper correctly, but let's not focus on that
    const c = children(() => props.children.map(child => child())); // child is not a function

    return (
        <form>
          {c()}
        </form>
    );
}

function Example() {
  return (
    <Form<MyForm>>
      <Input name="firstName" /> {/* OK */}
      <Input name="qwe" /> {/* error! */}
    </Form>
  );
}

render(() => <Example />, document.getElementById("app")!);

Form is a generic component that receives MyForm type parameter and should only accept such children which name props of are keys of MyForm. The above code errors out in few places. I know that traditionally children should be of type JSX.Element but Elements are not callable. I remember having issues trying to do that in React, I'm not sure if it's possible

19 replies

Gaming

Programming