Relay Modern @argumentDefinitions

̶R̶e̶l̶a̶y̶ ̶M̶o̶d̶e̶r̶n̶ ̶p̶r̶o̶v̶i̶d̶e̶s̶ ̶s̶o̶m̶e̶ ̶e̶x̶p̶e̶r̶i̶m̶e̶n̶t̶a̶l̶ ̶d̶i̶r̶e̶c̶t̶i̶v̶e̶s̶ ̶t̶o̶ ̶m̶a̶k̶e̶ ̶i̶t̶ ̶e̶a̶s̶y̶ ̶t̶o̶ ̶s̶o̶l̶v̶e̶ ̶s̶o̶m̶e̶ ̶c̶o̶m̶m̶o̶n̶ ̶p̶a̶t̶t̶e̶r̶n̶s̶.̶

This is not experimental anymore, this is the right way to compose your fragments.

I'll describe in this post the directives @argumentDefinitions and @arguments.

@argumentDefinitions and @arguments

They are common used in createRefetchContainer and createPaginationContainer, and often used together.

@argumentDefinitions defines local variables used by a component.

@arguments will pass some arguments to a fragment.

Let's see a complete example:

In the code above, I'm creating a refetch container with 2 local variables, count and cursor that will be used to fetch new users from that connection.

In the third parameter of refetchContainer we provide the Query that will be called when we want to refetch new data. We use @arguments to replace the values of count and cursor variables in UserList_viewer fragment.

̶W̶h̶y̶ ̶w̶e̶ ̶h̶a̶v̶e̶ ̶t̶o̶ ̶u̶s̶e̶ ̶g̶r̶a̶p̶h̶q̶l̶.̶e̶x̶p̶e̶r̶i̶m̶e̶n̶t̶a̶l̶?̶
̶B̶a̶s̶e̶d̶ ̶o̶n̶ ̶t̶h̶i̶s̶ ̶i̶s̶s̶u̶e̶:̶ ̶h̶t̶t̶p̶s̶:̶/̶/̶g̶i̶t̶h̶u̶b̶.̶c̶o̶m̶/̶f̶a̶c̶e̶b̶o̶o̶k̶/̶r̶e̶l̶a̶y̶/̶i̶s̶s̶u̶e̶s̶/̶1̶9̶6̶7̶.̶
̶@̶a̶r̶g̶u̶m̶e̶n̶t̶s̶ ̶a̶n̶d̶ ̶@̶a̶r̶g̶u̶m̶e̶n̶t̶D̶e̶f̶i̶n̶i̶t̶i̶o̶n̶ ̶a̶r̶e̶ ̶h̶e̶r̶e̶ ̶t̶o̶ ̶s̶t̶a̶y̶.̶
̶H̶o̶w̶e̶v̶e̶r̶ ̶a̶l̶l̶ ̶t̶h̶e̶ ̶d̶i̶r̶e̶c̶t̶i̶v̶e̶s̶ ̶o̶f̶ ̶g̶r̶a̶p̶h̶q̶l̶.̶e̶x̶p̶e̶r̶i̶m̶e̶n̶t̶a̶l̶ ̶a̶r̶e̶ ̶s̶t̶i̶l̶l̶ ̶e̶x̶p̶e̶r̶i̶m̶e̶n̶t̶a̶l̶,̶ ̶a̶n̶d̶ ̶c̶a̶n̶ ̶c̶h̶a̶n̶g̶e̶ ̶i̶n̶ ̶a̶n̶y̶ ̶r̶e̶l̶e̶a̶s̶e̶ ̶o̶f̶ ̶r̶e̶l̶a̶y̶,̶ ̶s̶o̶ ̶b̶e̶ ̶c̶a̶r̶e̶f̶u̶l̶.̶

Final Thoughts

@arguments and @argumentDefinitions are key to compose fragments in Relay Modern.

If you wanna test if you really learnt about this concept try to send a pull request to my boilerplate, here is the issue: https://github.com/sibelius/ReactNavigationRelayModern/issues/16

Newsletter

Subscribe to my newsletter for new content https://sibelius.substack.com/