Question

我正在React应用程序中学习GraphQL的Relay库。我做了所有与官方文档一样的事情。我的/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对其进行编译，但会引发错误：

解析错误：错误：RelayFindGraphQLTags：graphql中的操作名称标签必须以模块名称为前缀，并以“ Mutation”结尾， “查询”或“订阅”。在模块中获得了usersPaginationQuery Table。在“ components / main / Table.js”中

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

Answer 1

来自docs：

注意：要启用兼容模式，中继编译器强制将查询命名为Query。

这在this issue中也不适用。如果文件名为Table.js，则操作应为TableQuery。

Answer 2

在GraphQL中，操作名称是紧随query或mutation关键字之后且在第一个大括号之前的名称。它是调用者提供的任意名称，与架构中的任何内容都不相关。在第一个大括号之后的第一个字段选择是Query或Mutation类型的字段。

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

您似乎已尝试在“操作名称”插槽中使用顶级查询字段的名称。由于已将其识别为操作名称，因此不会将其作为顶级查询执行，因此您将绕过Relay的规则命名规则：

graphql标记中的操作名称必须以模块名称为前缀，并以“ Mutation”，“ Query”或“ Subscription”结尾

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

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

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

中继操作名称是什么？

2 个答案: