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

Newsletter

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store