var Posts - Answer Overflow

var

•Created by var on 7/23/2024 in #support

Binding events in a typesafe way with typescript?

I'm following the binding events (https://docs.solidjs.com/concepts/components/event-handlers#binding-events) section of the docs so solid can optimize my event handlers, but I'm not able to do this in a typesafe way. For example:

function square(number: number, event: Event) {
  const squaredNumber = number * number;
  console.log(`${number} squared is ${squaredNumber}`);
}

// no type error here, which I would expect since I'm passing a string as an argument that should be a number:
const Example = () => (
  <button onClick={[square, "not a number"]}>click here</button>  
);

function square(number: number, event: Event) {
  const squaredNumber = number * number;
  console.log(`${number} squared is ${squaredNumber}`);
}

// no type error here, which I would expect since I'm passing a string as an argument that should be a number:
const Example = () => (
  <button onClick={[square, "not a number"]}>click here</button>  
);

Is there any way to take advantage of Solid's event binding pattern while still retaining typesaftey?

1 replies

SSolidJS

•Created by var on 6/27/2024 in #support

Struggling with load function and cache revaliation

Hey All, I'm new to solid and am struggling with getting cache revalidation to work with a load function. I've tried to follow the docs as closely as I can, but my load function (and subsequent network request) never seems to get called again. I'm trying to build a basic component that will refetch data filtered based on a selection the user makes:

function Dashboard(props) {
  const data = createAsync(() => props.data);

  return (
        <select
          onChange={(event) => {
            const queryParams = new URLSearchParams(window.location.search);
            queryParams.set("user", event.target.value);
            history.replaceState(null, "", "?" + queryParams.toString());
            revalidate(); // revalidate(getOverviewData.key) also didn't seem to work
            revalidate();
          }}
        >
          <For each={data()?.users ?? []}>
            {(user) => {
              return <option value={user.id}>{user.name}</option>;
            }}
          </For>
        </select>
  );
}

function Dashboard(props) {
  const data = createAsync(() => props.data);

  return (
        <select
          onChange={(event) => {
            const queryParams = new URLSearchParams(window.location.search);
            queryParams.set("user", event.target.value);
            history.replaceState(null, "", "?" + queryParams.toString());
            revalidate(); // revalidate(getOverviewData.key) also didn't seem to work
            revalidate();
          }}
        >
          <For each={data()?.users ?? []}>
            {(user) => {
              return <option value={user.id}>{user.name}</option>;
            }}
          </For>
        </select>
  );
}

props.data comes from the load function for the component, which looks like this:

const getOverviewData = cache(async (userId) => {
  let url = `http://127.0.0.1:8000/overview/user=${userId}`;
  const response = await fetch(url);
  const data = await response.json();
  return data;
}, "dashboard");

function loadOverview(input) {
  const params = new URLSearchParams(input.location.search);
  return getOverviewData(params.get("user") ?? "");
}

// and is then used here in the route for the component
<Route path="/dashboard" component={Dashboard} load={loadOverview} />

const getOverviewData = cache(async (userId) => {
  let url = `http://127.0.0.1:8000/overview/user=${userId}`;
  const response = await fetch(url);
  const data = await response.json();
  return data;
}, "dashboard");

function loadOverview(input) {
  const params = new URLSearchParams(input.location.search);
  return getOverviewData(params.get("user") ?? "");
}

// and is then used here in the route for the component
<Route path="/dashboard" component={Dashboard} load={loadOverview} />

Any ideas on where I'm going wrong would be greatly appreciated ❤️

10 replies

Gaming

Programming