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

Question

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

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

[ERROR] ✖︎ Invalid use of @refetchable on fragment 'ProjectsFragment_user', only supported are fragments on:
 - the Viewer type
 - the Query type
 - the Node interface or types implementing the Node interface
 - @fetchable type

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

// Dashboard.js
export const dashboardQuery = graphql`
query DashboardQuery ($id: ID) {
  user (id: $id){
    id 
    name
    ...ProjectsFragment_user
  }
}
`;
// then 
const  data = useLazyLoadQuery(dashboardQuery, {}, {},);

//Projects.js defines fragment

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

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

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

Answer 1

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

因此，我将项目从 cnahged

type Project {
   id: ID!
   name: String
}

到

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

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