var Posts - Answer Overflow

var

•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