React-relay 在片段上无效使用 @refetchable

Question

我正在学习react-relay（v13），并且在使用@refetchable指定分页片段时遇到问题。这是一个非常基本的结构，如果不使用@refetchable，一切都会正常工作（即我可以查询grapql服务器，获取数据，使用Fragment渲染相同的查询/片段而无需分页）

\n

当我在 ProjectsFragment_user 中引入 @refetchable 时，react-relay 编译器给出错误：

\n

[ERROR] \xe2\x9c\x96\xef\xb8\x8e Invalid use of @refetchable on fragment 'ProjectsFragment_user', only supported are fragments on:\n - the Viewer type\n - the Query type\n - the Node interface or types implementing the Node interface\n - @fetchable type\n

\n

现在这很令人困惑，因为 ProjectsFragment_user 的查询如下所示：

\n

// Dashboard.js\nexport const dashboardQuery = graphql`\nquery DashboardQuery ($id: ID) {\n  user (id: $id){\n    id \n    name\n    ...ProjectsFragment_user\n  }\n}\n`;\n// then \nconst  data = useLazyLoadQuery(dashboardQuery, {}, {},);\n\n

\n

//Projects.js defines fragment\n\nconst {data, loadNext} = usePaginationFragment(graphql`\n    fragment ProjectsFragment_user on User \n    @argumentDefinitions(\n        first: {type: "Int", defaultValue: 10}\n        after: {type: "String"}\n        before: {type: "String"}\n      )\n    @refetchable(queryName: "ProjectsListPaginationQuery")\n    {\n            projects (first: $first, after: $after, before: $before)\n            @connection(key: "ProjectsList_projects") {\n                total\n                edges {\n                  node {\n                   id\n                   name\n          \n                    members {\n                     total\n                     edges {\n                     node {\n                        member_id\n                        member {\n                        name\n                        }\n                        role\n                      }\n                     }\n                   }\n                  }\n              }\n            }\n        }\n    `,\n    props?.projects);\n\n

\n

请注意，如果只是在 ProjectsFragment_user 上使用 useFragment 并删除 @refetchable 我可以获取和渲染数据。

\n

有谁知道为什么这里不允许 @refetchable 吗？

\n

Answer 1

并回答我自己的问题（经过几天的努力弄清楚）。Schema 需要具体说明 Type 正在扩展 Node 接口，否则 React 会按照上面的方式进行抱怨。

所以，我从

type Project {
   id: ID!
   name: String
}

到

type Project implements Node {
   id: ID!
   name: String
}

React-Relay 现在将编译。我希望中继错误消息更清晰一些，因为有太多的事情可能会出错，而且中继对事情很有主见，更好的错误消息将会有很大的帮助。