2

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.

jackweath
  • 158
  • 1
  • 8
  • 1
    You should move the refetch container up. Relay containers act like HOCs (so really just another React component), so you should not expect a container to cause side-effects in sibling containers. Doing so is likely possible, but imho it won't be semantic, and will be very ugly. – Matthew Herbst Sep 18 '18 at 02:13

0 Answers0