Feature: Allow dynamic variables in fragments

[jckw]

With the PaginationContainer, the variables can be passed to the fragment dynamically using the getVariables option in the connection configuration.

A similar API would be useful for FragmentContainers, to allow components to be isolated from their parent QueryRenderers.

A use case is requesting images of a correct size. For example, a multi-purpose Image component might have the fragment:

fragment Image_image on Image 
    @argumentDefinitions(
        width: { type: "Int" },
        height: { type: "Int" }
    ) {
    description
    customSize(width: $width, height: $height)
}

The Image component is then used in many other places such as ProfileIcon, CoverPhoto, etc, which are each wrapped in their own FragmentContainer. Each has different size requirements (often depending on screen resolution), and some might be dynamic (i.e. based on the props passed to the component).

The only way to use dynamic variables at the moment is to pass them down from the root QueryRenderer, however this can be inconvenient in large component trees.

To allow components to be isolated from their respective QRs, variables could be set at the component level in some way similar to the way getVariables is used in the PaginationContainer.

[charpeni]

This would be helpful, based on graphql/graphql-spec#204 (comment):

• Most variables are constants (initialVariables: {count: 5}) or local constants (initialVariables: {count: DEFAULT_COUNT}, where the const is defined in the same file).
• Most other variables are dynamic based on the environment, such as initialVariables: {pixelDensity: Device.getPixelDensity()}.
• A few edge cases in prepareVariables perform logic/math, such as calculating different picture sizes based on the device width and other attributes.

We would need an option in Relay Modern to deal with dynamic variables and even a replacement for prepareVariables, or at least without having to drill down variables.

We have a similar use case where we're requesting an image with a specific size, as it can't be passed by props as we'll have to pass them from the root QueryRenderer, they're defined as constants in fragments.

fragment AvatarContainer_user on User
  @argumentDefinitions(
    size: { type: "Int" }
    pixelDensity: { type: "Int" }
  ) {
  imageURL(defaultValue: "blank", size: $size, pixelDensity: $pixelDensity)
  name
}

We'd like to get an avatar size multiplied by the pixel density of the current device, but even if we would like to add a dynamic variable based on the environment, we would have to drill down that variable from each root QueryRenderer and through each fragment, this is really inconvenient.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[shinzui]

The issue is still relevant.

[sibelius]

all queries are static in "relay modern", so you can't pass dynamic variables in fragments

you need to pass them in a given query, a fragment can consume from global variable