Relay: [Modern] Unique fragment and file names required

Created on 13 Jun 2017  路  6Comments  路  Source: facebook/relay

It seems that with relay modern and relay-compiler one is forced to use unique fragment, component and file names. As an example compare header and navigation directories in my authentication example app.

If I use a folder structure like

  header
    Header.js
    UserMenu.js instead of HeaderUserMenu.js
  navigation
    Navigation.js
    UserMenu.js instead of NavigationUserMenu.js

where both UserMenu components have a UserMenu_viewer fragment, only one UserMenu_viewer.graphql.js file is created in components/navigation/__generated__/ and none in components/header/__generated__/ by relay-compiler.

So right now it seems to me that I'm actually forced to unique names for both UserMenu components. Is that correct? Wouldn't it for example be possible to let relay-compiler create unique fragment names based on the file path or something similar?

Most helpful comment

I'm facing the same issue. We have over a hundred files all named like List.js, and of course each would have a viewer fragment.

I've managed to trace the issue down to somewhere around RelayFileWriter.js line 119. It seems everything is thrown into a Set keyed by moduleName_propName, which of course clobbers files of the same name in different folders.

All 6 comments

I'm facing the same issue. We have over a hundred files all named like List.js, and of course each would have a viewer fragment.

I've managed to trace the issue down to somewhere around RelayFileWriter.js line 119. It seems everything is thrown into a Set keyed by moduleName_propName, which of course clobbers files of the same name in different folders.

This is one of my biggest annoyances with Relay modern as well. I tend to prefer deeply nested UI structures with duplicate component names, e.g:

Users > List > User
Products > List > Product

Where the topmost component contains layout and maybe a title, the List component contains logic for sorting/combining/reducing the list and the User component is an individual entry in said list.

The inability to have duplicate module names pushes you towards either a flatter component structure or manually name-spacing the modules in the filename (which is redundant as they're names-paced already in folders).

Dan Abramov somewhere described, that in Facebook they are using global unique components names, and how it is actually a good decision. I agree. Switch to flat directories. It makes more sense for functional design.

@steida You mean this comment for example? Sounds reasonable, but still I find it odd, that Relay currently forces you to adapt this kind of structure. Would be nice to have a choice.

Fragment fields with arguments also need aliases globally unique across all components (excepting those with identical arguments).

Relay Modern intends to continue to require unique fragment names across your app, however we're willing to relax the constraint that filenames should match fragment names in the future.

I've opened #2093 to track this.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

derekdowling picture derekdowling  路  3Comments

amccloud picture amccloud  路  3Comments

janicduplessis picture janicduplessis  路  3Comments

sibelius picture sibelius  路  3Comments

johntran picture johntran  路  3Comments