Is it possible to update the props of a component by calling refetch
from a sibling component?
Consider components with the following structure:
<Home> # wrapped in a QueryRenderer
<List /> # wrapped in a Fragment Container
<Map /> # wrapped in a Refetch Container
</Home>
List
and Map
use the same query endpoint: allItems
.
When Map
calls refetch
, it's own data updates, List
's data does not update, however.
The refetch query is identical to the Home
's QueryRenderer
query. It appears that Relay does not map the result of the refetch to the parts of the store that hold the data for List
, as List
's props do not change.
Is it possible for a refetch to update props outside of component the Refetch Container contains? If not, how can changes in one component fire a refetch and update the props of a sibling component without moving the refetch container to a higher level - unless this is the only way?
For some more context, I've included some code to illustrate the structure and queries more clearly.
Using Relay, suppose we have a parent component wrapped in a QueryRenderer
to perform an initial data fetch.
<QueryRenderer
environment={environment}
query={graphql`
query HomeQuery {
...List_query
...Map_query
}
`}
render={({ error, props }) => {
if (error) {
console.log(error)
return <div>Error!</div>
}
if (!props) {
return <div>Loading...</div>
}
return (
<div>
<List query={props} />
<Map query={props} />
</div>
)
}}
/>
Both List
and Map
contain fragments. List
is wrapped with a Fragment Container:
createFragmentContainer(List, {
query: graphql`
fragment List_query on Query {
allItems(first: 10) @connection(key: "Map_allItems") {
edges {
node {
id
name
}
}
}
}
`
})
Whereas the Map
is wrapped in a Refetch Container:
createRefetchContainer(
Map,
{
query: graphql`
fragment Map_query on Query {
allItems(first: 10) @connection( key: "Map_allItems") {
edges {
node {
id
name
created
}
}
}
}
`
},
graphql`
query MapRefetchQuery {
...Map_query
...List_query
}
`
)
The code has been reduced, so may have a typo in it! Let me know if this is the case, and I'll update it.