Update eslint rules; autoformat javascript

.eslintignore

@@ -0,0 +1 @@
+**/__generated__/*

.eslintrc.js

@@ -29,7 +29,7 @@ module.exports = {
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 2018,
+    ecmaVersion: 11, // 2020
     sourceType: 'module',
     parserOptions: {
       project: './tsconfig.json',
@@ -61,8 +61,6 @@ module.exports = {
     'key-spacing': ['error', {beforeColon: false, afterColon: true}],
     'keyword-spacing': ['error', {before: true, after: true}],
     'linebreak-style': ['error', 'unix'],
-    'linebreak-style': ['error', 'unix'],
-    'max-len': ['error', 120],
     'no-confusing-arrow': ['error', {allowParens: false}],
     'no-multi-spaces': 'error',
     'no-shadow': 1,
@@ -98,7 +96,7 @@ module.exports = {
     'react/jsx-no-target-blank': 2,
     'react/jsx-props-no-multi-spaces': 1,
     'react/jsx-sort-props': 1,
-    'react/jsx-tag-spacing': ['warn', {beforeSelfClosing: true}],
+    'react/jsx-tag-spacing': 2,
     'react/no-children-prop': 1,
     'react/no-deprecated': 1,
     'react/no-direct-mutation-state': 2,

.prettierrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  printWidth: 120,
+  printWidth: 80,
   singleQuote: true,
   jsxSingleQuote: true,
   bracketSpacing: false,

Dockerfile

@@ -31,7 +31,7 @@ RUN yarn install && yarn cache clean
 COPY bin/ /app/bin
 COPY Rakefile /app/
 COPY .rspec .ruby-version tsconfig.json babel.config.js postcss.config.js \
-  .browserslistrc .prettierrc.js .rubocop.yml .eslintrc.js /app/
+  .browserslistrc .prettierrc.js .rubocop.yml .eslintrc.js .eslintignore /app/
 COPY vendor/ /app/vendor
 COPY config.ru /app/config.ru
 COPY config/ /app/config

app/javascript/packs/frontend/__generated__/AppPokemonIndexQuery.graphql.ts

@@ -1,6 +1,6 @@
 /* tslint:disable */
 
-import { ConcreteRequest } from "relay-runtime";
+import {ConcreteRequest} from 'relay-runtime';
 type Show_pokemon$ref = any;
 export type AppPokemonIndexQueryVariables = {};
 export type AppPokemonIndexQueryResponse = {
@@ -8,7 +8,7 @@ export type AppPokemonIndexQueryResponse = {
         readonly edges: ReadonlyArray<{
             readonly node: {
                 readonly id: string;
-                readonly " $fragmentRefs": Show_pokemon$ref;
+                readonly ' $fragmentRefs': Show_pokemon$ref;
             } | null;
         } | null> | null;
     };
@@ -40,134 +40,134 @@ fragment Show_pokemon on Pokemon {
 }
 */
 
-const node: ConcreteRequest = (function(){
-var v0 = {
-  "kind": "ScalarField",
-  "alias": null,
-  "name": "id",
-  "args": null,
-  "storageKey": null
-};
-return {
-  "kind": "Request",
-  "fragment": {
-    "kind": "Fragment",
-    "name": "AppPokemonIndexQuery",
-    "type": "Query",
-    "metadata": null,
-    "argumentDefinitions": [],
-    "selections": [
-      {
-        "kind": "LinkedField",
-        "alias": null,
-        "name": "pokemonConnection",
-        "storageKey": null,
-        "args": null,
-        "concreteType": "PokemonConnection",
-        "plural": false,
-        "selections": [
-          {
-            "kind": "LinkedField",
-            "alias": null,
-            "name": "edges",
-            "storageKey": null,
-            "args": null,
-            "concreteType": "PokemonEdge",
-            "plural": true,
-            "selections": [
-              {
-                "kind": "LinkedField",
-                "alias": null,
-                "name": "node",
-                "storageKey": null,
-                "args": null,
-                "concreteType": "Pokemon",
-                "plural": false,
-                "selections": [
-                  (v0/*: any*/),
-                  {
-                    "kind": "FragmentSpread",
-                    "name": "Show_pokemon",
-                    "args": null
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  "operation": {
-    "kind": "Operation",
-    "name": "AppPokemonIndexQuery",
-    "argumentDefinitions": [],
-    "selections": [
-      {
-        "kind": "LinkedField",
-        "alias": null,
-        "name": "pokemonConnection",
-        "storageKey": null,
-        "args": null,
-        "concreteType": "PokemonConnection",
-        "plural": false,
-        "selections": [
-          {
-            "kind": "LinkedField",
-            "alias": null,
-            "name": "edges",
-            "storageKey": null,
-            "args": null,
-            "concreteType": "PokemonEdge",
-            "plural": true,
-            "selections": [
-              {
-                "kind": "LinkedField",
-                "alias": null,
-                "name": "node",
-                "storageKey": null,
-                "args": null,
-                "concreteType": "Pokemon",
-                "plural": false,
-                "selections": [
-                  (v0/*: any*/),
-                  {
-                    "kind": "ScalarField",
-                    "alias": null,
-                    "name": "iid",
-                    "args": null,
-                    "storageKey": null
-                  },
-                  {
-                    "kind": "ScalarField",
-                    "alias": null,
-                    "name": "nickname",
-                    "args": null,
-                    "storageKey": null
-                  },
-                  {
-                    "kind": "ScalarField",
-                    "alias": null,
-                    "name": "pokedexNumber",
-                    "args": null,
-                    "storageKey": null
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  "params": {
-    "operationKind": "query",
-    "name": "AppPokemonIndexQuery",
-    "id": null,
-    "text": "query AppPokemonIndexQuery {\n  pokemonConnection {\n    edges {\n      node {\n        id\n        ...Show_pokemon\n      }\n    }\n  }\n}\n\nfragment Show_pokemon on Pokemon {\n  id\n  iid\n  nickname\n  pokedexNumber\n}\n",
-    "metadata": {}
-  }
-};
+const node: ConcreteRequest = (function() {
+  const v0 = {
+    'kind': 'ScalarField',
+    'alias': null,
+    'name': 'id',
+    'args': null,
+    'storageKey': null
+  };
+  return {
+    'kind': 'Request',
+    'fragment': {
+      'kind': 'Fragment',
+      'name': 'AppPokemonIndexQuery',
+      'type': 'Query',
+      'metadata': null,
+      'argumentDefinitions': [],
+      'selections': [
+        {
+          'kind': 'LinkedField',
+          'alias': null,
+          'name': 'pokemonConnection',
+          'storageKey': null,
+          'args': null,
+          'concreteType': 'PokemonConnection',
+          'plural': false,
+          'selections': [
+            {
+              'kind': 'LinkedField',
+              'alias': null,
+              'name': 'edges',
+              'storageKey': null,
+              'args': null,
+              'concreteType': 'PokemonEdge',
+              'plural': true,
+              'selections': [
+                {
+                  'kind': 'LinkedField',
+                  'alias': null,
+                  'name': 'node',
+                  'storageKey': null,
+                  'args': null,
+                  'concreteType': 'Pokemon',
+                  'plural': false,
+                  'selections': [
+                    (v0/*: any*/),
+                    {
+                      'kind': 'FragmentSpread',
+                      'name': 'Show_pokemon',
+                      'args': null
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    'operation': {
+      'kind': 'Operation',
+      'name': 'AppPokemonIndexQuery',
+      'argumentDefinitions': [],
+      'selections': [
+        {
+          'kind': 'LinkedField',
+          'alias': null,
+          'name': 'pokemonConnection',
+          'storageKey': null,
+          'args': null,
+          'concreteType': 'PokemonConnection',
+          'plural': false,
+          'selections': [
+            {
+              'kind': 'LinkedField',
+              'alias': null,
+              'name': 'edges',
+              'storageKey': null,
+              'args': null,
+              'concreteType': 'PokemonEdge',
+              'plural': true,
+              'selections': [
+                {
+                  'kind': 'LinkedField',
+                  'alias': null,
+                  'name': 'node',
+                  'storageKey': null,
+                  'args': null,
+                  'concreteType': 'Pokemon',
+                  'plural': false,
+                  'selections': [
+                    (v0/*: any*/),
+                    {
+                      'kind': 'ScalarField',
+                      'alias': null,
+                      'name': 'iid',
+                      'args': null,
+                      'storageKey': null
+                    },
+                    {
+                      'kind': 'ScalarField',
+                      'alias': null,
+                      'name': 'nickname',
+                      'args': null,
+                      'storageKey': null
+                    },
+                    {
+                      'kind': 'ScalarField',
+                      'alias': null,
+                      'name': 'pokedexNumber',
+                      'args': null,
+                      'storageKey': null
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    'params': {
+      'operationKind': 'query',
+      'name': 'AppPokemonIndexQuery',
+      'id': null,
+      'text': 'query AppPokemonIndexQuery {\n  pokemonConnection {\n    edges {\n      node {\n        id\n        ...Show_pokemon\n      }\n    }\n  }\n}\n\nfragment Show_pokemon on Pokemon {\n  id\n  iid\n  nickname\n  pokedexNumber\n}\n',
+      'metadata': {}
+    }
+  };
 })();
 (node as any).hash = 'bd8d28f417b6cf2d9c83547f6107b4a8';
 export default node;

app/javascript/packs/frontend/components/layout/ApplicationLayout.tsx

@@ -24,7 +24,11 @@ function ApplicationLayout({children}: Props): React.ReactElement {
               </Nav.Link>
             </Nav>
             <Form inline>
-              <FormControl className='mr-sm-2' placeholder='Search' type='text' />
+              <FormControl
+                className='mr-sm-2'
+                placeholder='Search'
+                type='text'
+              />
               <Button variant='primary'>Search</Button>
             </Form>
           </Navbar.Collapse>

app/javascript/packs/frontend/components/pages/pokemon/Create.tsx

@@ -5,12 +5,19 @@ import {withRouter, RouterState, Router} from 'found';
 import environment from '../../../graphqlEnvironment';
 import {createPokemon} from './CreatePokemon';
 
-function onSubmit(e: Event, router: Router, nickname: string, pokedexNumber: number): void {
+function onSubmit(
+  e: Event,
+  router: Router,
+  nickname: string,
+  pokedexNumber: number
+): void {
   e.preventDefault();
   createPokemon(environment, router, nickname, pokedexNumber);
 }
 
-const Create: React.FC<RouterState> = ({router}: RouterState): React.ReactElement<void> => {
+const Create: React.FC<RouterState> = ({
+  router,
+}: RouterState): React.ReactElement<void> => {
   const [nickname, setNickname] = useState('');
   const [pokedexNumber, setPokedexNumber] = useState(1);
 
@@ -18,7 +25,10 @@ const Create: React.FC<RouterState> = ({router}: RouterState): React.ReactElemen
     <Form onSubmit={e => onSubmit(e, router, nickname, pokedexNumber)}>
       <Form.Group controlId='nickname'>
         <Form.Label>Nickname</Form.Label>
-        <Form.Control onChange={e => setNickname(e.target.value)} placeholder='Pokemon Nickname' />
+        <Form.Control
+          onChange={e => setNickname(e.target.value)}
+          placeholder='Pokemon Nickname'
+        />
       </Form.Group>
 
       <Form.Group controlId='pokedexNumber'>

app/javascript/packs/frontend/components/pages/pokemon/CreatePokemon.ts

@@ -15,7 +15,12 @@ const mutation = graphql`
 `;
 
 /* eslint-disable no-console */
-export function createPokemon(environment: any, router: Router, nickname: string, pokedexNumber: number): void {
+export function createPokemon(
+  environment: any,
+  router: Router,
+  nickname: string,
+  pokedexNumber: number
+): void {
   const variables = {
     nickname,
     pokedexNumber,

app/javascript/packs/frontend/components/pages/pokemon/Index.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 
-import * as AppPokemonIndexQuery from '../../../__generated__/AppPokemonIndexQuery.graphql';
+import {AppPokemonIndexQueryResponse} from '../../../__generated__/AppPokemonIndexQuery.graphql';
 import PokemonShow from './Show';
 
-function PokemonIndex(props: AppPokemonIndexQuery.AppPokemonIndexQueryResponse): React.ReactElement<void> {
+function PokemonIndex(
+  props: AppPokemonIndexQueryResponse
+): React.ReactElement<void> {
   return (
     <ul>
       {props.pokemonConnection.edges.map(

app/javascript/packs/frontend/components/pages/pokemon/Show.tsx

@@ -7,7 +7,9 @@ export interface Props {
   pokemon: ShowPokemonDataType;
 }
 
-export function PokemonShow({pokemon}: Props): React.FunctionComponentElement<Props> {
+export function PokemonShow({
+  pokemon,
+}: Props): React.FunctionComponentElement<Props> {
   const {id, iid, nickname, pokedexNumber} = pokemon;
   return (
     <>

app/javascript/packs/frontend/components/pages/pokemon/__generated__/CreatePokemonMutation.graphql.ts

@@ -1,6 +1,6 @@
 /* tslint:disable */
 
-import { ConcreteRequest } from "relay-runtime";
+import {ConcreteRequest} from 'relay-runtime';
 export type CreatePokemonMutationVariables = {
     nickname: string;
     pokedexNumber: string;
@@ -38,108 +38,108 @@ mutation CreatePokemonMutation(
 }
 */
 
-const node: ConcreteRequest = (function(){
-var v0 = [
-  {
-    "kind": "LocalArgument",
-    "name": "nickname",
-    "type": "String!",
-    "defaultValue": null
-  },
-  {
-    "kind": "LocalArgument",
-    "name": "pokedexNumber",
-    "type": "ID!",
-    "defaultValue": null
-  }
-],
-v1 = [
-  {
-    "kind": "LinkedField",
-    "alias": null,
-    "name": "createPokemon",
-    "storageKey": null,
-    "args": [
+const node: ConcreteRequest = (function() {
+  const v0 = [
       {
-        "kind": "Variable",
-        "name": "nickname",
-        "variableName": "nickname"
+        'kind': 'LocalArgument',
+        'name': 'nickname',
+        'type': 'String!',
+        'defaultValue': null
       },
       {
-        "kind": "Variable",
-        "name": "pokedexNumber",
-        "variableName": "pokedexNumber"
+        'kind': 'LocalArgument',
+        'name': 'pokedexNumber',
+        'type': 'ID!',
+        'defaultValue': null
       }
     ],
-    "concreteType": "CreatePokemonPayload",
-    "plural": false,
-    "selections": [
+    v1 = [
       {
-        "kind": "LinkedField",
-        "alias": null,
-        "name": "pokemon",
-        "storageKey": null,
-        "args": null,
-        "concreteType": "Pokemon",
-        "plural": false,
-        "selections": [
-          {
-            "kind": "ScalarField",
-            "alias": null,
-            "name": "id",
-            "args": null,
-            "storageKey": null
-          },
+        'kind': 'LinkedField',
+        'alias': null,
+        'name': 'createPokemon',
+        'storageKey': null,
+        'args': [
           {
-            "kind": "ScalarField",
-            "alias": null,
-            "name": "iid",
-            "args": null,
-            "storageKey": null
+            'kind': 'Variable',
+            'name': 'nickname',
+            'variableName': 'nickname'
           },
           {
-            "kind": "ScalarField",
-            "alias": null,
-            "name": "nickname",
-            "args": null,
-            "storageKey": null
-          },
+            'kind': 'Variable',
+            'name': 'pokedexNumber',
+            'variableName': 'pokedexNumber'
+          }
+        ],
+        'concreteType': 'CreatePokemonPayload',
+        'plural': false,
+        'selections': [
           {
-            "kind": "ScalarField",
-            "alias": null,
-            "name": "pokedexNumber",
-            "args": null,
-            "storageKey": null
+            'kind': 'LinkedField',
+            'alias': null,
+            'name': 'pokemon',
+            'storageKey': null,
+            'args': null,
+            'concreteType': 'Pokemon',
+            'plural': false,
+            'selections': [
+              {
+                'kind': 'ScalarField',
+                'alias': null,
+                'name': 'id',
+                'args': null,
+                'storageKey': null
+              },
+              {
+                'kind': 'ScalarField',
+                'alias': null,
+                'name': 'iid',
+                'args': null,
+                'storageKey': null
+              },
+              {
+                'kind': 'ScalarField',
+                'alias': null,
+                'name': 'nickname',
+                'args': null,
+                'storageKey': null
+              },
+              {
+                'kind': 'ScalarField',
+                'alias': null,
+                'name': 'pokedexNumber',
+                'args': null,
+                'storageKey': null
+              }
+            ]
           }
         ]
       }
-    ]
-  }
-];
-return {
-  "kind": "Request",
-  "fragment": {
-    "kind": "Fragment",
-    "name": "CreatePokemonMutation",
-    "type": "Mutation",
-    "metadata": null,
-    "argumentDefinitions": (v0/*: any*/),
-    "selections": (v1/*: any*/)
-  },
-  "operation": {
-    "kind": "Operation",
-    "name": "CreatePokemonMutation",
-    "argumentDefinitions": (v0/*: any*/),
-    "selections": (v1/*: any*/)
-  },
-  "params": {
-    "operationKind": "mutation",
-    "name": "CreatePokemonMutation",
-    "id": null,
-    "text": "mutation CreatePokemonMutation(\n  $nickname: String!\n  $pokedexNumber: ID!\n) {\n  createPokemon(nickname: $nickname, pokedexNumber: $pokedexNumber) {\n    pokemon {\n      id\n      iid\n      nickname\n      pokedexNumber\n    }\n  }\n}\n",
-    "metadata": {}
-  }
-};
+    ];
+  return {
+    'kind': 'Request',
+    'fragment': {
+      'kind': 'Fragment',
+      'name': 'CreatePokemonMutation',
+      'type': 'Mutation',
+      'metadata': null,
+      'argumentDefinitions': (v0/*: any*/),
+      'selections': (v1/*: any*/)
+    },
+    'operation': {
+      'kind': 'Operation',
+      'name': 'CreatePokemonMutation',
+      'argumentDefinitions': (v0/*: any*/),
+      'selections': (v1/*: any*/)
+    },
+    'params': {
+      'operationKind': 'mutation',
+      'name': 'CreatePokemonMutation',
+      'id': null,
+      'text': 'mutation CreatePokemonMutation(\n  $nickname: String!\n  $pokedexNumber: ID!\n) {\n  createPokemon(nickname: $nickname, pokedexNumber: $pokedexNumber) {\n    pokemon {\n      id\n      iid\n      nickname\n      pokedexNumber\n    }\n  }\n}\n',
+      'metadata': {}
+    }
+  };
 })();
 (node as any).hash = '6358b6ddc3c56eadd4291d337c538808';
 export default node;

app/javascript/packs/frontend/components/pages/pokemon/__generated__/Show_pokemon.graphql.ts

@@ -1,51 +1,51 @@
 /* tslint:disable */
 
-import { ReaderFragment } from "relay-runtime";
+import {ReaderFragment} from 'relay-runtime';
 export type Show_pokemon$ref = any;
 export type Show_pokemon = {
     readonly id: string;
     readonly iid: string;
     readonly nickname: string | null;
     readonly pokedexNumber: number | null;
-    readonly " $refType": Show_pokemon$ref;
+    readonly ' $refType': Show_pokemon$ref;
 };
 
 
 
 const node: ReaderFragment = {
-  "kind": "Fragment",
-  "name": "Show_pokemon",
-  "type": "Pokemon",
-  "metadata": null,
-  "argumentDefinitions": [],
-  "selections": [
+  'kind': 'Fragment',
+  'name': 'Show_pokemon',
+  'type': 'Pokemon',
+  'metadata': null,
+  'argumentDefinitions': [],
+  'selections': [
     {
-      "kind": "ScalarField",
-      "alias": null,
-      "name": "id",
-      "args": null,
-      "storageKey": null
+      'kind': 'ScalarField',
+      'alias': null,
+      'name': 'id',
+      'args': null,
+      'storageKey': null
     },
     {
-      "kind": "ScalarField",
-      "alias": null,
-      "name": "iid",
-      "args": null,
-      "storageKey": null
+      'kind': 'ScalarField',
+      'alias': null,
+      'name': 'iid',
+      'args': null,
+      'storageKey': null
     },
     {
-      "kind": "ScalarField",
-      "alias": null,
-      "name": "nickname",
-      "args": null,
-      "storageKey": null
+      'kind': 'ScalarField',
+      'alias': null,
+      'name': 'nickname',
+      'args': null,
+      'storageKey': null
     },
     {
-      "kind": "ScalarField",
-      "alias": null,
-      "name": "pokedexNumber",
-      "args": null,
-      "storageKey": null
+      'kind': 'ScalarField',
+      'alias': null,
+      'name': 'pokedexNumber',
+      'args': null,
+      'storageKey': null
     }
   ]
 };

spec/javascript/frontend/components/pages/pokemon/Show.test.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
-import {shallow, mount, ReactWrapper, ShallowWrapper} from 'enzyme';
+import {shallow, ShallowWrapper} from 'enzyme';
 import {createMockEnvironment, MockPayloadGenerator} from 'relay-test-utils';
 import {QueryRenderer, graphql} from 'react-relay';
 import * as ReactTestRenderer from 'react-test-renderer';
 
-import FragmentedPokemonShow, {PokemonShow, Props} from 'packs/frontend/components/pages/pokemon/Show';
-import {Show_pokemon} from 'packs/frontend/components/pages/pokemon/__generated__/Show_pokemon.graphql';
+import FragmentedPokemonShow, {
+  PokemonShow,
+  Props,
+} from 'packs/frontend/components/pages/pokemon/Show';
+import {Show_pokemon as ShowPokemonDataType} from 'packs/frontend/components/pages/pokemon/__generated__/Show_pokemon.graphql';
 
-const pokemon: Show_pokemon = {
+const pokemon: ShowPokemonDataType = {
   id: '1',
   iid: 'x1',
   nickname: 'Bulbasaur',
@@ -23,10 +26,6 @@ function setup(props = defaultProps): ShallowWrapper {
   return shallow(<PokemonShow {...props} />);
 }
 
-function mountSetup(props = defaultProps): ReactWrapper {
-  return mount(<PokemonShow {...props} />);
-}
-
 describe('<PokemonShow />', () => {
   it('displays a pokemon', () => {
     const wrapper = setup();
@@ -37,7 +36,7 @@ describe('<PokemonShow />', () => {
     const environment = createMockEnvironment();
     const mockId = 'mock-id-1';
 
-    const TestRenderer = () => (
+    const TestRenderer = (): JSX.Element => (
       <QueryRenderer
         environment={environment}
         query={graphql`
@@ -47,19 +46,20 @@ describe('<PokemonShow />', () => {
             }
           }
         `}
-        variables={{mockId}}
         render={args => {
           const {error, props} = args as {error: Error; props: Props};
           if (props) {
             // Prevent TS Compiler from complaining about unsupplied props
             const Component = FragmentedPokemonShow as any;
 
+            // eslint-disable-next-line react/prop-types
             return <Component pokemon={props.pokemon} />;
           } else if (error) {
             return error.message;
           }
           return 'Loading...';
         }}
+        variables={{mockId}}
       />
     );
 

spec/javascript/frontend/components/pages/pokemon/__generated__/Show_pokemonSuccessQuery.graphql.ts

@@ -1,13 +1,13 @@
 /* tslint:disable */
 
-import { ConcreteRequest } from "relay-runtime";
+import {ConcreteRequest} from 'relay-runtime';
 type Show_pokemon$ref = any;
 export type Show_pokemonSuccessQueryVariables = {
     mockId: string;
 };
 export type Show_pokemonSuccessQueryResponse = {
     readonly pokemon: {
-        readonly " $fragmentRefs": Show_pokemon$ref;
+        readonly ' $fragmentRefs': Show_pokemon$ref;
     } | null;
 };
 export type Show_pokemonSuccessQuery = {
@@ -36,145 +36,145 @@ fragment Show_pokemon on Pokemon {
 }
 */
 
-const node: ConcreteRequest = (function(){
-var v0 = [
-  {
-    "kind": "LocalArgument",
-    "name": "mockId",
-    "type": "ID!",
-    "defaultValue": null
-  }
-],
-v1 = [
-  {
-    "kind": "Variable",
-    "name": "id",
-    "variableName": "mockId"
-  }
-],
-v2 = {
-  "type": "ID",
-  "enumValues": null,
-  "plural": false,
-  "nullable": false
-};
-return {
-  "kind": "Request",
-  "fragment": {
-    "kind": "Fragment",
-    "name": "Show_pokemonSuccessQuery",
-    "type": "Query",
-    "metadata": null,
-    "argumentDefinitions": (v0/*: any*/),
-    "selections": [
+const node: ConcreteRequest = (function() {
+  const v0 = [
       {
-        "kind": "LinkedField",
-        "alias": "pokemon",
-        "name": "node",
-        "storageKey": null,
-        "args": (v1/*: any*/),
-        "concreteType": null,
-        "plural": false,
-        "selections": [
-          {
-            "kind": "FragmentSpread",
-            "name": "Show_pokemon",
-            "args": null
-          }
-        ]
+        'kind': 'LocalArgument',
+        'name': 'mockId',
+        'type': 'ID!',
+        'defaultValue': null
       }
-    ]
-  },
-  "operation": {
-    "kind": "Operation",
-    "name": "Show_pokemonSuccessQuery",
-    "argumentDefinitions": (v0/*: any*/),
-    "selections": [
+    ],
+    v1 = [
       {
-        "kind": "LinkedField",
-        "alias": "pokemon",
-        "name": "node",
-        "storageKey": null,
-        "args": (v1/*: any*/),
-        "concreteType": null,
-        "plural": false,
-        "selections": [
-          {
-            "kind": "ScalarField",
-            "alias": null,
-            "name": "__typename",
-            "args": null,
-            "storageKey": null
+        'kind': 'Variable',
+        'name': 'id',
+        'variableName': 'mockId'
+      }
+    ],
+    v2 = {
+      'type': 'ID',
+      'enumValues': null,
+      'plural': false,
+      'nullable': false
+    };
+  return {
+    'kind': 'Request',
+    'fragment': {
+      'kind': 'Fragment',
+      'name': 'Show_pokemonSuccessQuery',
+      'type': 'Query',
+      'metadata': null,
+      'argumentDefinitions': (v0/*: any*/),
+      'selections': [
+        {
+          'kind': 'LinkedField',
+          'alias': 'pokemon',
+          'name': 'node',
+          'storageKey': null,
+          'args': (v1/*: any*/),
+          'concreteType': null,
+          'plural': false,
+          'selections': [
+            {
+              'kind': 'FragmentSpread',
+              'name': 'Show_pokemon',
+              'args': null
+            }
+          ]
+        }
+      ]
+    },
+    'operation': {
+      'kind': 'Operation',
+      'name': 'Show_pokemonSuccessQuery',
+      'argumentDefinitions': (v0/*: any*/),
+      'selections': [
+        {
+          'kind': 'LinkedField',
+          'alias': 'pokemon',
+          'name': 'node',
+          'storageKey': null,
+          'args': (v1/*: any*/),
+          'concreteType': null,
+          'plural': false,
+          'selections': [
+            {
+              'kind': 'ScalarField',
+              'alias': null,
+              'name': '__typename',
+              'args': null,
+              'storageKey': null
+            },
+            {
+              'kind': 'ScalarField',
+              'alias': null,
+              'name': 'id',
+              'args': null,
+              'storageKey': null
+            },
+            {
+              'kind': 'InlineFragment',
+              'type': 'Pokemon',
+              'selections': [
+                {
+                  'kind': 'ScalarField',
+                  'alias': null,
+                  'name': 'iid',
+                  'args': null,
+                  'storageKey': null
+                },
+                {
+                  'kind': 'ScalarField',
+                  'alias': null,
+                  'name': 'nickname',
+                  'args': null,
+                  'storageKey': null
+                },
+                {
+                  'kind': 'ScalarField',
+                  'alias': null,
+                  'name': 'pokedexNumber',
+                  'args': null,
+                  'storageKey': null
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    'params': {
+      'operationKind': 'query',
+      'name': 'Show_pokemonSuccessQuery',
+      'id': null,
+      'text': 'query Show_pokemonSuccessQuery(\n  $mockId: ID!\n) {\n  pokemon: node(id: $mockId) {\n    __typename\n    ...Show_pokemon\n    id\n  }\n}\n\nfragment Show_pokemon on Pokemon {\n  id\n  iid\n  nickname\n  pokedexNumber\n}\n',
+      'metadata': {
+        'relayTestingSelectionTypeInfo': {
+          'pokemon': {
+            'type': 'Node',
+            'enumValues': null,
+            'plural': false,
+            'nullable': true
           },
-          {
-            "kind": "ScalarField",
-            "alias": null,
-            "name": "id",
-            "args": null,
-            "storageKey": null
+          'pokemon.id': (v2/*: any*/),
+          'pokemon.iid': (v2/*: any*/),
+          'pokemon.nickname': {
+            'type': 'String',
+            'enumValues': null,
+            'plural': false,
+            'nullable': true
           },
-          {
-            "kind": "InlineFragment",
-            "type": "Pokemon",
-            "selections": [
-              {
-                "kind": "ScalarField",
-                "alias": null,
-                "name": "iid",
-                "args": null,
-                "storageKey": null
-              },
-              {
-                "kind": "ScalarField",
-                "alias": null,
-                "name": "nickname",
-                "args": null,
-                "storageKey": null
-              },
-              {
-                "kind": "ScalarField",
-                "alias": null,
-                "name": "pokedexNumber",
-                "args": null,
-                "storageKey": null
-              }
-            ]
+          'pokemon.pokedexNumber': {
+            'type': 'Int',
+            'enumValues': null,
+            'plural': false,
+            'nullable': true
           }
-        ]
-      }
-    ]
-  },
-  "params": {
-    "operationKind": "query",
-    "name": "Show_pokemonSuccessQuery",
-    "id": null,
-    "text": "query Show_pokemonSuccessQuery(\n  $mockId: ID!\n) {\n  pokemon: node(id: $mockId) {\n    __typename\n    ...Show_pokemon\n    id\n  }\n}\n\nfragment Show_pokemon on Pokemon {\n  id\n  iid\n  nickname\n  pokedexNumber\n}\n",
-    "metadata": {
-      "relayTestingSelectionTypeInfo": {
-        "pokemon": {
-          "type": "Node",
-          "enumValues": null,
-          "plural": false,
-          "nullable": true
-        },
-        "pokemon.id": (v2/*: any*/),
-        "pokemon.iid": (v2/*: any*/),
-        "pokemon.nickname": {
-          "type": "String",
-          "enumValues": null,
-          "plural": false,
-          "nullable": true
-        },
-        "pokemon.pokedexNumber": {
-          "type": "Int",
-          "enumValues": null,
-          "plural": false,
-          "nullable": true
         }
       }
     }
-  }
-};
+  };
 })();
 (node as any).hash = 'ef7a9605c7de0545df001d0d9cb24676';
 export default node;

spec/javascript/frontend/graphqlEnvironment.test.ts

@@ -1,10 +1,7 @@
 import {RequestParameters, GraphQLResponse} from 'relay-runtime';
 import fetchMock from 'fetch-mock';
 
-// FIXME: imports in this manner work fine via `yarn test` but fails in-editor
-// for code completion, but this is likely a local misconfiguration
-import environment, {cache, fetchQuery} from 'packs/frontend/graphqlEnvironment';
-//import environment, {cache, fetchQuery} from '../../../app/javascript/packs/frontend/graphqlEnvironment';
+import {cache, fetchQuery} from 'packs/frontend/graphqlEnvironment';
 
 describe('fetchQuery', () => {
   const defaultRequestParameters: RequestParameters = {
@@ -24,7 +21,9 @@ describe('fetchQuery', () => {
 
     expect(opts.method).toEqual('POST');
     expect(opts.headers['Content-Type']).toEqual('application/json');
-    expect(opts['body']).toEqual(JSON.stringify({query: 'dummy text', variables: {bar: 'baz'}}));
+    expect(opts['body']).toEqual(
+      JSON.stringify({query: 'dummy text', variables: {bar: 'baz'}})
+    );
 
     (res as Promise<GraphQLResponse>).finally(() => {
       cache.clear();