CODEWITHSUNDEEP
reactjsgraphql-jsrelaymodernreact-relay
user9128309
user9128309

Reputation: 182

react-relay Invalid use of @refetchable on fragment

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??

Upvotes: 4

Views: 2107

Answers (1)

user9128309
user9128309

Reputation: 182

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.

Upvotes: 6

Related Questions