Nitro Query - A Tanstack Query Alternative With State Management Built-In

A lightweight, TypeScript-first data-fetching and caching library for React inspired by TanStack Query that combines query/mutation handling with built-in state management. It offers:

• declarative caching and background refetching
• optimistic updates with rollback
• simple cache invalidation and query keys
• SSR/hydration support

...and a small reactive-friendly API designed for easy integration and debugging (devtools-friendly).

Example:

function App() {
  const ex = atom(0);
  const reactiveEx = useAtom(ex);
  const automaticallyReactive = useStore(0);
  const { data, loading, error, mutate } = useMutation("data", {
    async fn() {
      await new Promise((r) => setTimeout(r, 5000));
      return await Promise.resolve("Hello!");
    },
  });

  useEffect(() => {
    mutate();
  }, []);

  return (
    <div>
      <h1>Nitro Query Example</h1>
      <p>
        Querying data... {loading ? "loading" : "done"}
      </p>
      <p>
        Query data: {data}
      </p>
      <p>
        Query error: {error ? error.message : "none"}
      </p>
      <p>
        Reactive ex value: {reactiveEx.value}
      </p>
      <p>
        Automatically reactive value: {automaticallyReactive.value}
      </p>
    </div>
  );
}

export default App;