1

Say i have a parent component (called Wrapper) that is a QueryRenderer that just fetches: 

query productQuery {
   product {
      id
      name
   }
}

and then i have a QueryRenderer (that renders a component called Inner) that renders the following query:

query productInnerQuery {
   product {
      id
   }
}

what happens is that inside the outer component Wrapper gets subscribed to updates on product, causing it to rerenders with the productInnerQuery (name is undefined) when the page loads since that component loads on mount. what can i do so that this doesnt happen and that the the outer queryrenderer doesn't get affected by the inner one?

nyi
  • 3,123
  • 4
  • 22
  • 45
jouerai
  • 135
  • 9
  • If I'm not wrong, the re-render is caused by the store updating the record corresponding to the `product.id`. I don't know your exact use case but I believe you could: 1. refactor your hierarchy to use createRefetchContainer or 2. try aliasing your product in one of the queries. `innerProduct: product { id }`. Personally I'd go for #1 and #2 is just a guess – hisa_py Apr 04 '18 at 14:19
  • hey @hisa_py maybe you can help me out! im currently trying to refactor and use createRefetchContainer, but I'm coming into some barriers: https://stackoverflow.com/questions/49647295/refetch-method-for-createrefetchcontainer-doesnt-execute-callback – jouerai Apr 04 '18 at 14:40

1 Answers1

0

Please see: https://github.com/facebook/relay/issues/1843#issuecomment-378299074

Essentially:

I recommend avoiding QueryRenderer inside QueryRenderer, the top one will rerender the below one in the tree causing another fetch

jouerai
  • 135
  • 9