SolidJSS
SolidJS•2y ago•
9 replies
ChrisThornham

Is My Understanding Of RouteSectionProps Correct?

I’ve been trying to implement the cache, load, and createAsync pattern on all of my pages that load data.

My goal is to load data on hover before navigating to the page.

When the cache function does not need a route parameter, this pattern works as expected.

BUT, I struggled to get this pattern working when I needed to pass my cache function a route param.

After reading through the docs, I "thought" that I should use the useParams() primitive to get the route params, then pass that route param to the function inside of createAsync().

That didn't work.

I dug through the HackerNews example and noticed the use of RouteSectionProps.

With RouteSectionProps it does work.

So... I want to make sure I understand WHY these two examples differ.

When using useParams() I'm guessing that you only get access to the route params AFTER the component loads... meaning the params aren't available on hover.

But, when using RouteSectionProps it appears that you get access to the route params BEFORE the component loads... which is why load on hover works.


Am I correct?

Here's my final implementation. 

const getUser = cache(async (email: string): Promise<User> => {
  "use server";
  const { data, error } = await supabase
    .from("users")
    .select()
    .eq("customer_email", email)
    .single();

  if (error) {
    console.log(error.message);
    throw error;
  }

  return data as User;
}, "user");

export const route: RouteDefinition = {
  load({ params }) {
    void getUser(params.email);
  },
};

export default function UserDetailsPage(props: RouteSectionProps) {
  const user = createAsync(() => getUser(props.params.email));
  ...
}
Was this page helpful?