exotic-emerald

how come Route context becomes serialized objects on hydration

I notice in my component that class instances I've added to a route's context via beforeLoad are no longer the instances on initial render on the client. It seems odd. I expect that from the output of loader but not for beforeLoad. Is my assumption incorrect that the merged values into the context via beforeLoad would be the actual objects? ``` const { myInstance } = useRouteContext(); console.log(myInstance.hello()); // error "hello" is not a function ... beforeLoad: () => { return { myInstance: new Hello(), }; }

14 Replies

blank-aquamarine•5mo ago

everything you return from beforeLoad will be serialized and sent to the client if you dont want that, use the context() function, whose return values wont be serialized nor sent to the client, but instead that function will execute again on the client upon hydration

exotic-emeraldOP•5mo ago

that sounds like exactly what I need! i'm not having any luck finding the docs on a context() function though

blank-aquamarine•5mo ago

yeah not documented yet sorry we'll do a major doc update once we are approaching stable

exotic-emeraldOP•5mo ago

oh! but i do see it. so it's alongside beforeLoad when defining the route. if that's right, this is great

blank-aquamarine•5mo ago

yeah the order is: context() => beforeLoad () => loader() so whatever your return from context will be available in beforeLoad

exotic-emeraldOP•5mo ago

should it work this way or am I misunderstanding something:

const { myInstance } = useRouteContext();

console.log(myInstance.hello()); // error "hello" is not a function

// this will executed on the client
context: () => {
  return {
    myInstance: new Hello(),
  };
}

const { myInstance } = useRouteContext();

console.log(myInstance.hello()); // error "hello" is not a function

// this will executed on the client
context: () => {
  return {
    myInstance: new Hello(),
  };
}

blank-aquamarine•5mo ago

where is the console log happening?

exotic-emeraldOP•5mo ago

const MyComponent = () => {
  const { myInstance } = useRouteContext();

  // expect myInstance to be of Hello
  
  return null;
}

const Route = createFileRoute()({
  // this will executed on the client
  context: () => {
    return {
      myInstance: new Hello(),
    };
  }
});

const MyComponent = () => {
  const { myInstance } = useRouteContext();

  // expect myInstance to be of Hello
  
  return null;
}

const Route = createFileRoute()({
  // this will executed on the client
  context: () => {
    return {
      myInstance: new Hello(),
    };
  }
});

this is the structure, i guess i'm just wondering if i'm understanding correctly

blank-aquamarine•5mo ago

yes does it not work? i mean you should either use Route.useRouteContext() or specify the proper from value but aside from that, this is how it should work

exotic-emeraldOP•5mo ago

ok gotcha! yes, I was able to get it to work

blank-aquamarine•5mo ago

great

exotic-emeraldOP•5mo ago

I'm wondering about something - with beforeLoad the function can be async and that merged context is returned as resolved in my component but if I try context: async () => { // create context } it is not and instead the return value is the promise. is that expected and is there a way to receive the resolved context instead? i've tried a few things such as accessing through the beforeLoad and loader functions but not really getting a resolved context in the component. is there a prescribed way to have an context: async () => ?

blank-aquamarine•5mo ago

what do you mean? ah context must be synchronous

exotic-emeraldOP•5mo ago

hm. ok i'll just try to work around it. ty!

Gaming

Programming

how come Route context becomes serialized objects on hydration

Did you find this page helpful?