Upgrading setVariables
Upgrading setVariables
Examples on how to migrate
this.props.setVariables
calls from the old API.
this.props.setVariables
from the old API does not have a direct equivalent in the new API. A big reason for this change is that the new core no longer tracks how to refetch any specific sub-tree from the query. This makes the new core a lot faster, but requires explicit queries for how to fetch new data. Check out these four different scenarios:
initialVariables
If the component doesn't actually use setVariables()
, and just uses initialVariables
to share values between JS and GraphQL, there are two alternative approaches:
- Inline the value in the GraphQL query, potentially annotating with a GraphQL comment (i.e.
# PAGE_SIZE
). - Add the variable to the queries that use the fragment and pass it in when fetching the query. For this it can be useful to have a module with a collection of variables for your product.
Pagination
Typical Relay Classic code:
// counterexample this.props.relay.setVariables({ count: count + 10, }); initialVariables: { count: 10, }, fragment on User { friends(first: $count) { # ... } }
This should be upgraded to use a PaginationContainer
.
Changing Arguments
Typical old code:
// counterexample this.props.relay.setVariables({ search: newSearchTerm, }); initialVariables: { search: '', } fragment on User { friends(named: $search, first: 10) { # ... } }
This can be upgraded by using a RefetchContainer
which allows you to specify the exact query to use to fetch the new data.
Show More
Typical old code:
// counterexample this.props.relay.setVariables({ showComments: true, }); initialVariables: { showComments: false, } fragment on FeedbackTarget { comments(first: 10) @include(if: $showComments) { # ... } }
This can be upgraded by conditionally rendering a QueryRenderer
which will load the data once it is rendered- The code overhead of doing this is dramatically reduced with the new API-
Alternatively a RefetchContainer
can also be used.
© 2013–present Facebook Inc.
Licensed under the BSD License.
https://facebook.github.io/relay/docs/upgrading-setvariables.html