Some issues with Relay Modern

[sgwilym]

trafficstars

So after I got this running against a Relay Modern project, I've noticed some issues with Relay Modern:

• Relay Modern's createPaginationContainer requires the use of a connection directive, e.g: things(first: 10) @connection(key: "ThingsList_things") { name }. This flags up a linting error Unknown directive 'connection'.
• Relay Modern uses named fragments that follow a ComponentName_PropName format, and then uses its relay-compiler to build queries across different files using those names. For example, in ThingViewer.js you'd have a fragment like fragment ThingViewer_thing on Thing { name, colour } ThingList.js you'd have a query like fragment ThingList_things on ThingCollection { numberOfThings, things { ...ThingViewer_thing } }. Because these fragments are defined in different queries across different files, the linting error Unknown fragment "ThingViewer_thing" and Fragment "ThingViewer_thing" is never used.

[hollandThomas]

Since you managed to get this running with Relay Modern: did you do anything specific to Relay Modern to configure this plugin? For me it does not seem to work at all. Thanks!

[mandx]

@hollandThomas This is the config that works for me; just add 'graphql' to your plugins section, and add this rule to your rules section:

  rules: {
    // ...
    'graphql/template-strings': ['error', {
      env: 'relay',
      schemaJson: require('./schema.json'),
      tagName: 'graphql',
      validators: 'all',
    }],
    // ..
  }

Note that because of the require call, your Eslint config has to be a Javascript module, not a JSON file. Also './schema.json' denotes a path relative to your Eslint config file. The README has an example of how to reference an absolute path.