SolidJS•6d ago

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 ❤️

5 Replies

Madaxen86•6d ago

The load function is just there to load the data you need into the cache. In your component you just use createAsync and call the cached getOverviewData. You can use the useUrlSearchParams before createAsync to get the userId. It will then load the data automatically from the cache. Here‘s the example from the docs https://docs.solidjs.com/solid-router/reference/data-apis/cache

var•6d ago

So you're saying I shouldn't use the load function? Ah I think I get it now. So there's not really a built in way to re-run the load function for a route, I just need to call the function returned from cache again manually...I think?

Madaxen86•6d ago

Use the load function as you did. And in the Dashboard component const [search, setSearch] = useSearchParams(); const data = createAsync(()=>getOverviewData(search.user);

var•6d ago

Ahhh I see So no need to use props.data bascially And just use use the fn directly Got it, I'll try this. Thank you!!

Madaxen86•6d ago

:start: 👍

Gaming

Programming

Struggling with load function and cache revaliation