0

I am using Relay modern and I have preloaded query and I want to call the usePreloadedQuery hook in a grandchild/great-grandchild of the component where the query is initially loaded. In the documentation they are passing down the queryReference from the parent to the child. Is there a way to avoid having to pass down the queryReference through the entire parent child hierarchy?

I could possibly use React Context to do this but I am looking for a pure relay based solution.

Right now my only option is to use the useLazyLoadQuery hook in the grandchild component which is not ideal.

This is a related question Access Relay state without passing down props but even in the recommended approach we need to pass the fragmentRef down as props through the entire hierarchy.

avocado
  • 79
  • 9

1 Answers1

0

Relay is built to work in tandem with React not replace it. I don't see any problem with passing a query reference through React context. Context is simply an implicit way of passing state to children that avoids prop drilling.

Jordan Eldredge
  • 1,587
  • 1
  • 19
  • 25
  • Sure, but since we already have a Relay store which ideally should be globally available then why do we have use Context? Shouldn't there be a way to get access to relevant data from the store directly instead of passing it as a prop? – avocado Jun 09 '22 at 19:23
  • 1
    Just because you have access to the store does not mean that you've preloaded the query. The query reference is the static (type-checked) proof that you've initiated the query. Additionally the queryReference contains information about which variables you used to fetch the query. You might have fetched that query multiple times with different variables. Without the query reference, Relay would not know which variables you were trying to use when reading the data. – Jordan Eldredge Jun 11 '22 at 02:48