Skip to main content
Version: v10.1.0

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...})