Cell Query Operation name not camelCase-d if use underscore in generation

[dthyresson]

As of v0.14.0, cell queries now get an operation name to work with Storybook:

See: #867

Example:

export const QUERY = gql`
- query {
+ query TestQuery {
    userProfile {
     id
   }
  }
`

I created a cell via the generator:

yarn rw g cell my_sites

and

✔ Generating cell files...
    ✔ Writing 
`./web/src/components/MySitesCell/MySitesCell.mock.j
s`...
    ✔ Writing 
`./web/src/components/MySitesCell/MySitesCell.storie
s.js`...
    ✔ Writing 
`./web/src/components/MySitesCell/MySitesCell.test.j
s`...
    ✔ Writing `./web/src/components/MySitesCell/MySi
tesCell.js`...
✨  Done in 1.57s.

the files, used the MySite upper camelCasing.

However, my query operation is

export const QUERY = gql`
  query my_sitesQuery {
    mySites {
      id
    }
  }
`

When I generated SitesCell it is

export const QUERY = gql`
  query sitesQuery {
    sites {
      id
    }
  }
`

I expected either

query MySitesQuery {

or

``query mySitesQuery {`

but not

``query my_sitesQuery {`

That said:

yarn rw g cell MySites
yarn rw g cell mySites

generates

export const QUERY = gql`
  query MySitesQuery {
    mySites {
      id
    }
  }
`

Is there a preferred case?

I noticed that in the GraphQL documentation the example is PascalCase:

query HeroNameAndFriends {
  hero {
    name
    friends {
      name
    }
  }
}

[peterp]

Oooh, great catch, PascalCase is what I wanted 👍

[peterp]

@dthyresson Any interest in creating a PR for this? 🍫

[dthyresson]

@peterp Happy to!

[dthyresson]

Oh, I see that:

import pascalcase from 'pascalcase'

is already used in

cli/src/commands/generate/helpers.js

So, thinking it's just something like:

const uniqueOperationName = (name, index = 1) => {
  let operationName =
    index <= 1
      ? `${pascalcase(name)}Query`
      : `${pascalcase(name)}Query_${index}`
  if (!getCellOperationNames().includes(operationName)) {
    return operationName
  }
  return uniqueOperationName(name, index + 1)
}

and then adding some more tests for single, multi (and change the expected case) and then an underscore and a dash scenarios along the line of:

console.log(pascalcase('foo_bar-baz')); //=> 'FooBarBaz'
console.log(pascalcase('#foo+bar*baz')); //=> 'FooBarBaz'
console.log(pascalcase('$foo~bar`baz')); //=> 'FooBarBaz'

[dthyresson]

Right because, usually your component name will not be pascal cased:

  const outputComponentName =
    componentName || pascalcase(paramCase(name)) + suffix