Is there a way to use TRPC React Query Integration with Nanostores instead of the Context API?
Currently we use TRPC by wrapping out application in a TRPC context provider. However, in some use cases, such as an Astro App, we don't want to wrap our entire app in a React Context. A common solution is to share state between Astro islands using nanostores (https://docs.astro.build/en/recipes/sharing-state/). I wanted to know if there is any way to share the TRPCReact client between Astro components using nano stores, without needing to use a React Context Provider.
We can already share the React Query client between components using nanostores by passing the client as a parameter to the useQuery function. However, I could not find an option to pass the trpc client in the same way. I would greatly appreciate any help on this.
2 Replies
Right now I am wrapping each of my React Islands in a separate context provider. I don't think that's scalable.
I have been doing this with the Higher Order Component pattern. Same deal, TRPC and Astro.
I define my component, then do a:
at the bottom. Your HOC may look different to mine, but it's a pretty well documented pattern.
You could use TRPC in your component(s) to load data into your nanostore (what you're probably already doing).
Nano says you should move logic into stores (I agree) and you could do that with just the vanilla js/ts client rather than the react client.