API Cheatsheet
A reference for translating between the Relay Classic and Relay Modern APIs.
To add a new root for relay components​
Classic: <RelayRootContainer>
Modern: <QueryRenderer>
To add a new relay container​
Classic: Relay.createContainer
Modern: createFragmentContainer
To add a new relay container that has changing data requirements​
Classic: Relay.createContainer
Modern createRefetchContainer
To add a new paginating relay container​
Classic: Relay.createContainer
Modern: createPaginationContainer
To update a variable for my component​
Classic: this.props.relay.setVariable({foo: bar}...)
Modern: this.props.relay.refetch({foo: bar}...
in a Refetch Container
To paginate through a connection​
Classic: this.props.relay.setVariable({count: prevCount + pageSize}...)
Modern this.props.relay.loadMore(pageSize...)
in a Pagination Container
To force fetch a component​
Classic: this.props.relay.forceFetch()
Modern: this.props.relay.refetchConnection(...)
in a Pagination Container
or: this.props.relay.refetch({}, {}, callback, {force: true})
in a Refetch Container
To commit a mutation​
Classic: this.props.relay.commitUpdate(mutation...)
Modern: commitMutation(this.props.relay.environment, {mutation...})