relay-compiler Error: FindGraphQLTags

[zsl99a]

config:
"scripts": {
    "relay": "relay-compiler --src ./src --schema ./src/schema.graphql"
 }

source:
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import Relay, {
  QueryRenderer,
  graphql,
} from 'react-relay'
import routes from './routes'
import environment from './environment'

ReactDOM.render(
  <QueryRenderer
    environment={environment}
    query={graphql`
      query Query {
        viewer {
          id
        }
      }
    `}
    variables={{}}
    render={({error, props}) => {
      if (error) {
        return <div>{error.message}</div>
      } else if (props) {
        return <Router>{routes}</Router>
      }
      return <div>Loading</div>
    }}
  />,
  document.getElementById('container')
)



but error:
 npm run relay

> [email protected] relay /Users/ximo/Desktop/localjs-store
> relay-compiler --src ./src --schema ./src/schema.graphql

HINT: pass --watch to keep watching for changes.
Error: FindGraphQLTags: Operation names in graphql tags must be prefixed with the module name and end in "Mutation", "Query", or "Subscription". Got `Query` in module `client`.
    at invariant (/Users/ximo/Desktop/localjs-store/node_modules/relay-compiler/bin/relay-compiler:4714:12)
    at /Users/ximo/Desktop/localjs-store/node_modules/relay-compiler/bin/relay-compiler:4684:81
    at Array.forEach (native)
    at validateTemplate (/Users/ximo/Desktop/localjs-store/node_modules/relay-compiler/bin/relay-compiler:4680:20)
    at TaggedTemplateExpression (/Users/ximo/Desktop/localjs-store/node_modules/relay-compiler/bin/relay-compiler:4606:12)
    at visit (/Users/ximo/Desktop/localjs-store/node_modules/relay-compiler/bin/relay-compiler:4721:6)
    at traverse (/Users/ximo/Desktop/localjs-store/node_modules/relay-compiler/bin/relay-compiler:4734:8)
    at visit (/Users/ximo/Desktop/localjs-store/node_modules/relay-compiler/bin/relay-compiler:4724:4)
    at traverse (/Users/ximo/Desktop/localjs-store/node_modules/relay-compiler/bin/relay-compiler:4734:8)
    at visit (/Users/ximo/Desktop/localjs-store/node_modules/relay-compiler/bin/relay-compiler:4724:4)

[nosykretts]

I think you need to change you query name to clientQuery like this:

query={graphql`
      query clientQuery {
        viewer {
          id
        }
      }
    `}

[JenniferWang]

The answer above should fix your problem.

[zsl99a]

thanks

[jamesone]

@nosykretts I seem to be having this same issue and doing this doesn't fix it 🤔

<QueryRenderer
    environment={NetworkLayer.getCurrentEnvironment()}
    query={graphql`
      query clientQuery {
        viewer {
          ...Activity_viewer
        }
      }
    `}
    variables={{}}
    render={({error, props}) => {
      if (props) {
        return <ActivityList viewer={props.viewer} />;
      } else {
        return <div>Loading</div>;
      }
    }}
  />

That is how I'm doing it at the moment

[josephsavona]

Note that the name of the query must be <FileName>Query. So query clientQuery { ... } will only work if the query is in a file named client.js.

[jamesone]

@josephsavona Nice. Yeah that was the problem.

[bohdan-didukh]

Thank you @josephsavona !

[proshoumma]

Thank you very much! @josephsavona

[babbarankit]

Someone like me was typing the name of file starting from capitals.
It worked with appQuery and file named app.js not with App.js :bowtie:

[taylorjdawson]

@josephsavona What about this?

Parse error: Error: RelayFindGraphQLTags: Operation names in graphql tags must be 
prefixed with the module name and end in "Mutation", "Query", or "Subscription". 
Got `indexQuery` in module `pages`. in "pages/index.tsx"

filename: index.tsx
query: query indexQuery { ... }

[georgekrax]

Maybe it is in a folder, then it would be {folder_name}_indexQuery.

[Liinkiing]

Hey, I think this issue may need to be reopened, I've tried to hack into the relay compiler and fix the bug as it does not seems to be the correct behaviour, let me explain this.

In a Next app I use dynamic routing, so I have for example a page located under pages/movies/[id].tsx, but the relay compiler think that the module name is just Id, so I would have for exemple to name my query IdQuery which is nonsense. It will also be a problem if I add another dynamic page like pages/posts/[id].tsx because the compiler would force me to name my operation IdQuery, and there will be a conflict.

But it's weird, when for exemple I create an operation in pages/index.tsx, the compiler take in account the page directory and the operation name needs to be pages_indexQuery (which is the better solution IMO).

I think that the modules names should behave the same when using for exemple the dynamic modules names, so it should be

pages/posts/[id].tsx -> pages_posts_IdQuery
pages/blogs/[id].tsx -> pages_blogs_IdQuery

This way, no conflict would be possible, what do you think?

(Sorry to repost here, I've tried to find another related issue that is actually opened, but could not find anything, this issue seems the most relevant)