什么是中继操作名称？

Question

我正在学习 React 应用程序中 GraphQL 的中继库。我按照官方文档做了所有事情。我的 /project/resources/js/schema.graphql 有：

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
}

在我的 React /project/resources/js/components/main/Table.js 中，我尝试进行查询：

<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>;
    }}
/>

然后我运行npm run relay编译它但是它抛出一个错误：

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"

对我来说这是无稽之谈，因为我的查询名称与 module name + "Query" 关键字完全相同。感谢您的帮助。

Answer 1

来自docs：

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

这在this issue中也有概述。如果你的文件名为Table.js，那么你的操作应该是TableQuery.

Answer 2

在 GraphQL 中，操作名称 是紧跟在 query 或 mutation 关键字之后和第一个左大括号之前的名称。它是调用者提供的任意名称，与模式中的任何内容都不相关。第一个左大括号后的第一个字段 selection 是 Query 或 Mutation 类型的字段。

query OperationName {
  topLevelQuery {
    fieldOnItsType
    ... OtherFields
  }
}

您似乎已尝试在 "operation name" 槽中使用顶级查询字段的名称。由于它被识别为操作名称，因此它不会作为顶级查询执行，并且您会被 Relay 关于如何命名的规则绊倒：

Operation names in graphql tags must be prefixed with the module name and end in "Mutation", "Query", or "Subscription"

当前模块名称是 Table（因为您在 Table.js 文件中）。所以你的查询应该看起来像

query TableQuery {
  usersPaginationQuery {
    data {
      ... SomeFieldsOnUsers
    }
  }
}

您需要列出 Users 上您想要 select 的每个字段（假设这是一个对象类型）。我在这里使用了 GraphQL fragment 语法，因为您没有显示该类型中的内容，但是您不能在这里直接使用对象类型名称。

什么是中继操作名称？

What's Relay operation name?

javascript

relay

reactjs

graphql

relayjs