Search code examples
javascriptreactjsgraphqlrelayjsrelay

What's Relay operation name?


I am learning Relay library for GraphQL in React app. I did everything as in official docs. My /project/resources/js/schema.graphql has:

type usersPagination {
  """List of items on the current page"""
  data: [Users]

  """Number of total items selected by the query"""
  total: Int!

  """Number of items returned per page"""
  per_page: Int!

  """Current page of the cursor"""
  current_page: Int!

  """Number of the first item returned"""
  from: Int

  """Number of the last item returned"""
  to: Int
}

In my React /project/resources/js/components/main/Table.js I try to make query:

<QueryRenderer
    environment={environment}
    query={graphql`
        query usersPaginationQuery {
            data {
                Users
            }
        }
    `}
    render={({error, props}) => {
        if(error) {
            return <div>Error!</div>
        }
        if(!props) {
            return <div>Loading...</div>
        }

        return <div>User: {props.users.data.id}</div>;
    }}
/>

Then I run npm run relay to compile it but it throws me an error:

Parse error: Error: RelayFindGraphQLTags: Operation names in graphql tags must be prefixed with the module name and end in "Mutation", "Query", or "Subscription". Got usersPaginationQuery in module Table. in "components/main/Table.js"

For me it's nonsense, bcz my query name is exact as module name + "Query" keyword. Thanks for any help.


Solution

  • From the docs:

    Note: To enable compatibility mode, relay-compiler enforces the query to be named as Query.

    This is also outlind in this issue. If your file is named Table.js, then your operation should be TableQuery.