Kebab-cased file names cause unexpected camel cased naming for generated Typescript types

[ChristianIvicevic]

In my pet project I happen to name my folder and files with kebab case, similar to how Angular does it, and end up with a module called home-page.tsx. The compiler therefore enforces the query inside that file to be called homePageQuery and unfortunately the generated Typescript type is cased the same in contrast to the usual pascal casing of type names.

This means I either accept camel cased type names, rename all of my files from kebab case to pascal case or write a custom transformer script that renames the types accordingly. Therefore I feel like this is a bit of an oversight and would like to know whether there are any options or possible fixes to have the generated Typescript types be in pascal case.

[stale[bot]]

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.

[Mikoz93]

Came across this just now as well. My module file name is users-list so Relay requires the operation name to be usersListQuery. I'm also using typescript and the generated type names are camel-cased, which is not right.

[artola]

@alunyov @kassens Could be possible to have an option in the compiler for artifacts' file naming ?

For example:

query MyComponentQuery {
 ...SomeFragment
}

Generates: with option for filename kebab-case should generate my-component-query.js. Or more generic the compiler could allow to pass a function to return it.

module.exports = {
    src: "./src",
    schema: "./src/schema/app_schema.graphql",
    artifactName: (fragmentName) => myFavFormatter(fragmentName),
}

[artola]

It is a long time, 5 years already since @leebyron https://github.com/facebook/relay/issues/2093

@alunyov What could be possible here? (or what can not because some other contraints)

[artola]

@captbaritone Why not use to_pascal_case in place of to_camel_case here?

https://github.com/facebook/relay/blob/b90d6228e967b1354089378e2a4c37f36ce4f911/compiler/crates/relay-transforms/src/validations/validate_module_names/extract_module_name.rs#L17

Given the file foo-bar.js:

import {graphql, useFragment} from 'react-relay';

export default function FooBar() {
  useFragment(
    graphql`
      fragment FooBar on User {
        __typename
      }
    `,
    {},
  );

  return null;
}

I would like to compile with proper Typescript types (in PascalCase) as kebab-case is becoming mainstream, or at least file casing is related to the code styleguide.

[ERROR] Compilation failed.
[ERROR] Unable to run relay compiler. Error details: 
Failed to build:
 - Validation errors:
 - Fragments in graphql tags must start with the module name ('fooBar'). Got 'FooBar' instead.:src/foo-bar.js:16:22

[Zn4rK]

Is this completely out of scope? And if it is, are there any workarounds available? I would also like to use kebab-case.

[psirenny]

Is this completely out of scope? And if it is, are there any workarounds available? I would also like to use kebab-case.

In our codebase we have to rename all relay generated type definitions to pascal case due to the way that kebab cased files are handled. It's a real burden.

[alvarogfn]

up