Global query store

[yonathan06]

Using createResource, and thanks to Solid architecture, I find it easy to create a global query store: a shared query resource, that is only fetched once, and used across multiple components without refetching on each component.
I took the inspiration from react-query only without the revalidation (can be added using refetch on specific conditions)
Example below

import { render } from "solid-js/web";
import { createResource, Show, createSignal } from "solid-js";

let getUsers;
function queryGetUsers() {
  if (!getUsers) getUsers = createResource("users", () => {
    return new Promise((resolve) => {
      console.log("Getting users");
      setTimeout(() => {
        resolve([ { id: 123 } ]);
      }, 1500);
    })
  });
  return getUsers;
}

function ShowUsers() {
  const [users] = queryGetUsers();

  return (
    <Show when={!users.loading} fallback={"Loading..."}>
      {users()}
    </Show>
  );
}

function App() {
  const [showThird, setShowThird] = createSignal(false);
  setTimeout(() => { setShowThird(true) }, 2000);
  return <>
    <ShowUsers />
    <ShowUsers />
    <Show when={showThird()} fallback={"Loading third..."}>
      <ShowUsers />
    </Show>
  </>
}

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

Getting users is logged only once.

are there any caveats to this approach?

[ryansolid]

You are better to do the caching inside the fetcher rather than the resource creation. You can just return the cached value instead of the promise. Resources internally have an effect(more or less) that will get released (stop reacting) once the first component used this way gets unmounted. It would be more like React Query if each location made its own resource but read from the same cache.

If you really wanted to share the resource you are probably better off using Context for this one. If the resource is first fetched in a parent your approach would be fine too, but something to be aware of.

[yonathan06]

If the resource is made in a context provider dynamically, it will stay alive as long the context provider is mounted?

[sgtpep]

Interested in a global query store solution, too. Implemented it with the caching inside the fetcher, as suggested.

Any chance SolidJS will get some ready-to-use primitive for global queries sometime in the future?

[yonathan06]

I created a lib for that, inspired by react-query: https://github.com/yonathan06/solid-cached-resource