CODEWITHSUNDEEP
reactjsrelayjs
Alex
Alex

Reputation: 1741

React Relay always force fetch Route or RelayContainer

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

Answers (2)

redcom
redcom

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

Yan
Yan

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

Related Questions