Feature request: Loaders

[mausworks]

Feature request: Loaders

[mausworks]

Thanks for a great feature request! ❤️

Data fetching is a concern that I want Tyin to be able to cover (without external libraries such as react-query), and I am working on a new plugin which will be found under tyin/plugin-sync in version 2.0.0! I'm currently experimenting with it in dott.bio and it's nearing a feature-complete and stable API.

I wanted to use a pattern that most developers are familiar with and landed in pseudo-git mechanics: pushing, pulling, and deleting. The mentality is that, just as with git, you push and pull your changes upstream or downstream—syncing your changes to the repository. This translates exceptionally well into the idea of stores/state containers.

With it, you will have request-deduplication and caching built straight into Tyin, and the setup is dead simple. I'll share a simple example from dott.bio:

import { PrivateProfile } from "@/utils/profile";
import extend from "tyin/extend";
import storeHook from "tyin/hook";
import objectAPI from "tyin/api/object";
import sync from "tyin/sync";
import { databaseAccess } from "./useDatabase";

const useUserProfile = extend(storeHook<PrivateProfile | null>(null))
  .with(objectAPI())
  .with(databaseAccess())
  .with((store) =>
    sync({
      pullOptions: { cacheDuration: 5000 },
      pull: async (sub: string | undefined | null) => {
        if (!sub) return null;

        return await store.db
          .from("Profile")
          .select("*, Socials:Social(*), Links:Link(*)")
          .eq("sub", sub)
          .order("order", { referencedTable: "Link", ascending: true })
          .order("order", { referencedTable: "Social", ascending: true })
          .then(({ data }) => data?.at(0) ?? null);
      },
    })
  )
  .seal();

export default useUserProfile;

To automatically pull the state, you can use the usePull hook, provided by the same module:

import usePull from "tyin/sync/usePull";
import useUserProfile from "@/stores/useUserProfile";
import useCurrentUser from "@/stores/useCurrentUser";

export default function UserProfilePage() {
  const user = useCurrentUser();
  const { error, status, state: profile } = usePull(useUserProfile, user?.sub);

  return null;
}

You can also provide push and delete functions when setting up the sync API, though there is no hook that helps with it directly. I'll provide a PR later tonight, and I would love your feedback! ❤️

[tengl]

I looked at the PR #10 and it looked great. Just a few comments, but nothing big.