Relay Modern @argumentDefinitions

Sibelius Seraphini
Aug 22, 2017 · 1 min read

̶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

Entria

The Bleeding Edge Tech Team

)

Thanks to João Marins

Sibelius Seraphini

Written by

Technical Lead / FullStack Developer at Entria

Entria

Entria

The Bleeding Edge Tech Team

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade