Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/add fetch and prefetch to solid #288

Conversation

johann-crabnebula
Copy link

@johann-crabnebula johann-crabnebula commented Jun 24, 2024

This PR adds functions to fetch and prefetch via the rspc-client in the solid-package.

The problem we had at CrabNebula Cloud was that we could not fetch or prefetch via the @rspc-solid package. At least not without creating a new observer every time. This PR opens a potential option.

We agreed to go for the same useUtils style that @solid-mediakit/trpc is using.

const utils = directory.useUtils();

utils
  .fetchQuery(["orgs.list"])
  .then(orgs => {
      return queryUtils.prefetchQuery(["invitations.listByOrg", orgs]);
  });

At the moment only prefetchQuery and fetchQuery are implemented.

@Brendonovich
Copy link
Collaborator

Brendonovich commented Jun 24, 2024

Another approach for supporting prefetching would be something like useUtils from trpc (which I'd prefer).
I assume you're prefetching in solid router's load functions? This approach would allow you to do something like this (assuming the router is wrapped with rspc's provider)

function load() {
  rspc.useUtils().prefetchQuery(["some.key"])
}

And your example could be

const rspcUtils = rspc.useUtils();
rspcUtils
  .fetchQuery(["your-query-key", { param: test }])
  .then((result) =>
    rspcUtils.prefetchQuery(["your-query-key-2", { param: request1Result }]),
  );

The utils object would basically be a typesafe wrapper around all of the QueryClient's functions. Whether you consume them inside a createResource or an event handler or a load function would be up to you.

@johann-crabnebula
Copy link
Author

I see... That was also the direction @oscartbeaumont was pointing in I think. Totally didn't get it the first time around.

Will have a look at the implementation from trpc.

@johann-crabnebula
Copy link
Author

Made another attempt looks more like this now:

const queryUtils = directory.createQueryUtils();

queryUtils
  .fetchQuery(["orgs.list"])
  .then(orgs => {
	  const currentOrgId = orgs?.find(org => org.slug === params.orgSlug)?.id;
	  if (!currentOrgId) throw new Error("Could not find org");
	  console.log("prefetch org");
	  return queryUtils.prefetchQuery(["invitations.listByOrg", currentOrgId]);
  });

@johann-crabnebula
Copy link
Author

johann-crabnebula commented Jun 25, 2024

Updated the naming of the export to useUtils and updated the description.

@Brendonovich Brendonovich marked this pull request as ready for review June 25, 2024 06:53
@Brendonovich Brendonovich merged commit 31f9f90 into oscartbeaumont:v0.x Jun 25, 2024
0 of 2 checks passed
@johann-crabnebula johann-crabnebula deleted the feat/add-fetch-and-prefetch-to-solid branch June 25, 2024 06:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Prefetching
2 participants