react-relay Invalid use of @refetchable on fragment

Question

I am learning react-relay (v13) and have a problem specifying a pagination fragment with @refetchable. It is a very basic structure and everything works if @refetchable is not used (ie I can query grapql server, obtain data, useFragment to render same query/fragment without pagination)

When I introduce @refetchable in the ProjectsFragment_user the react-relay compiler gives error:

[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

Now this is confusing as ProjectsFragment_user is on a query that looks like this:

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

Note, if just useFragment on ProjectsFragment_user and remove @refetchable I can fetch and render data.

Does anyone have any clues why @refetchable is not allowed here??

score 5 · Answer 1 · answered Mar 25 '22 at 13:21

And to answer my own question (after days of trying to figure it out). The Schema needs to be specific that Type is extending Node interface otherwise react will complain as per above.

So, I cnahged Project from

type Project {
   id: ID!
   name: String
}

to

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

and React-Relay will compile now. I wish relay error messages are a bit clearer as there are sooo many things that can go wrong and as relay is pretty opinionated about things better error messages would be a great help.

react-relay Invalid use of @refetchable on fragment

1 Answers1