communicating between client and server components through serverProps

[pannagger]

Hi all,
in an older Version I user setServerState, since this is gone I want to use the useServerProps hook to trigger a rerender of the server by the client, like described here:
Shopify/hydrogen#881
Additionally I found an example which is exactly that what I want to do:
https://shopify.dev/custom-storefronts/hydrogen/framework/server-props
I want to trigger a shopQuery by a client selector, however I do not know how to access the set server props, I do it mainly the same as in the example, my server component looks like:

and my client components does the setServerProps:

As expected the prop is set but I do not know how to access it in the server, the server console looks like:

Can someone help me with that?
The only difference to the example is that I do not use the useShopQuery yet.

Kind regards,
Philip

[pannagger]

okay fixed it

[ramiroazar]

How did you fix this, @pannagger?

I created an issue a while back and referenced this discussion.

Shopify/hydrogen#2077

[pannagger]

Hi,

when you set a server prop using setServerProps in a client component this prop is only set on the highest server component, in my cast it was index.server.tsx of this route. Giving this component the prop like described in the tutorial and like I set it on the client, sets the value for this prop accordingly.
Let me know if you need any more clarification.

[ramiroazar]

Hey, thank you.

Yeah, I noticed that as well, still not sure if that's intended behaviour.

Have you played around with the useRequestContext hook?

https://shopify.dev/api/hydrogen/hooks/framework/userequestcontext

I found it can be used to share the serverProps from route components with any nested server components, with the caveat that it's currently an experimental feature.

[pannagger]

Would be interesting if it is intended.
Did not used this hook, since I want to prevent using experimental features to bring the shop online and low on maintenance. But it sounds like a pretty useful hook.