Best practice for getting ledger state in multiple nested react components

Questions
1

Suppose I have a tempalte Foo and to react components Outer and Inner, where Inner is a child of Outer. If I need useStreamQueries(Foo) in both Outer and Inner, is there an advantage to passing the result as a prop from Outer to Inner, or is it just as good to call useStreamQueries a second time in Inner?

I’m mostly interested in whether the second option will generate double the traffic over websockets.

1 Like
2

The second option will generate 2 websockets connections and at the moment also 2 transaction streams to the legder so I’d definitely recommend passing the data down instead of querying the same data multiple times.

2 Likes
3

How would I do that in typescript? The query result has type QueryResult<Foo, Foo.Key, "FoosTemplateId">. How do I get my hands on “FoosTempalteId” to declare the type of the props of Inner?

1 Like
4

Here’s an example. We should add a helper User.User.QueryResult similarly to how we have User.User.CreateEvent. While the solution here works it looks a bit awkward:

  const allUser: QueryResult<User.User, User.User.Key, typeof User.User.templateId> = useStreamQueries(User.User);
  const allUserContracts: readonly User.User.CreateEvent[] = useStreamQueries(User.User).contracts;
2 Likes
5

Ahh, it was the typeof magic I was missing, thanks. The helper would indeed be nice.

1 Like