Reputation: 1741
Is it possible to define that a relay container or a <Route/>
to always forceFetch when (or before) mounting?
I could do a this.props.relay.forceFetch()
in componentDidMount
, but it's kinda ugly + does two requests if it's an initial page load.
Upvotes: 3
Views: 1544
Reputation: 55
A more elegant solution is to use Relay.Renderer forceFetch
which will pull new data from server regardless of the current data state of the component.
It can be used with react-relay-router like in docs:
<Router
history={history}
routes={routes}
render={applyRouterMiddleware(useRelay)}
forceFetch={true}
environment={Relay.Store}
/>
Upvotes: 1
Reputation: 930
Define fragment like that:
export default Relay.createContainer(Component, {
initialVariables: { show: false },
fragments: {
viewer: (): string => Relay.QL`
fragment on Viewer {
messages @include(if: $show) {
id
}
}
`,
},
})
then
componentDidMount() {
this.props.relay.forceFetch({ show: true })
}
This way component will only load once. And will always refetch when you remount it. Please note that if this is a top level component you might get error because you are not fetching ANY data. I added request for user ID as a temporary hack it is resolved much faster by my graphql server.
Upvotes: 2